- JavaScriptのJQuery、そのプラグインのTablesorterを使って、
プレイヤー一覧(PC用のみ)の表を昇順、降順にするやり方です。
JQuery,Tablesorterの一式をこちらでダウンロード
http://tablesorter.com/docs/
http://tablesorter.com/docs/
Contentsメニューの
1.Introduction
…
6.Download←クリック
1.Introduction
…
6.Download←クリック
Downloadの
Full release
jquery.tablesorter.zip←これをダウンロードする
Full release
jquery.tablesorter.zip←これをダウンロードする
- Lhacaなどで圧縮されたものを解凍する
ズラーと色々とファイルやフォルダが入っていますが使用するものは以下の３つだけです。
- jquery.tablesorter.js
- jquery-latest.js
- themesフォルダ
その３つを「./bj/html/」フォルダの中におきます
ここまでで準備は完了です。
次はこれらを動かすＨＴＭＬ文をプログラム内に追記していきます。
./bj/login.cgiファイルを開きます。
229行目あたりの
sub header_players_html {
my $country = shift;
my $html = '';
$html .= qq|<html><head>|;
$html .= qq|<meta http-equiv="Cache-Control" content="no-cache">|;
$html .= qq|<link rel="stylesheet" type="text/css" href="bj.css">|;
$html .= qq|<title>$title / $cs{name}[$country]</title>|;
$html .= qq|</head><body $body>|;
$html .= qq|<form action="../$script_index"><input type="submit" value="ＴＯＰ" class="button1"></form>|;
$html .= qq|<p>更新日時 $date</p>|;
を
sub header_players_html {
my $country = shift;
my $html =<<"EOM";
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache">
<link rel="stylesheet" type="text/css" href="bj.css">
<title>$title / $cs{name}[$country]</title>
<link rel="stylesheet" type="text/css" href="themes/bluegreen/style.css">
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript">
<!--
\$(document).ready(function() {
\$(".tablesorter").tablesorter({
widgets: ['zebra']
});
});
-->
</script>
</head><body $body>
<form action="../$script_index"><input type="submit" value="ＴＯＰ" class="button1"></form>
<p>更新日時 $date</p>
EOM
に書き換えます。
<link rel="stylesheet" type="text/css" href="themes/green/style.css">
は
<link rel="stylesheet" type="text/css" href="themes/blue/style.css">
でも可能です。どちらか好きな方をお使いください(本家はblueです)
<table>タグにclass="tablesorter",<thead><tbody>を挿入(Ver1.90,Ver2.70以降は修正済み)
70行目付近
sub write_players_html {
my $country = shift;
my @rows = (qw/名前 性別 階級 部隊 職業 武器 ﾀﾏｺﾞ ﾍﾟｯﾄ 世代 Lv HP MP AT DF MAT MDF AG LEA CHA お金 ｺｲﾝ 更新時間 ﾒｯｾｰｼﾞ/);
my $html = '';
$html .= qq|<table class="tablesorter"><thead><tr>|;
$html .= qq|<th>$_</th>| for (@rows);
$html .= qq|</tr></thead><tbody>|;
my $country = shift;
my @rows = (qw/名前 性別 階級 部隊 職業 武器 ﾀﾏｺﾞ ﾍﾟｯﾄ 世代 Lv HP MP AT DF MAT MDF AG LEA CHA お金 ｺｲﾝ 更新時間 ﾒｯｾｰｼﾞ/);
my $html = '';
$html .= qq|<table class="tablesorter"><thead><tr>|;
$html .= qq|<th>$_</th>| for (@rows);
$html .= qq|</tr></thead><tbody>|;
133行目付近
# 削除 $html .= $count % 2 == 0 ? qq|<tr class="stripe1">| : qq|<tr>|;
$html .= qq|<tr>|;
$html .= qq|<tr>|;
156行目付近
$html .= qq|</tbody></table>|;
でプログラム内の書き換えは終了です。お疲れ様でした。
これで項目をクリックすると昇順・降順に並び換えができるようになったのですが、
Tablesorterのデフォルトのスタイルシートだと表が崩れてしまうので、
Tablesorterのデフォルトのスタイルシートだと表が崩れてしまうので、
./bj/html/themes/green/style.cssの７行目
table.tablesorter th {
text-align: left;
padding: 5px;
background-color: #6E6E6E;
}
table.tablesorter td {
color: #FFF;
padding: 5px;
}
text-align: left;
padding: 5px;
background-color: #6E6E6E;
}
table.tablesorter td {
color: #FFF;
padding: 5px;
}
に
table.tablesorter th {
text-align: left;
padding: 5px;
background-color: #6E6E6E;
color: #333;
white-space: nowrap;
}
table.tablesorter td {
color: #FFF;
padding: 5px;
white-space: nowrap;
}
text-align: left;
padding: 5px;
background-color: #6E6E6E;
color: #333;
white-space: nowrap;
}
table.tablesorter td {
color: #FFF;
padding: 5px;
white-space: nowrap;
}
と追記してください。
文字のサイズや表の色や矢印の画像などを変えるには「./bj/html/themes/green/」の中をいじってください。
後は、プレイヤー一覧が更新されていけば反映されていきます。
