ToolKit[Titon]を利用した
Button Groupのサンプルプログラムです。
ToolKit[Titon]については
下記サイトを参照してください。
参照URL①：Toolkit – Project Titon
参照URL②：Bootstrapのように多数のコンポーネントが詰まったUIツールキット「Titon Toolkit」:phpspot開発日誌
デモサイト：Button Group – 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" /> </head>
HTML body部（サンプル①）
<div class="button-group"> <button class="button" type="button">Default</button> <button class="button" type="button">Button</button> <button class="button" type="button">Group</button> </div>
HTML body部（サンプル②）
<!-- Small ここから --> <div class="button-group small"> <button class="button" type="button">Small</button> <button class="button" type="button">Button</button> <button class="button" type="button">Group</button> </div> <!-- Small ここまで --> <!-- Defalu ここから --> <div class="button-group"> <button class="button" type="button">Default</button> <button class="button" type="button">Button</button> <button class="button" type="button">Group</button> </div> <!-- Defalu ここまで --> <!-- Large ここから --> <div class="button-group large"> <button class="button" type="button">Large</button> <button class="button" type="button">Button</button> <button class="button" type="button">Group</button> </div> <!-- Large ここまで -->
HTML body部（サンプル③）
<ul class="button-group"> <li><button class="button" type="button">Action</button></li> <li> <button class="button js-drop" type="button" data-drop="#menu"><span class="caret-down"></span></button> <ul class="drop drop--down" id="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> </li> </ul>
解説
Button Groupのみの機能を使う場合は
ファイル[toolkit.js]は
必要無いですので
ファイル[toolkit.css]及び
ファイル[ui.css]のみを
読み込んでいます。
ただし、【サンプル③】の
ドロップダウン機能を利用する場合は
ファイル[toolkit.js]も必要になります。
※ToolKit[Titon]のライセンスは[BSD]です。