jQuery 1.4の新機能8選＋Tabsプラグインでタブ表示
本稿ではまず、そのいくつかを紹介しましょう。 すぐにjQuery 1.4.1がリリース！ CDNも対応 また、jQuery 1.4記念キャンペーン中にバグ修正版のjQuery 1.4.1がリリースされました。その後、jQuery 1.4.1のリリースに伴い、グーグルとマイクロソフトからCDN（Content Delivery Network、詳細は連載第1回「jQuery、プラグイン、jQuery UI、Web経由のCDNとは」を参照）もリリースされています。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/jQuery/jquer
タブUI詳解
タブUIの構造や特長、設置の判断、ユーザビリティ、アクセシビリティ、実装のポイントや機能の拡張方法、実装例やスクリプト例をSmashing Magazineから紹介します。 Module Tabs in Web Design 以下、その意訳です。 ※原文では「タブモジュール」となっていますが、タブモジュールやタブUIと記載すると煩雑になるため、「タブ」と略します。 タブのみを指す場合は、「タブ コントロール」としています。 はじめに 1. タブの構造 2. タブはいつ使用するのか 3. タブのユーザビリティとベストプラクティス 4. タブのアクセシビリティ 5. タブの拡張 6. タブの実装集 7. タブを実装するためのチュートリアル集 8. タブを実装するスクリプト集 はじめに タブモジュールは複数のコンテンツを異なるパネルに配置したユーザインターフェースのデザインパターンです。 パネル
CSSだけのドロップダウンメニュージェネレーターSuckerfish ： css, design, generator | メモリークラフト
ドロップダウンを生成してくれるソリューションにもいろいろな方法があるようで、大半はスクリプトを伴うものが多いようです。 ここではCSSだけを生成するオンラインのドロップダウンメニューのジェネレーターをメモします。 Suckerfish Multi-level menu CSS generator http://pixopoint.com/suckerfish_css/ 手順は以下の通り 画面上部のバーがプレビュー（デフォルトは赤いバー）最初のボックスでテンプレートを決めてメイン階層とサブ階層のメニューのスタイルを決定する最初のボックスの「Submit Design」ボタンをクリック一番下のボックスにCSSが出力される 対応するHTMLの構造は以下のような感じでリストをネストします。 <ul id="suckerfishnav"> <li><a href="http://pixopo
[JS]わずか1.3KBの軽量で、快適に動作するアコーディオンのスクリプト | コリス
Leigeberのエントリーから、以前紹介した「軽量でシンプルなアコーディオンのスクリプト」より更に軽量（1.3KB）になったアコーディオンのスクリプトを紹介します。 Animated JavaScript Accordion V2 demo Accordion V2はjQueryやPrototypeなどの他のスクリプトに依存することなく、単独で動作するスクリプトで、対応ブラウザはIE6, 7, 8, Fx2, 3, Op, Safari, Chromeとなっています。 ※Op9.6.0, Safari3.1.2 for Winで正常に動作しました。 仕様自体に大きな変更はなく、アコーディオンの開閉のタイミングやスピードを調整することができます。 アコーディオンの各項目はdl要素となっており、CSSオフ時やスクリプトオフ時にも情報入手の差し支えないように表示されます。
デザイン性に優れたCSSメニュー集:phpspot開発日誌
Hidden Pixels - Ultimate CSS Menus デザイン性に優れたCSSメニュー集。 これは、と思うようなかっこいいＣＳＳメニューが特集されていました。 Professional drop-down Professional dropline Space Drop Down Menu Flyout hybrid menu Professional drop-down - shadow menu Brooke Case Drop Down Tech Radar mouseover tabs つい押したくなるようなメニューですね。 参考にクールなメニューを作ってみましょう。 関連エントリ クールなナビゲーションメニューを作成するCSS＆HTMLサンプル アニメーションするドロップダウンメニュー作成ＪＳ「Sliding JavaScript Dropdown Menu」 J
タブ式のスライドウィジェットを簡単作成できるjS「jFlow」:phpspot開発日誌
jFlow 1.2 - The Ultra-lightweight Fluid Content Slider for jQuery | Keansphere jFlow is a widget to make your content slides. タブ式のスライドウィジェットを簡単作成できるjS「jFlow」 単なるタブＵＩではなく、ページの切り替えにスライドアニメーション機能を加えたというもの。 デモはかっこうわるいプレーンな感じですが、CSSでデザインすれば使えそうです。 利用にはjQueryが必要。 関連エントリ JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」 jQueryでクールにアニメーションするメニューを実装するチュートリアル
[JS]入れ子の階層に対応した、多段型ナビゲーションのスクリプト集
Dynamic Driveのエントリーから、入れ子の階層に対応した多段型ナビゲーションのスクリプトを紹介します。
Extばりのリッチなタブ等のＵＩを実現「dhtmlxTabbar」:phpspot開発日誌
dhtmlxTabbar - AJAX powered DHTML JavaScript Tabbar component with rich API dhtmlxTabbar is a JavaScript tabbar control for creating dynamic tabbed-navigation interface. リッチなタブＵＩを実現「dhtmlxTabbar」。 次のような、縦横にタブを付けられるJSライブラリの紹介です。 見た目がクールなので、デザインが気になる人も、そのまま使ってもよさそうです。 タブ以外にも同じシリーズで多数のUIコンポーネント公開されているみたい dhtmlxTree dhtmlxGrid dhtmlxTreeGrid dhtmlxMenu dhtmlxCalendar dhtmlxColorPicker dhtmlxSlider dht
50超のCSSやJavaScriptで実装するタブ型ナビゲーション集
HONGKIAT.COMのエントリー「50超のCSSやJavaScriptで実装するタブ型ナビゲーション集」から、当サイトで紹介したことのないものをいくつか紹介します。 50+ Nice Clean CSS Tab-Based Navigation Scripts
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSとjQueryで実装するタブコンテンツ – creamu
[CSS]スクリプト無しで実装する、快適に動作する多段ドロップダウンメニュー | コリス
[CSS]フォーム要素に半透明のナビゲーションを重ねるスタイルシート
超クールなタブインタフェースをjQueryで作成するチュートリアル:phpspot開発日誌
navigation