jQueryで至極シンプルなタブ機能を実装する「jQuery.simpleTab」つくってみました。
- 投稿日時
- 2008/12/09 0:01
- カテゴリー
- javascript
- タグ
- 記事のURL
- http://tshinobu.com/blog/archives/59
- ブックマーク
-
http://tshinobu.com/lab/jQuery.simpleTab/
タブ機能が仕事で必要になりそうだったのですが、ライブラリを探すのも手間なので、10分くらいで作ってみました。
僕がこだわった点というか、こいつのウリは、タブナビゲーションをタブの数だけ配置するところです。
タブナビゲーション
タブ内容
タブナビゲーション
タブ内容
タブナビゲーション
タブ内容…
タブ内容
タブナビゲーション
タブ内容
タブナビゲーション
タブ内容…
こういう感じで動くように実装しています。
スタイルシート切ってみていただければお分かりいただけるかと！
ほかのほとんどのタブ実装系ライブラリって、１ページにタブエリアがひとつだけしかないと思うんです。
タブ画像のアクティブ表示や、タブ画像の文言変更などは、画像やCSSで制御しなくちゃならない。
あとタブエリアの下にすぐコンテンツが入るようなビジュアルだと、
JS切ったときにタブが各セクションごとに無いとすごくぶさいく。
この点ケアしたライブラリはあるのかもしれないけど、僕が見つけられなくてこういう不満があって、じゃあ作っちゃえって思って作ってみました。また外部ファイル化とかしますがとりあえず公開してみます。誰かのハートに響くと嬉しいなあ。
