CSS、javascriptで実現するタブインターフェイス集「30 CSS and Javascript Tabs Solutions」
TOP > WebDesign > CSS、javascriptで実現するタブインターフェイス集「30 CSS and Javascript Tabs Solutions」 数多くの情報をまとめて、限り有るスペースを有効活用することができるタブインターフェイス、情報量の多いサイトで主に利用されていますが、今回紹介するのはCSS、javascriptで実現するタブインターフェイスを集めたエントリー「30 CSS and Javascript Tabs Solutions」です。 Sweet Tabbed Navigation Bar using CSS3 デザイン的に凝ったものから、jQueryやCSS3を使って印象的に見せるものまで、様々なタブインターフェイスが紹介されています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Sweet
CSS3-Only Tabbed Area | CSS-Tricks
When you think of “tabs”, your mind might go right to JavaScript. Watch for a click on a tab, hide all the panels, show the one corresponding to tab just clicked on. All major JavaScript libraries tackle tabs in some way. But there is a way to accomplish this same idea with “pure CSS”. Just as we did with the CSS Image Switcher, let’s tackle this traditionally JavaScript project with only CSS. Tab
JavaScriptで設置できるタブメニューをたくさん紹介(2010.1)
※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。
Dynamic tabs using jQuery – why and how to create it : Janko Jovanovic
This tutorial will show you how to use jQuery to create tabs that can be added and removed dynamically. Although the example looks bulletproof, there are some questions I will raise about how to use tabs and in which context should they be used in order to make them meaningful and usable. View demo When we talk about tabs on web we usually think about tabs used for navigation. However, in this cas
とてもシンプルなjQueryのタブコンテンツ – creamu
シンプルなタブ切り替えコンテンツを作りたい。そんなときにおすすめなのが、『Simple jQuery tabs』。とてもシンプルなjQueryのタブコンテンツです。 activeクラスをJavaScriptでaddしたり、removeしたりしているようですね。HTMLも含めて、コードがとてもシンプルになっています。 デモは以下から。 demo ロゴにイラストが使われていてなかなか素敵なブログなので、一度見てみてください。 Simple jQuery tabs 今日から前職で一緒だったフォトグラファー、鞆岡（トモオカ）さんの写真展が開催されています。場所は表参道ヒルズにて。 鞆岡隆史「花木」写真展 花や木のとても綺麗な写真を撮る方です。「写真をうまく撮るにはどうしたらいいですか？」と聞いたら、「教えることはない」ということを教えてくれたトモオカさん。いろいろ質問しても、「そうじゃない」「そう
jQueryでタブパネルを作るチュートリアル (1/3)
「タブパネル」はタブ（見出し）をクリックすると、パネル（タブの内容が書かれた部分）が切り替わるUIです。アコーディオンパネル（関連記事）と同じく、情報量に対して表示スペースが少ない場合に使われます。Yahoo!やlivedoorなどの大手ポータルサイトがトップページで採用していることもあり、現在では多くのユーザーが迷わず操作できるUIとして定着しています。 基本のタブパネルの作り方 タブパネルのHTML／XHTML（以下、HTML）は、タブ部分（見出し）とパネル部分（表示する中身）をul/li要素を使って別々にマークアップし、タブのul要素には「tab」、パネルのul要素には「panel」というclass名を付けます。 パネル部分は、タブが選択されたときに表示する内容をli要素で1つずつ記述していき（1タブ項目＝1つのli要素）、それぞれに「tab1」「tab2」……といった連番のid名を
タブ UI 生成プラグイン exTAB.js を機能拡張しました - Cyokodog :: Diary
exTAB.js は、見出し要素ベースなタブ UI を生成する jQuery プラグインです。 前回のエントリ（アウトラインの付いたタブ UI の CSS の記述方法を調べてみた - Cyokodog::Diary）で調べたタブデザインを簡単に適用できるようにした他、以下のような機能拡張を行いました。 実行方法の簡素化 パラメータによる各種スタイルの設定 見出し要素(h1 - h6)以外にも、DL、UL、任意の要素でタブ UI の生成が可能 Ajax によるパネル内コンテンツの取得と表示 実行方法の簡素化 以前の仕様では、「タブ化する要素」「タブの挿入先基準位置をもつ要素」の２つを指定する必要がありましたが、「タブ化する要素」のみの指定で動作するようにしました。タブの挿入先はデフォルトではパネル要素の上になります。 $('h3').exTAB(); パラメータを指定することで任意の場所にタ
サイドバーにぴったり！jQueryを使ったタブメニュー
サイドバーに設置すれば便利そうなサブメニューを紹介します。オンマウスでタブがスムーズに切り替わります。 html内のJavaScriptの以下の部分で、赤字の数字を変更することでタブが入れ替わるスピードを変更できます。数値が大きくなるとスピードはゆっくりになります。 $('.item').mouseover(function () { //scroll the lava to current item position $('.lava').stop().animate({left:$(this).position()['left']}, {duration:200}); //scroll the panel to the correct content $('.panel').stop().animate({left:$(this).position()['left'] * (-2)},
Mozilla Re-Mix: 超軽量なFirefoxタブコントロールアドオン「Tabberwocky」
多くのFirefoxユーザーから絶大な支持を集めるタブコントロールアドオン「Tab Mix Plus」は、利用者にとっては無くてはならないアドオンの一つです。 しかし、多機能故に重量感を感じている方や、多くの機能の中でもほんの一部の機能しかセッティングしていないというユーザーもいらっしゃるでしょう。 また、そのような方の中には、「Tab Mix Plus」に含まれている機能の中から個別に欲しい機能だけを他のアドオンのインストールによりTab MIx なしの環境を実現されている方もいらっしゃると思います。 しかし、そのような方法をとっても、複数のアドオンをインストールする必要もありますし、なにより管理が面倒にもなりますね。 このように、「Tab Mix Plus」ほどの機能は必要無いが、ある程度のカスタマイズ機能は欲しいという方にピッタリなFirefoxアドオンが「Tabberwocky」で
タブUI詳解
タブUIの構造や特長、設置の判断、ユーザビリティ、アクセシビリティ、実装のポイントや機能の拡張方法、実装例やスクリプト例をSmashing Magazineから紹介します。 Module Tabs in Web Design 以下、その意訳です。 ※原文では「タブモジュール」となっていますが、タブモジュールやタブUIと記載すると煩雑になるため、「タブ」と略します。 タブのみを指す場合は、「タブ コントロール」としています。 はじめに 1. タブの構造 2. タブはいつ使用するのか 3. タブのユーザビリティとベストプラクティス 4. タブのアクセシビリティ 5. タブの拡張 6. タブの実装集 7. タブを実装するためのチュートリアル集 8. タブを実装するスクリプト集 はじめに タブモジュールは複数のコンテンツを異なるパネルに配置したユーザインターフェースのデザインパターンです。 パネル
見出し要素ベースなタブＵＩを生成する jQuery.exTAB.js - Cyokodog :: Diary
更新履歴 2009-11-20 リファレンスサイト(GAE)変更中のため只今参照できません。機能拡張版の下記エントリをご覧ください。 タブ UI 生成プラグイン exTAB.js を機能拡張しました - Cyokodog::Diary 見出し要素より目次を自動生成する jQuery プラグイン jQuery.exTOC.js がこちらのサイトで紹介されてました。 ユニバーサル・ウェブ 誰もが使いやすい，標準準拠のウェブを簡単に構築する方法 サンプルページ サンプルページのソースを確認すると jQuery UI Tabs が併用されてるため、h2 要素とその対象コンテンツが div 要素でグルーピングされていました。 <h1>ページタイトル</h1> <div id="tab-1"> <h2>セクション１のタイトル</h2> <p>内容</p> </div> <div id="tab-2">
タブで切り替わるインターフェースの決定版 – creamu
In The WoodsのCoda Slider and More With jQuery Toolsという記事で、jQuery Toolsで実装したCodaのスライダーのようなインターフェースが紹介されています。 デモは以下から。 » View the Example 超クールなので、タブメニューのインターフェースとしてかなり参考になるかと。 シンプルにフェードイン&アウト、ツールチップつき、Codaのように左右にスライドといったパターンがあります。 ぜひ見てみてください。 » Coda Slider and More With jQuery Tools iPhoneのイヤホンが壊れたのでApple Storeで交換の予約をしてきたぞ。早く新しいのほしいなーーー。
わずか2KBで直感的に使えるタブインタフェース実装用jQueryプラグイン「idTabs」:phpspot開発日誌
idTabs わずか2KBで直感的に使えるタブインタフェース実装用jQueryプラグイン「idTabs」 以下のようなHTMLを簡単にタブ化できるみたいです <ul class="idTabs"> <li><a href="#aaa">Tab 1</a></li> <li><a href="#bbb">Tab 2</a></li> </ul> <div id="aaa">This is tab 1</div> <div id="bbb">This is tab 2</div> UL要素の中にリストを定義してあるのがタブ部分で、<div>部分が該当ページ部分です。 1ページ内に全部のデータを収めることも出来るところもいいですね。 関連エントリ タブ機能付きパーソナライズドホームページ『Netvibes』 多数のタブをグループ化して管理できる「TooManyTabs」
jQueryでタブメニューを作る（プラグインなし）
twitter facebook hatena google pocket JavaScriptライブラリのjQueryには数多くのプラグインがあり、それを利用することで簡単にリッチなコンテンツを作成できます。 今回はその流れに逆らい、プラグインなしでタブメニューを作成してみたいと思います。 via：Tabbed Structure sponsors 使用方法 まずは、jQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script> $(function(){ $("a.tab").click(function () { //class="tab"のaタグがクリックされたとき $(".active").removeClass("active"); //cla
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Index of /dev-builds
[JS]アクティブなタブとパネルの境界線を無くすチュートリアル
http://tutorialblog.org/10-javascript-ajax-tabs/
jQuery UI Tabs - Vertical Tabs functionality
http://www.hieu.co.uk/blog/index.php/tabswitch/
[JS]jQueryで実装するアクセシブルでフレキシブルなタブ