[B! plugin][Tab] keijixのブックマーク

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 usa ble. View demo When we talk about tabs on web we usually think about tabs used for navigation. However, in this cas

keijix 2010/02/01

リンク

とてもシンプルなjQueryのタブコンテンツ – creamu

シンプルなタブ切り替えコンテンツを作りたい。そんなときにおすすめなのが、『Simple jQuery tabs』。とてもシンプルなjQueryのタブコンテンツです。 activeクラスをJavaScriptでaddしたり、removeしたりしているようですね。HTMLも含めて、コードがとてもシンプルになっています。デモは以下から。 demo ロゴにイラストが使われていてなかなか素敵なブログなので、一度見てみてください。 Simple jQuery tabs 今日から前職で一緒だったフォトグラファー、鞆岡（トモオカ）さんの写真展が開催されています。場所は表参道ヒルズにて。鞆岡隆史「花木」写真展花や木のとても綺麗な写真を撮る方です。「写真をうまく撮るにはどうしたらいいですか？」と聞いたら、「教えることはない」ということを教えてくれたトモオカさん。いろいろ質問しても、「そうじゃない」「そう

keijix 2009/12/12

リンク

タブ UI 生成プラグイン exTAB.js を機能拡張しました - Cyokodog :: Diary

exTAB.js は、見出し要素ベースなタブ UI を生成する jQuery プラグインです。前回のエントリ（アウトラインの付いたタブ UI の CSS の記述方法を調べてみた - Cyokodog::Diary）で調べたタブデザインを簡単に適用できるようにした他、以下のような機能拡張を行いました。実行方法の簡素化パラメータによる各種スタイルの設定見出し要素(h1 - h6)以外にも、DL、UL、任意の要素でタブ UI の生成が可能 Ajax によるパネル内コンテンツの取得と表示実行方法の簡素化以前の仕様では、「タブ化する要素」「タブの挿入先基準位置をもつ要素」の２つを指定する必要がありましたが、「タブ化する要素」のみの指定で動作するようにしました。タブの挿入先はデフォルトではパネル要素の上になります。 $('h3').exTAB(); パラメータを指定することで任意の場所にタ

keijix 2009/10/19

リンク

サイドバーにぴったり！jQueryを使ったタブメニュー

サイドバーに設置すれば便利そうなサブメニューを紹介します。オンマウスでタブがスムーズに切り替わります。 html内のJavaScriptの以下の部分で、赤字の数字を変更することでタブが入れ替わるスピードを変更できます。数値が大きくなるとスピードはゆっくりになります。 $('.it em').mouseover(function () { //scroll the lava to current it em 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)},

keijix 2009/10/19

リンク

見出し要素ベースなタブＵＩを生成する 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">

keijix 2009/09/16

リンク

タブで切り替わるインターフェースの決定版 – 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で交換の予約をしてきたぞ。早く新しいのほしいなーーー。

keijix 2009/06/16

リンク

わずか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」

keijix 2009/04/29