続いてsortableTable
ダウンロードはここから。
- sortableTable.js [sortabletable.zipってやつ]
- MooTools [MooTools 1.2.3のJSMin]
評価
- 使いやすさ：△ axis属性はどうなのか？明示的に指定するのは安心だけど面倒な面もあるね
- 安心：○ mootoolsも安心かなぁ
- その他：「矢印で幅を取られるのが困るけど、cssいじれば大丈夫だと思う。
できれば下線にしたいな。」というのはjQueryのときと同じ意見
jQueryのときと変わった部分
1. 読み込むスクリプトが違うのは当然。
2. scriptの実行部分
script language="Javascript" type="text/javascript"><!--
var myTable = {};
window.addEvent('domready', function(){
myTable = new sortableTable('myTable', {overCls: 'over', onClick: function(){alert(this.id)}});
});
//--></script>
3. class指定不要
ソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title> .:: Sample Play Keepaway ::. Table-Sort-01</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="Author" content="Sample">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="css/sortableTable.css" type="text/css" media="print, projection, screen" />
<script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/mootools-1.2.3-core-jm.js"></script>
<script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/sortableTable.js"></script>
<script language="Javascript" type="text/javascript"><!--
var myTable = {};
window.addEvent('domready', function(){
myTable = new sortableTable('myTable', {overCls: 'over', onClick: function(){alert(this.id)}});
});
//--></script>
</head>
<body>
<table id="myTable" cellpadding="0" cellpadding="0">
<thead>
<tr>
<th axis="string">first name</th>
<th axis="string">last name</th>
<th axis="number">age</th>
<th axis="number">total</th>
<th axis="number">discount</th>
<th axis="date">date</th>
</tr>
</thead>
<tbody>
<tr>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
<tr>
<td>clark</td>
<td>kent</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>jan 12, 2003 11:14 am</td>
</tr>
<tr>
<td>bruce</td>
<td>almighty</td>
<td>45</td>
<td>$153.19</td>
<td>44%</td>
<td>jan 18, 2001 9:12 am</td>
</tr>
<tr>
<td>bruce</td>
<td>evans</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>jan 18, 2007 9:12 am</td>
</tr>
</tbody>
</table>
</body>
</html>
