プレイヤー一覧昇順降順


※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

  • JavaScriptのJQuery、そのプラグインのTablesorterを使って、
プレイヤー一覧(PC用のみ)の表を昇順、降順にするやり方です。

JQuery,Tablesorterの一式をこちらでダウンロード
http://tablesorter.com/docs/

Contentsメニューの
1.Introduction

6.Download←クリック

Downloadの
Full release
jquery.tablesorter.zip←これをダウンロードする

  • Lhacaなどで圧縮されたものを解凍する

ズラーと色々とファイルやフォルダが入っていますが使用するものは以下の3つだけです。
  • jquery.tablesorter.js
  • jquery-latest.js
  • themesフォルダ

その3つを「./bj/html/」フォルダの中におきます

ここまでで準備は完了です。


次はこれらを動かす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="TOP" 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="TOP" 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> |;

133行目付近

# 削除 $html .= $count % 2 == 0 ? qq|<tr class="stripe1">| : qq|<tr>|;
$html .= qq|<tr>|;

156行目付近

$html .= qq| </tbody> </table>|;


でプログラム内の書き換えは終了です。お疲れ様でした。


これで項目をクリックすると昇順・降順に並び換えができるようになったのですが、
Tablesorterのデフォルトのスタイルシートだと表が崩れてしまうので、

./bj/html/themes/green/style.cssの7行目


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: #333;
white-space: nowrap;
}
table.tablesorter td {
color: #FFF;
padding: 5px;
white-space: nowrap;
}

と追記してください。

文字のサイズや表の色や矢印の画像などを変えるには「./bj/html/themes/green/」の中をいじってください。

後は、プレイヤー一覧が更新されていけば反映されていきます。
|新しいページ|検索|ページ一覧|RSS|@ウィキご利用ガイド | 管理者にお問合せ
|ログイン|