「プレイヤー一覧昇順降順」の編集履歴（バックアップ）一覧はこちら
「プレイヤー一覧昇順降順」(2008/08/17 (日) 11:50:46) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
-JavaScriptのJQuery、そのプラグインのTablesorterを使って、
プレイヤー一覧(PC用のみ)の表を昇順、降順にするやり方です。
JQuery,Tablesorterの一式をこちらでダウンロード
http://tablesorter.com/docs/
Contentsメニューの
1.Introduction
…
6.Download←クリック
Downloadの
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/green/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">
でも可能です。どちらか好きな方をお使いください。
**<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|&COLOR(#F00){<table class="tablesorter"><thead>}<tr>|;
$html .= qq|<th>$_</th>| for (@rows);
$html .= qq|</tr>&COLOR(#F00){</thead><tbody>}|;
***133行目付近
# 削除 $html .= $count % 2 == 0 ? qq|<tr class="stripe1">| : qq|<tr>|;
$html .= qq|<tr>|;
***156行目付近
$html .= qq|&COLOR(#F00){</tbody>}</table>|;
でプログラム内の書き換えは終了です。お疲れ様でした。
これで項目をクリックすると昇順・降順に並び換えができるようになったのですが、
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;
}
----
に
----
table.tablesorter th {
text-align: left;
padding: 5px;
background-color: #6E6E6E;
&COLOR(#F00){color: #333;}
&COLOR(#F00){white-space: nowrap;}
}
table.tablesorter td {
color: #FFF;
padding: 5px;
&COLOR(#F00){white-space: nowrap;}
}
----
と追記してください。
文字のサイズや表の色や矢印の画像などを変えるには「./bj/html/themes/green/」の中をいじってください。
後は、プレイヤー一覧が更新されていけば反映されていきます。
-JavaScriptのJQuery、そのプラグインのTablesorterを使って、
プレイヤー一覧(PC用のみ)の表を昇順、降順にするやり方です。
JQuery,Tablesorterの一式をこちらでダウンロード
http://tablesorter.com/docs/
Contentsメニューの
1.Introduction
…
6.Download←クリック
Downloadの
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|&COLOR(#F00){<table class="tablesorter"><thead>}<tr>|;
$html .= qq|<th>$_</th>| for (@rows);
$html .= qq|</tr>&COLOR(#F00){</thead><tbody>}|;
***133行目付近
# 削除 $html .= $count % 2 == 0 ? qq|<tr class="stripe1">| : qq|<tr>|;
$html .= qq|<tr>|;
***156行目付近
$html .= qq|&COLOR(#F00){</tbody>}</table>|;
でプログラム内の書き換えは終了です。お疲れ様でした。
これで項目をクリックすると昇順・降順に並び換えができるようになったのですが、
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;
}
----
に
----
table.tablesorter th {
text-align: left;
padding: 5px;
background-color: #6E6E6E;
&COLOR(#F00){color: #333;}
&COLOR(#F00){white-space: nowrap;}
}
table.tablesorter td {
color: #FFF;
padding: 5px;
&COLOR(#F00){white-space: nowrap;}
}
----
と追記してください。
文字のサイズや表の色や矢印の画像などを変えるには「./bj/html/themes/green/」の中をいじってください。
後は、プレイヤー一覧が更新されていけば反映されていきます。
表示オプション
横に並べて表示：
変化行の前後のみ表示：
