Touch-Tabs-jQuery

JavaScript

イベントやカスタマイズが可能な拡張性の高いタブシステム「Touch-Tabs-jQuery」

Touch-Tabs-jQueryは、イベント設定やカスタマイズが可能な拡張性の高いタブシステムを実装することができます。PCでのドラッグ操作やスマホでのタッチ操作から、タブの順番を入れ替えるといったことも可能です。

Touch-Tabs-jQuery

デモ

デモページでは、4つのタブ項目を備えたタブパネルが表示されています。上部にあるタブをクリックしたりタップしたりすることで、そのタブに応じたコンテンツがパネル内に表示されます。

また、PCからはドラッグ操作で、モバイル端末からはタッチ操作でタブの順番を入れ替えることもできます。

選択中のタブは非選択タブとは異なるカラーになるので、現在どのタブが選ばれているのかを瞬時に把握できます。デザイン・レイアウトともにシンプルで操作性もよく、サクサクとタブを切り替えることが可能です。

また、イベントにはtabcreate、tabactivate、tabcloseといったものが用意されています。tabcreateはタブが作成された時、tabactivateはタブクリックでアクティブになった時もしくは現在アクティブなタブを閉じることでアクティブになった時、tabcloseはJavaScriptまたはユーザーがクローズボタンをクリックした時に、イベントがトリガーされます。

Touch-Tabs-jQuery

no-image依存関係のないタグ付け機能を実装できる「taggle.js」前のページ

テーブルにソート(並べ替え)機能を実装できる「tsorter」次のページtsorter

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのif文を使ってタグやクラス名によって条件分岐するやり方

    jQueryで普通にif文を使った条件分岐のやり方です。指定したタグや…

  2. Effect Ideas for Card Stacks
  3. PgwSlider

    JavaScript

    レスポンシブで軽量なスライダーを実装できるjQueryプラグイン「PgwSlider」

    PgwSliderというjQueryプラグインを使えばレスポンシブで軽…

  4. flubber

    JavaScript

    滑らかなシェイプアニメーションを実装できる「flubber」

    flubberは、滑らかな2Dによるシェイプアニメーションを実装するこ…

  5. no-image

    JavaScript

    円形に広がるメニュー実装「expanding action button」

    expanding action buttonは円形に広がるメニューを…

  6. JavaScript

    サイドからスライド開閉するレスポンシブメニューのjQueryプラグイン「Material Menu」…

    Material Menuはサイドからスライド開閉するレスポンシブ対応…

最近の記事

  1. フィールグッドシャワー
  2. RP-PB055
  3. ESD-EFシリーズ

アーカイブ

PAGE TOP