トップ 一覧 置換 検索 ヘルプ 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
{{code HTML,
th, td {
	font:12px/1.22 "Osaka", "MS Pゴシック", 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,
<!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

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

{{code HTML,
<!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>
}}

{{category2 プログラミング言語,JavaScirpt}}