トップ 差分 一覧 ソース 置換 検索 ヘルプ PDF RSS ログイン

jQuery

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"><title>Tablesorter</title>

<link type="text/css" rel="stylesheet" href="Tablesorter_files/tablesorter.css">
<script type="text/javascript" src="Tablesorter_files/jquery.js"></script>
<script type="text/javascript" src="Tablesorter_files/tablesorter.js"></script>
<script language="javascript" type="text/javascript">
<!-- 
$(document).ready(function(){
$("#tablesorter").tablesorter({
widgets:['zebra']

/*年月を降順指定 */
/*widgets:['zebra'],*/
/*sortList: [[0, 1]] */

/*年月のみソート可能 */
/*widgets:['zebra'],*/
/*headers:{1:{ sorter:false }} */
});

// mouseover 時
$("#tablesorter tbody tr").mouseover(function() {
$(this).addClass("over");
});

// mouseout 時
$("#tablesorter tbody tr").mouseout(function() {
$(this).removeClass("over");
});
});
// -->
</script>
</head>
<body>
<div id="tableheader">
<div id="tablecontent">
<table id="tablesorter" cellpadding="0" cellspacing="0">
<thead>
<tr><th class="header headerSortUp">年月</th><th class="header">沿革</th></tr>
</thead>
<tbody>











<tr class="even"><td>2009/02</td><td>ん</td></tr><tr class="odd"><td>2009/01</td><td>わ</td></tr><tr class="even"><td>2001/03</td><td>らりるれろ</td></tr><tr class="odd"><td>2001/02</td><td>やゆよ</td></tr><tr class="even"><td>2001/01</td><td>まみむめも</td></tr><tr class="odd"><td>2000/03</td><td>はひふへほ</td></tr><tr class="even"><td>2000/02</td><td>なにぬねの</td></tr><tr class="odd"><td>2000/01</td><td>たちつてと</td></tr><tr class="even"><td>1999/03</td><td>さしすせそ</td></tr><tr class="odd"><td>1999/02</td><td>かきくけこ</td></tr><tr class="even"><td>1999/01</td><td>あいうえお</td></tr></tbody>
</table>
</div>
</div>


</body></html>

 その他いろいろ

http://mjsarfatti.com/sandbox/nestedSortable/
http://loudev.com/demos.html

