!!!jQuery の基本的なこと
オフィシャル
http://jquery.com/
ノンプログラマーのためのjQuery入門
http://kachibito.net/web-design/jquery-slide-for-beginner.html
日本語リファレンス
http://semooh.jp/jquery/
入門的なサイト
http://ascii.jp/elem/000/000/498/498710/
!!!基本
$(セレクタ).メソッド(引数);
例
$("div").css("color","red");
とか。
!!セレクタ
$("#hoge") //IDセレクタ
$(".huga") // class セレクタ
$("*") // 全称セレクタ
$("a img") //子孫セレクタ
$("p, div.huga") //グループ化
!!$
$ は jQuery のエイリアス
$("div").css("color","red");
は
jQuery("div").css("color","red");
と同じ。
あとは、色んなサンプルみて学ぶ
!!!リストのソートとか
!!テーブルのヘッダ固定とソート
http://goomino.blog9.fc2.com/blog-entry-12.html
jQuery プラグインのTableSorter を使いつつ、ヘッダを固定する方法
!tablesorter.css
{{code HTML,
th, td {
font:12px/1.22 "Osaka", "ＭＳ Ｐゴシック", Arial, sans-serif;
*font-size:small;
*font:x-small;
}
#tableheader {
position:relative;
border:1px solid #999;
width:230px;
padding-top:17px;
}
#tablecontent {
overflow:auto;
height:120px;
}
#tablesorter {
border-spacing:0;
}
#tablesorter thead tr .header {
background-image:url(themes/blue/bg.gif);
background-repeat:no-repeat;
background-position:center right;
cursor:pointer;
}
#tablesorter thead tr {
position:absolute;
top:0;
left:0;
}
#tablesorter thead tr th {
background-color:#b2d6ff;
border-right:1px solid #999;
border-bottom:1px solid #999;
width:100px;
font-weight:normal;
}
#tablesorter tbody tr td {
border-right:1px solid #999;
border-bottom:1px solid #ddd;
width:100px;
}
#tablesorter thead tr .headerSortUp {
background-image:url(themes/blue/asc.gif);
}
#tablesorter thead tr .headerSortDown {
background-image:url(themes/blue/desc.gif);
}
#tablesorter thead tr .headerSortDown, #tablesorter thead tr .headerSortUp {
background-color: #5998e0;
}
#tablesorter tbody tr.even td {
background-color:#fff;
}
#tablesorter tbody tr.odd td {
background-color:#eee;
}
#tablesorter tbody tr.over td {
background-color:#ffe6b3;
}
}}
!サンプルhtml
{{code HTML,
Tablesorter
}}
!!その他いろいろ
http://mjsarfatti.com/sandbox/nestedSortable/
http://loudev.com/demos.html
書き方は色々ごちゃまぜ。
{{code HTML,
Drag me
- アイテム 1
- アイテム 2
- アイテム 2-1
- アイテム 2-2
- アイテム 2-3
- アイテム 3
- アイテム 4
- アイテム 5
- アイテム 6
- アイテム 7
Item 1
Item 2
Sub Item 2.1
Sub Item 2.2
Sub Item 2.3
Sub Item 2.4
Item 3 (no-nesting)
Item 4 (no-nesting)
Item 5
Item 6
Sub Item 6.1
Sub Item 6.2 (no-nesting)
Sub Item 6.3
Sub Item 6.4
Item 7
Item 8
}}
{{category2 プログラミング言語,JavaScript}}