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)},
見出し要素ベースなタブＵＩを生成する 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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.hieu.co.uk/blog/index.php/tabswitch/
[JS]jQueryで実装するアクセシブルでフレキシブルなタブ
http://www.lousyllama.com/sandbox/jquery-autotab