書き方は色々ごちゃまぜ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
 
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="jquery.treeSort.css" type="text/css">
    <script src="jQuery/js/jquery-1.6.2.min.js"></script>
    <script src="jQuery/js/jquery-ui-1.8.16.custom.min.js"></script>
    <!--<script src="./jquery.treeSort.js"></script>-->
    <script src="nestedSortable-1.3.4/jquery.ui.nestedSortable.js"></script>
    
    <link rel="stylesheet" href="lou-multi-select-2168a06/css/application.css" type="text/css">
    <link rel="stylesheet" href="lou-multi-select-2168a06/css/multi-select.css" type="text/css">
    <script src="lou-multi-select-2168a06/js/application.js"></script>
    <script src="lou-multi-select-2168a06/js/jquery.multi-select.js"></script>
    <script src="lou-multi-select-2168a06/js/jquery.quicksearch.js"></script>
    
    <style type="text/css">
      #draggable { width: 100px; height: 70px; background: silver; }
    </style>
    
    <style type="text/css">
      ol {
        margin: 0;
        padding: 0;
        padding-left: 30px;
      }
      
      ol.sortable, ol.sortable ol {
        margin: 0 0 0 25px;
        padding: 0;
        list-style-type: none;
      }
      
      ol.sortable {
        margin: 4em 0;
      }
      
      .sortable li {
        margin: 7px 0 0 0;
        padding: 0;
      }
      
      .sortable li div  {
        border: 1px solid black;
        padding: 3px;
        margin: 0;
        cursor: move;
      }
      .placeholder {
        background-color: #cfcfcf;
      }
      
    </style>
    
    <script>
      $(document).ready(function() {
      $("#draggable").draggable();
      });
      
      jQuery(function($) {
      // $("#myList").sortable();
      $("#myList").sortable({ items: "li" });
      });
      
      $(document).ready(function(){
      
      $('ol.sortable').nestedSortable({
      disableNesting: 'no-nest',
      forcePlaceholderSize: true,
      handle: 'div',
      helper:'clone',
      items: 'li',
      maxLevels: 3,
      opacity: .6,
      placeholder: 'placeholder',
      revert: 250,
      tabSize: 25,
      tolerance: 'pointer',
      toleranceElement: '> div'
      });
      
      // $('#serialize').click(function(){
      // serialized = $('ol.sortable').nestedSortable('serialize');
      // $('#serializeOutput').text(serialized+'\n\n');
      // })
      // 
      // $('#toHierarchy').click(function(e){
      // hiered = $('ol.sortable').nestedSortable('toHierarchy');
      // hiered = dump(hiered);
      // (typeof($('#toHierarchyOutput')[0].textContent) != 'undefined') ?
      // $('#toHierarchyOutput')[0].textContent = hiered : $('#toHierarchyOutput')[0].innerText = hiered;
      // })
      // 
      $('#show_array').click(function(e){
      arraied = $('ol.sortable').nestedSortable('toArray', {startDepthCount: 0});
      alert(arraied);
      // arraied = dump(arraied);
      // (typeof($('#toArrayOutput')[0].textContent) != 'undefined') ?
      // $('#toArrayOutput')[0].textContent = arraied : $('#toArrayOutput')[0].innerText = arraied;
      })
      
      });
      
      function dump(arr,level) {
      var dumped_text = "";
      if(!level) level = 0;
      
      //The padding given at the beginning of the line.
      var level_padding = "";
      for(var j=0;j<level+1;j++) level_padding += "    ";
      
      if(typeof(arr) == 'object') { //Array/Hashes/Objects
      for(var item in arr) {
      var value = arr[item];
      
      if(typeof(value) == 'object') { //If it is an array,
      dumped_text += level_padding + "'" + item + "' ...\n";
      dumped_text += dump(value,level+1);
      } else {
      dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
      }
      }
      } else { //Strings/Chars/Numbers etc.
      dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
      }
      return dumped_text;
      }
      
      
    </script>
  </head>
  <body>
    
    <div id="draggable">Drag me</div>
    
    
    <ul id="myList">
      <li>アイテム 1</li>
      <li>アイテム 2
        <ul>
          <li>アイテム 2-1</li>
          <li>アイテム 2-2</li>
          <li>アイテム 2-3</li>
        </ul>
      </li>
      <li>アイテム 3</li>
      <ul>
      </ul>
      <li>アイテム 4
        <ul>
          <li>アイテム 4-1</li>
          <li>アイテム 4-2</li>
        </ul>
      </li>
      <li>アイテム 5</li>
      <li>アイテム 6</li>
      <li>アイテム 7</li>
    </ul>
    
    <hr>
    <input type="button" id="show_array" value="ツリー情報">
    <ol class="sortable">
      <li id="list_1"><div>Item 1</div>
      <li id="list_2"><div>Item 2</div>
      <ol>
        <li id="list_3"><div>Sub Item 2.1</div>
        <li id="list_4"><div>Sub Item 2.2</div>
        <li id="list_5"><div>Sub Item 2.3</div>
        <li id="list_6"><div>Sub Item 2.4</div>
      </ol>
      <li id="list_7" class="no-nest"><div>Item 3 (no-nesting)</div>
      <li id="list_8" class="no-nest"><div>Item 4 (no-nesting)</div>
      <li id="list_9"><div>Item 5</div>
      <li id="list_10"><div>Item 6</div>
      <ol>
        <li id="list_11"><div>Sub Item 6.1</div>
        <li id="list_12" class="no-nest"><div>Sub Item 6.2 (no-nesting)</div>
        <li id="list_13"><div>Sub Item 6.3</div>
        <li id="list_14"><div>Sub Item 6.4</div>
      </ol>
      <li id="list_15"><div>Item 7</div>
      <li id="list_16"><div>Item 8</div>
    </ol>
    
    <hr>
    <div class='searchable' >
      <form id='searchable-form' action='http://localhost:4567/ms' method='post'>
        <select name='countries[]' multiple='multiple' id='searchable-select'>
          <option value='fr' selected='selected'>France</option>
          
          <option value='ca'>Canada</option>
          <option value='ar'>Argentina</option>
          <option value='pt'>Portugal</option>
          <option value='us'>United States</option>
          <option value='gb'>United Kingdom</option>
          <option value='au'>Australia</option>
          
          <option value='ao'>Angola</option>
          <option value='aq'>Antarctica</option>
          <option value='bq'>Burkina Faso</option>
          <option value='cn'>China</option>
        </select>
        <input type='submit' value='submit' />
      </form>
      
    </div>
  </body>
</html>

[カテゴリ: プログラミング言語 > JavaScript]

[通知用URL]



  • Hatenaブックマークに追加
  • livedoorクリップに追加
  • del.icio.usに追加
  • FC2ブックマークに追加

最終更新時間：2013年05月12日 00時03分24秒





Menu

　　・jEdit Wiki

Ｈｅｌｐ

　　・プラグイン
　　・プラグインヘルプ
　　・質問、ご意見等はこちら

カテゴリ一覧

　　・全記事


検索

キーワード



更新履歴

2024/9/27

2024/8/18

2024/8/16

2024/8/10

2024/8/2

Powered by FreeStyleWiki3.6.5 with Perl5.016003