ToolKit[Titon]を利用した
Buttonのサンプルプログラムです。
ToolKit[Titon]については
下記サイトを参照してください。
参照URL①:Toolkit – Project Titon
参照URL②:Bootstrapのように多数のコンポーネントが詰まったUIツールキット「Titon Toolkit」:phpspot開発日誌
デモサイト:Button – 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部(サンプル①)
<button class="button" type="button">Button</button> <input class="button" type="button" value="Input - Button"> <input class="button" type="submit" value="Input - Submit">
HTML body部(サンプル②)
<button class="button small" type="button">Small Button</button> <button class="button" type="button">Default Button</button> <button class="button large" type="button">Large Button</button>
HTML body部(サンプル③)
<a class="button is-disabled" href="javascript:void(0);">Disabled Anchor</a> <button class="button" type="button" disabled="disabled">Disabled Button</button> <button class="button is-active" type="button">Active Button</button>
HTML body部(サンプル④)
<button class="button" type="button">Default Button</button> <button class="button is-active" type="button">Active Button</button> <button class="button is-info" type="button">Info Button</button> <button class="button is-success" type="button">Success Button</button> <button class="button is-warning" type="button">Warning Button</button> <button class="button is-error" type="button">Error Button</button>
解説
Buttonのみの機能を使う場合は
ファイル[toolkit.js]は
必要無いですので
ファイル[toolkit.css]及び
ファイル[ui.css]のみを
読み込んでいます。
※ToolKit[Titon]のライセンスは[BSD]です。