ToolKit[Titon]を利用した
Dropのサンプルプログラムです。
※「ドロップリスト」のことです。
ToolKit[Titon]については
下記サイトを参照してください。
参照URL①：Toolkit – Project Titon
参照URL②：Bootstrapのように多数のコンポーネントが詰まったUIツールキット「Titon Toolkit」:phpspot開発日誌
デモサイト：Drop – Titon Toolkit Demo Site
HTML head部
<head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/toolkit.css" /> <link rel="stylesheet" type="text/css" href="css/ui.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="./js/toolkit.js"></script> </head>
HTML body部（サンプル①）
<div class="button-group"> <button class="button js-drop" type="button" data-drop="#menu1"> ドロップリスト - ダウン <span class="caret-down"></span> </button> <ul class="drop drop--down" id="menu1" data-drop-menu> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー３</a></li> </ul> </div> <div class="button-group"> <button class="button js-drop" type="button" data-drop="#menu2"> ドロップリスト - アップ <span class="caret-down"></span> </button> <ul class="drop drop--up" id="menu2" data-drop-menu> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー３</a></li> </ul> </div> <div class="button-group"> <button class="button js-drop" type="button" data-drop="#menu3"> ドロップリスト - レフト <span class="caret-down"></span> </button> <ul class="drop drop--left" id="menu3" data-drop-menu> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー３</a></li> </ul> </div> <div class="button-group"> <button class="button js-drop" type="button" data-drop="#menu4"> ドロップリスト - ライト <span class="caret-down"></span> </button> <ul class="drop drop--right" id="menu4" data-drop-menu> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー３</a></li> </ul> </div>
HTML body部（サンプル②）
<div class="button-group"> <button class="button js-drop" type="button" data-drop="#menu5"> ドロップリスト - ヘッダー付き <span class="caret-down"></span> </button> <ul class="drop drop--down" id="menu5" data-drop-menu> <li class="drop-heading">カテゴリー１</li> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー３</a></li> <li class="drop-heading">カテゴリー２</li> <li><a href="#">メニュー４</a></li> <li><a href="#">メニュー５</a></li> <li><a href="#">メニュー６</a></li> </ul> </div>
HTML body部（サンプル③）
<div class="button-group"> <button class="button js-drop" type="button" data-drop="#menu6"> ドロップリスト - ライン付き <span class="caret-down"></span> </button> <ul class="drop drop--down" id="menu6" data-drop-menu> <li class="drop-heading">カテゴリー１</li> <li class="drop-divider"></li> <li><a href="#">メニュー１</a></li> <li class="drop-divider"></li> <li><a href="#">メニュー２</a></li> <li class="drop-divider"></li> <li><a href="#">メニュー３</a></li> <li class="drop-divider"></li> <li class="drop-heading">カテゴリー２</li> <li class="drop-divider"></li> <li><a href="#">メニュー４</a></li> <li class="drop-divider"></li> <li><a href="#">メニュー５</a></li> <li class="drop-divider"></li> <li><a href="#">メニュー６</a></li> <li class="drop-divider"></li> </ul> </div>
JavaScript部
<script>
$( document ).ready( function() {
# No.01
$( ".js-drop" ).drop();
});
</script>
解説
Dropの機能を使う場合は
[jQuery]とファイル[toolkit.js]が
必要になりますので[head]部で読み込みます。
また、Dropのデフォルトデザインが
記載されている[ui.css]も読み込んでいます。
# No.01
ドロップリスト化するターゲットに対して
関数[drop]を実行させます。
ドロップリスト化するターゲットは
クラス[js-drop]で設定してあります。
※ToolKit[Titon]のライセンスは[BSD]です。