11/24の記事「jQueryのDatepickerを導入して、ついでにカスタマイズ。」で、「“Datepicker”以外にも、なんだか今後色々使いそうな予感がする」と書いた。

やっぱり使った。

Tabs”だ。

読んで字の如く、"タブ”機能を提供してくれる。

しかも、ダウンロード前にあらかじめスタイルシートのカスタマイズをしているので、“Datepicker”のデザインと共通している。

やっぱり、諸々の機能をダウンロードしておくと、何かと便利である。

ダウンロードの仕方は上記の記事を読んでいただくとして、今回は“Tabs”の使い方に関して書き留めておく。

いや、何も難しいことではない。

オプションで色々指定できるのだが、今回は"タブにマウスオーバーしたら自動的に開く”ようにした。

JavaScript用外部ファイル(別にそれぞれのhtml(php)ファイル中でもよいのだが、1つのファイルにまとめて記述しておくと何かと便利)に、以下のコードを記述する。

$(function() {
  $( "#tabs" ).tabs({
    event: "mouseover"
  });
});

3行目の"event: "mouseover"”が、"マウスオーバーで自動的に開く”のオプション。

で、html(php)には、タブにしたい部分に以下のように記述する。

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">タブ1</a></li>
    <li><a href="#tabs-2">タブ2</a></li>
    <li><a href="#tabs-3">タブ3</a></li>
  </ul>
  <div id="tabs-1">
    タブ1の内容
  </div>
  <div id="tabs-2">
    タブ2の内容
  </div>
  <div id="tabs-3">
    タブ3の内容
  </div>
</div>

基本、コレだけ。

超簡単である。

1行目の"id="tabs"”のid名がJavaScriptのコードの2行目の"$( "#tabs" )”と同じであれば、当然書き換え可能。

また、7、10、13行目のid名も、それぞれリスト項目のアンカーで指定しているidと同じであれば、当然書き換え可能である。

たったコレだけで、美しいタブが生成される。

今回は、具体的に"ボウリングの紆余曲折”の"スコア分析”ページの"1投目に残るピンの割合”の表示で使用してみた。

話としては、11/27の記事「phpの“null”と“0”の扱い(“型”の扱い)について」の続きである。

上記記事中のphpコードの23~25行目で、$sum_rest['head'][$j]、$sum_rest['nohead'][$j]、$sum_rest['total'][$j]という配列を作っているのだが、これはヘッドピンヒット時、ノーヘッド時、および合計の3つの場合に関して"全部でj番ピンが何回残ったか”を表すものである。

これらの配列から、1投あたりのj番ピンの残る確率($ave_rest['head'][$j]、$ave_rest['nohead'][$j]、$ave_rest['total'][$j])を求める。

$total_frame = $game * 10;
$sum_nohead = $total_frame - $sum_head;
for($j = 1; $j <= 10; $j++){
  $ave_rest['head'][$j] = round((($sum_rest['head'][$j] / $sum_head) * 100), 2);
  $ave_rest['nohead'][$j] = round((($sum_rest['nohead'][$j] / $sum_nohead) * 100), 2);
  $ave_rest['total'][$j] = round((($sum_rest['total'][$j] / $total_frame) * 100), 2);
}

次に、phpファイルでタブを生成したい部分に、以下のように記述する。

print "<h5>■1投目に残るピンの割合</h5>\n";
print "<div id=\"tabs\" class=\"first_ratio\">\n";
print "  <ul>\n";
print "    <li><a href=\"#total\">トータル</a></li>\n";
print "    <li><a href=\"#head\">ヘッドピンヒット時</a></li>\n";
print "    <li><a href=\"#nohead\">ノーヘッド時</a></li>\n";
print "  </ul>\n";

printRestPinRatio($ave_rest, "total");
printRestPinRatio($ave_rest, "head");
printRestPinRatio($ave_rest, "nohead");

print "</div>\n";

printRestPinRatio()関数は自作関数で、割合の図を描画する関数である。これを外部インクルードファイルに記述して、あらかじめinclude(もしくはrequire)しておく。

function printRestPinRatio($x,$y)
{  
  print "<div id=\"{$y}\" class=\"rest_total\">\n";
  for($j = 1; $j <= 4; $j++){
    print " <div class=\"rest_row\">\n";
    if($j == 1){
      $start = 7;
      $end = 10;
    }elseif($j == 2){
      $start = 4;
      $end = 6;
    }elseif($j == 3){
      $start = 2;
      $end = 3;
    }elseif($j == 4){
      $start = 1;
      $end = 1;
    }
    for($k = $start; $k <= $end; $k++){
      print "    <span class=\"rest_ratio\"><strong>{$k}番ピン</strong><br />{$x[$y][$k]}%</span>\n";
    }
    print "  </div>\n";
  }
  print "</div>\n";
}

以上で完成。

出来上がりが"ボウリングの紆余曲折”の"1投目分析”画面に表示されるので、興味があれば見てください。

なんだかいろいろ楽しくなってきた。

でも今日は朝からかなり活動的だったので、疲れた。

寝ます。