- Home
- XHTML CSS ガイドライン Beta
- ウィジェット
ウィジェット
- 作成日 :
- 更新日 :
ドロップダウン
仕様
アコーディオン
Click me!
なぜデザインが必要なのか――世界を変えるイノベーションの最前線
コミュニティを生み出す劇場、泥をエネルギー源とするランプ、落ち葉と水だけで作られる食器、赤ちゃんの命を守るモニター、携帯電話を使った遠隔医療、空気をきれいにする建築資材……世界をより良いものにするための「デザイン」の数々。
仕様
HTML の .accordion と .trigger は必須。 .trigger の次の要素はページ読み込みと同時に非表示に切り替わる。
.accordion 内の .trigger をクリックすると、 .trigger の次の要素の表示非表示が切り替わる。
タブバー
仕様
HTML の .tab-nav と .tab-source は必須。
HTML の .tab-nav と .tab-source を内包する要素の id を指定して実行。
フローティングウィンドウ
Window 1
text text text text text text text text text text
Window 2
text text text text text text text text text text
イメージギャラリー
| target : String | イメージ切替を行う要素 |
|---|---|
| autoplay : Bool | 自動で画像の切替を行うか |
| interval : Number | 自動で画像の切替を行う間隔 |
| transition : String | 画像切替のトランジション |
カルーセル
ツールチップ
仕様
この文字自体がデモになっています。マウスを乗せるとツールチップが表示。
ツールチップを表示したい a 要素の上位要素の @class を引数に渡して実行。
a@title の値か *@class="tooltip" の要素が表示。
- Tooltip Test
- ドキュメント内の要素をツールチップにできます。
@class="tooltip" はターゲットの a 要素の親要素と同じ階層にある必要がある。
- ツールチップテスト
- ツールチップディスクリプションテスト
ドラッグ & ドロップ
ドラッグドロップ制限なし
ドラッグドロップできるエリアを制限
仕様
.obj は必須。第一引数に .obj を内包する要素の id を指定して実行。
第二引数、第三引数共に指定しない時は値の有無は任意。
第三引数が true の場合 @id:drop-area にドラッグオブジェクトが入ったら input @id:dropped の @value にドラッグオブジェクトの @data-value の値が入る
| 引数 (Bool) | 効果 |
|---|---|
| 第二引数 | ドラッグエリアを制限 |
| 第三引数 | ドリップエリアを指定 |
デイトピッカー
日付入力をカレンダーで補助。
日付入力 : 例）2011年05月10日
仕様
jQuery Date Input: Jon Leighton MIT license
オーバーレイ
仕様
Fancybox MIT and GPL licenses: