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. Shorten

    JavaScript

    長いテキストを自動で短縮してくれるjQueryプラグイン「Shorten」

    Shortenは指定した文字数以上の長いテキストを自動的に短縮してくれ…

  2. NO IMAGE

    JavaScript

    フレキシブルで軽量なJavaScriptモーダル実装「Vanilla Modal」

    Vanilla Modalは、フレキシブルでファイル容量も軽量なCSS…

  3. AniX

    JavaScript

    優れたパフォーマンスと互換性を備えたアニメーションライブラリ「AniX」

    AniXは優れたパフォーマンスと互換性を備えた軽量のアニメーションライ…

  4. jQuery Parallax

    JavaScript

    美しいパララックススクロールエフェクトを実装できる「jQuery Parallax」

    jQuery Parallaxは美しいパララックススクロールエフェクト…

  5. no-image

    JavaScript

    固定されたフローティングメニューを実装できる「jquery-dice-menu」

    jquery-dice-menuは、固定されたシンプルなフローティング…

  6. simpler-sidebar

    JavaScript

    シンプルでスタイリッシュなサイドナビゲーション「simpler-sidebar」

    simpler-sidebarは、シンプルでスタイリッシュなサイドナビ…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP