phpを使ってページを作っている。
htmlフレームと同じで、画面をいくつかに分けて、小さなコンテンツを組み合わせた大きなページを作ることが可能なので、phpは好きだ。
フレームだと簡単だけどphpじゃ難しいことが一つある。ページ全体を再読み込みせずに、小さなコンテンツの表示だけ、文章だけを切り替えることだ。
例:
2ちゃんねる
このページは左のメニューをクリックすると右のフレームに掲示板が表示される仕組みになっている。左のメニュー画面は再読み込みされない。
こういう仕組みを、phpでも作りたいと思った。だけど出来ない。
JavaScriptを使えばいけることがわかったので、書いていく。(リンク先サイトを超参照した。すべてのphpは文字コードをutf-8にして保存すること。)
<head>
<script type="text/javascript">
<!--
var txt1 = "<?php require 'red.php' ?>";
var txt2 = "<?php require 'blue.php' ?>";
var txt3 = "<?php require 'yellow.php' ?>";
function ChangeTxt(txt) {
document.getElementById("text").innerHTML=txt;
}
-->
</script>
</head>
<body>
<div id="text">ここの文章を変える</div>
<ul>
<li><a href="javascript:void(0)" onclick="ChangeTxt(txt1); return false;">赤</a></li>
<li><a href="javascript:void(0)" onclick="ChangeTxt(txt2); return false;">青</a></li>
<li><a href="javascript:void(0)" onclick="ChangeTxt(txt3); return false;">黄色</a></li>
</ul>
</body> |
<head>~</head>の間にJavaScriptの記述を書く。txt1~txt3のそれぞれの変数の中にphpの命令を入れる。php requireは当該phpのページの中に別のphpのデータを持ってくる命令だ。別のphpの中身は以下のとおり。一文だけ書いて、文字コードutf-8でそれぞれの名称で保存するだけ。
red.php | | 赤は英語で<strong>red</strong>です。 |
blue.php | | 青は英語で<strong>blue</strong>です。 |
yellow.php | | 黄色は英語で<strong>yellow</strong>です。 |
phpファイルのファイル名を変えたらtxt1~3で読み込む
php requireのファイル名を変えればいいだけ。クリックする文字を変えたかったら、
<li>~</li>の中の文字を変えればいい。
とっても簡単。これで出来上がり。
しかし大きな問題があった。requireしたphpに改行があるとうまく読み込んでくれないのだ。上手に変数でなんとかすると出来るみたいだけどややこしい。やっぱりJavascriptはあきらめて、phpでやったほうがはやそうなので、phpでやってみた。
→
phpを使ってページの文章を切り替える方法