|
|
人気順サンプル トップ 500
行数:
|
◆ ドロップダウンメニュー
(#1)
このサンプルは、シンプルなドロップダウンメニューを表示します。トップメニューにマウスを移動するとサブメニューがドロップダウンメニューとして表示されます。
トップメニューに項目を追加したり、ドロップダウンメニューの項目を追加/削除するは<body>セクションを修正するだけで完了します。JavaScript/CSSの外部ファイルSは一切変更する必要がありません。
トップメニューは<li>タグ、ドロップダウンメニューは<div>タグで宣言します。
|
◆ tableのヘッダー/列を固定
(#2)
このサンプルは、表のヘッダーと列（ID、得意先）を固定してデータ部を上下左右にスクロールすることができます。
|
◆ jQuery UIのTabsプラグインを利用したタブ型メニュー
(#3)
このサンプルは、jQueryのUI Tabsのプラグインを利用してタブ型メニューを表示します。
タブの名称はul/li要素で宣言します。タブのコンテンツはdiv要素で宣言します。
|
◆ ポップアップウィンドウ(リサイズ&ドラッグ)
(#4)
このサンプルは、jQueryのinterface()プラグインを利用してポップアップウィンドウを表示します。サンプルの[Open window]をクリックすると緑のポップアップウィンドウが表示されます。ウィンドウの右下をドラッグしてウィンドウをリサイズすることができます。ウィンドウの右上の[-]をクリックすると本文を折りたたみます。[x]をクリックするとウィンドウを閉じます。ウィンドウのヘッダーをドラッグして移動することもできます。
|
◆ disabledプロパティ
(#5)
このサンプルは、[無効]ボタンをクリックするとTextオブジェクトのdisabledプロパティに「true」を設定して使用不可の状態にします。[有効]ボタンをクリックするとdisabledプロパティに「false」を設定して使用可能状態に戻します。
disabledプロパティに「true」を設定すると、IEなら前景色、Firefoxなら背景色がグレーに変わります。
|
◆ jQueryのjdMenuプラグインを利用したドロップダウンメニュー(水平）
(#6)
このサンプルは、jQueryのjdMenu()プラグインを利用してドロップダウン型のメニューを表示します。ここでは、jdMenuを水平方向に表示しています。メニュー項目の右側に「»」が表示されているときはサブメニューがあることを意味します。
|
◆ jQueryのTreeViewプラグインを利用したツリー型のメニュー
(#7)
このサンプルは、jQueryのTreeView()プラグインを利用してツリー型メニューを表示します。[+]をクリックするとノードが展開します。[-]をクリックするとノードを折りたたみます。ノードをクリックするとページを移動します。「Site Map」を展開して「JavaScript + Ajax」のノードをクリックすると当サイトが表示されます。
|
◆ スライドショー
(#8)
このサンプルは、jQueryのslideshow()プラグインを利用してスライドショーを表示します。サンプルが表示されると順番にスライドが表示されます。手動で切り替えるときは、左上の番号[1-4]をクリックします。スライド（イメージ上の）下の両サイドにマウスを移動すると矢印が表示されます。この矢印をクリックして手動で移動することもできます。
|
◆ jQueryのAccordionプラグインを利用したアコーディオンメニュー
(#9)
このサンプルは、jQueryのAccordion()プラグインを利用してアコーディオン型のメニューを表示します。[Title?]をクリックするとサブメニューが展開されます。
|
◆ jQueryのiconDockプラグインを利用したドック型メニュー
(#10)
このサンプルは、jQueryのiconDockプラグインを利用してドック型のメニューを表示します。マウスをイメージに移動するとドッグから飛び出します。マウスを遠ざけるとイメージがドックに戻ります。
|
|