2014年2月8日土曜日

phpとJapascriptを使ってページの文章を切り替える方法

 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を使ってページの文章を切り替える方法


0 件のコメント:

コメントを投稿