|
挿入場所が記事の前か後かによってソースが変わってくるのですが、とりあえずここでは記事の直後に挿入することを前提に話を進めていきます。
☆重要な点☆
$logは<body>〜</body>のソースに記述しましたが、「その2」では、各表示記事のソース内に記述します。(以下、例としてtreeを考えていきます)
treeのソース
<!--tree start-->
[ここは今までのソース(この下が新しいソースです)]
$end{
<script language="JavaScript">
<!--
var kiji = 1;
var page = 1;
var max = $seq;
document.writeln('<form action="bbs_tree" method=GET">');
document.writeln('<input type=hidden name=range value=100>');
document.writeln('<select name=base>');
while(kiji < max - 100){
document.writeln('<option value=',kiji + 99,'>',page,'ページ目');
kiji = kiji + 100;
page = page + 1;
}
document.writeln('<option value=',kiji + 99,' selected>',page,'ページ目');
document.writeln('</select> <input type=submit value="過去のページを見る">');
document.writeln('</form>');
//-->
</script>
<noscript><a href="bbs_tree?base=$seq&range=100">前のページを見る</a></noscript>
}
<!--tree end-->
<body>〜</body>からは$logを消してください。
|
|
☆解説☆
上に書いたのは「〜ページ目」といったかんじで出力する場合のソースです。(サンプルのソース)
通常と同様のタグを生成する場合は次のソースになります。
<script language="JavaScript">
<!--
var kiji = 1;
var max = $seq;
document.writeln('<form action="bbs_tree"
method=GET>');
document.writeln('<input type=hidden name=range value=100>');
document.writeln('<select name=base>');
while(kiji < max - 100){
document.writeln('<option value=',kiji + 99,'>',kiji,' - ',kiji
+ 99);
kiji = kiji + 100;
}
document.write('<option value=',kiji + 99,'
selected>',kiji,' - </select>');
document.writeln('<input type=submit value="過去ログ">');
document.writeln('</form>');
//-->
</script>
<noscript><a href="bbs_tree?base=$seq&range=100">前のページを見る</a></noscript>
$seqで記事番号を受け取り、1-100, 101-200, 201-300 といった具合に繰り返しoptionタグを生成し、$seqまで届いたら終了 という仕組みです。
(注1)
ここでは過去ログ参照数を100としています。
それでは多すぎるという場合は、例えば50件表示にしたい場合は
100→50 99→49 のように変えてください。
(注2)
もちろんtree以外にも適用が可能です。
それぞれのtreeの部分をplainなどに変更してください。
(注3)
$seqには、表示している記事の一番最後の記事番号が代入されます。
もし、$end以外に当てはめたい場合は、少しソースを変更する必要があるかも知れません。
また、過去ログ参照後に元のページに戻れなくなるのが弱点です。
(注4)
このままでは、$logと全く同じソースになるので、カスタマイズするにはstyleを変更します。
<select>と<input>(ボタン)を <select style="…">のようにしてやればOKです。ただし、その1の「全体的な注意点」にも記しましたが、borderに関するスタイル指定をするとNN4でバグが生じ、さらにJSと組み合わせると、わけのわからない表示になってしまうので、@import
url('〜.css');を利用するのが良いと思います。
|