2013.06.14
javascript

タブで切り替え 超軽量プラグイン jQuery

タブのようなメニューでクリックするとページを移動せずに表示を切り替えるようにするjQueryのプラグインを紹介します。

以前プラグインを使用しない方法についても、こちらに書きました。

今回紹介するTiny CarouselというjQueryのプラグインは、かなり軽いプラグインで、設定も簡単なのでおススメです。


このプラグインは写真などのスライドショーで使うのがメインのようですが、タブで表示切り替えする方法でも使えるので、今回はその方法を使います。

タブ 表示切り替え 超軽量 jQueryプラグイン

javascriptソース

   $(function(){
     $('#slider').tinycarousel({ controls: false, pager: true, animation: false });	
   });

上記のjavascriptのソースはhead内か、bodyタグのすぐ下に記述。

HTMLソース

<div id="slider">
   <ul class="pager">
       <li><a href='#' class="pagenum active" rel="0">ホーム</a></li>
       <li><a href='#' class="pagenum" rel="1">画像</a></li>
       <li><a href='#' class="pagenum" rel="2">リンク</a></li>
       <li><a href='#' class="pagenum" rel="3">入力</a></li>
       <li><a href='#' class="pagenum" rel="4">テーブル</a></li>
   </ul>                           
   <div class="viewport">
       <ul class="overview">
          <li class="page">
           ここに内容が入る         
          </li>
      <li class="page">
           ここに内容が入る          
          </li>
      <li class="page">
           ここに内容が入る         
          </li>
      <li class="page">
           ここに内容が入る         
          </li>
       </ul>
   </div>
</div>
HTMLの説明
  • 2行目~8行目
  • タブとなる部分です。
    一番始めから順番にrel=”0″、rel=”1″と記述します。記述しないと動きませんので注意!
    また、クラス名のpager、pagenum、activeはプラグインと連携しているので変更せずにそのまま使用します。

  • 9行目~24行目
  • タブをクリックしたときに切り替わる表示部分です。
    HTMLの「ここに内容が入る」という部分に、表示される内容を記述します。
    クラス名、viewport、overviewはプラグインと連携しているので変更せずにそのまま使用します。

CSSソース

ul{
  margin:0;
  padding:0;
}

#slider { 
  height: 1%; 
  overflow:hidden; 
  display: block; 
  padding: 0 0 10px 0; 
  margin: 0;
}
.viewport { 
  width: 500px; 
  height: 380px; 
  overflow: hidden; 
  position: relative; 
}
.pager { 
  overflow:hidden; 
  height: 1%; 
  list-style: none; 
  clear: both; 
  margin: 0 0 10px; 
}
.pager li { 
 float: left; 
 width:100px;
}
.pagenum { 
  background-color: #555555; 
  text-decoration: none; 
  text-align: center; 
  padding: 5px; 
  color: #fff; 
  font-size: 14px; 
  font-weight: bold; 
  display: block; 
}
.active { 
  color: #555555; 
  background-color:  #dcdcdc; 
}
.overview { 
  list-style: none; 
  position: absolute; 
  width: 500px; 
  left:0; 
  top: 0; 
}
.overview .page{ 
  float: left; 
  padding: 5px; 
  height: 350px; 
  border: 2px solid #dcdcdc; 
  width: 486px;
}
CSSの説明

上記で使われている全てのクラス名(.viewportなど)はこのプラグインでは必須ですので変更せずに、widthなどのプロパティやそれらの値でデザインを調整してください。
独自のクラス名を追加する分にはOKです。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP