jQueryを使ったタブメニュー　

2010/09/07 2020/10/11

【パソコン】【パソコン】［jQuery］ 0 0

タブメニュー

エントリ記事が長くなるのでタブで整理する方法にトライ

［目標］タブの組み合わせ
　・関連記事紹介－関連商品紹介　［H22.09.10.設置完了］
　・コメント投稿欄－コメント一覧　［H22.09.09.設置完了］
　・トラックバックＵＲＬ－トラックバック一覧　［H22.09.07.設置完了］
　３つのタブに纏める｡
［後記］
　・関連記事紹介は､「関連記事」と「関連情報」に細分
　・関連商品紹介は､「関連DVD」と「関連書籍」に細分

使用するのは「jQuery UI タブ」（ここでも jQuery が活躍）
参考サイト：長いページをタブで整理する。ぴったりのjQueryプラグインを探してみた
jQueryやjQuery UIを用いたタブメニューの作成方法

ファイルのダウンロード先：jQuery Ul

□ 必要なファイルはこちらで紹介されています｡
　　参考サイト：長～いページもスッキリ！jQueryでタブ表示
　　　　　　　　　ウェブデザイン工房Wanonz jQuery ui tab

□ 様式をテーマのまま使用する場合は､GoogleのCSSホスティングを使用する事も可能｡
　　参考サイト：Googleの CDNを使って jQuery UI Tabsを使う例

□ jQueryを使用しない「タブ表示切り替えスクリプト」もあります｡
　　参考サイト：タブ表示切り替えスクリプト

今回は「フェードアウト/フェードインエフェクト」を使用
参考サイト：jQueryを使ったタブメニューの実装サンプルまとめ

FC2で導入時の注意点
（１）ファイル名の変更
　　「.」が入ったファイルは FC2 にUP 出来ないのでファイル名を変更する
（２）使用する画像の参照パスを変更する
　　CSSファイルで参照しているパスを変更してからUPする

［懸案］ ここからは管理人の場合...
（３）エリア内の項目ごとしか纏められない
　　　例）コメントエリアとかトラックバックエリアとか
（４）他の jQuery ファイルと干渉
　　　「ページ内をスムーズにスクロール」するで採用した
　　　jquery.page-scroller-306.js（圧縮して使用）が影響し
　　　タブをクリックするとトップに戻ってしまう現象が発生｡
　　　~~タブ使用を優先し､スクロール機能を解除した｡~~ JSファイルの順序を変更し対応

現在の処､コメント・トラックバックのみでの導入だが､次回は､
関連記事・関連商品部にも~~導入しようと思う｡~~ 導入完了｡

【スポンサーリンク】

【パソコン】［jQuery］

関連記事