jQueryを使ったタブメニュー 

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

[目標] タブの組み合わせ
 ・ 関連記事紹介-関連商品紹介 [H22.09.10.設置完了]
 ・ コメント投稿欄-コメント一覧 [H22.09.09.設置完了]
 ・ トラックバックURL-トラックバック一覧 [H22.09.07.設置完了]
 3つのタブに纏める。
[後記]
 ・ 関連記事紹介は、「関連記事」と「関連情報」に細分
 ・ 関連商品紹介は、「関連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で導入時の注意点
(1)ファイル名の変更
  「.」が入ったファイルは FC2 にUP 出来ないのでファイル名を変更する
(2)使用する画像の参照パスを変更する
  CSSファイルで参照しているパスを変更してからUPする

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

現在の処、コメント・トラックバックのみでの導入だが、次回は、
関連記事・関連商品部にも導入しようと思う。 導入完了。
関連記事
  関連商品のご紹介
【スポンサーリンク】

最終更新日時: 2015年06月18日(木)00:14:52
ブログパーツ

Comment 0

There are no comments yet.

Leave a comment