jQueryUIをはじめる方は必見、超簡単サンプル集~その1~

この記事は2013年7月22日に書かれたものです。内容が古い可能性がありますのでご注意ください。


次に「Selectable」です。
sample4.html「Selectable」

<html>
<head>
  <meta charset="utf-8" />
  <link   type="text/css" rel="stylesheet" src="./jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.min.css">
  <script type="text/javascript" src="./jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="./jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
  <script>$(function() { $("#selectable").selectable(); });</script>
  <style>
    #selectable .ui-selecting{background: #FFAAAA;}
    #selectable .ui-selected{background: #FFCCCC;}
  </style>
</head>
<body>
<ol id="selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
</ol>
</body>
</html>

クリックした項目がピンク色になればOKです。複数選択も可能です。

最後に「Sortable」です。
先ほどのsample4.htmlのolタグのid名とscriptの「selectable」を「sortable」に変更します。
sample5.html「Sortable」

<html>
<head>
  <meta charset="utf-8" />
  <link   type="text/css" rel="stylesheet" src="./jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.min.css">
  <script type="text/javascript" src="./jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="./jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
  <script>$(function() { $("#sortable").sortable(); });</script>
  <style>
    #selectable .ui-selecting{background: #FFAAAA;}
    #selectable .ui-selected{background: #FFCCCC;}
  </style>
</head>
<body>
<ol id="sortable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
</ol>
</body>
</html>

各項目をドラッグすることで並び順を変更することができればOKです。

4.まとめ

ここまで、インタラクティブ関連のサンプルスクリプトを実装してみました。
いかがだったでしょうか?CSS等を極力省略し、シンプルなサンプルを作成しました。
次回はウィジェット関連のサンプルを作成していこうと思います。

5.参考ページ

jQueryUI公式サイト:http://jqueryui.com/
Wikipedia(jQueryUI):http://ja.wikipedia.org/wiki/JQuery_UI

ページ:
1 2

3

  • このエントリーをはてなブックマークに追加

PAGE TOP