Touch-Tabs-jQueryは、イベント設定やカスタマイズが可能な拡張性の高いタブシステムを実装することができます。PCでのドラッグ操作やスマホでのタッチ操作から、タブの順番を入れ替えるといったことも可能です。
Touch-Tabs-jQuery
以下のページから、Touch-Tabs-jQueryの実際のデモ動作を確認することができます。
デモページでは、4つのタブ項目を備えたタブパネルが表示されています。上部にあるタブをクリックしたりタップしたりすることで、そのタブに応じたコンテンツがパネル内に表示されます。
また、PCからはドラッグ操作で、モバイル端末からはタッチ操作でタブの順番を入れ替えることもできます。
選択中のタブは非選択タブとは異なるカラーになるので、現在どのタブが選ばれているのかを瞬時に把握できます。デザイン・レイアウトともにシンプルで操作性もよく、サクサクとタブを切り替えることが可能です。
また、イベントにはtabcreate、tabactivate、tabcloseといったものが用意されています。tabcreateはタブが作成された時、tabactivateはタブクリックでアクティブになった時もしくは現在アクティブなタブを閉じることでアクティブになった時、tabcloseはJavaScriptまたはユーザーがクローズボタンをクリックした時に、イベントがトリガーされます。
というわけで、イベントやカスタマイズ性に優れた拡張性の高いタブシステムを実装したい人は、ぜひ「Touch-Tabs-jQuery」を活用されてみてはいかがでしょうか? Touch-Tabs-jQueryの詳細やダウンロードは、以下のページからどうぞ。