« CSSとjQuery利用したスライドショー | トップページ | blogの更新をしばらくおやすみします。 »

2011年3月14日 (月)

簡単にスライドするリストが作れるjQueryのプラグイン

スライドするリストが作れるjQueryのプラグイン「Feature List」をご紹介いたします。
デモページ

使用するリソース
jquery.js
jquery.featureList-1.0.0.js

head要素への記入
<script language="javascript" type="text/javascript" src="フォルダ名/jquery.js"></script>
<script language="javascript" type="text/javascript" src="フォルダ名/jquery.featureList-1.0.0.js"></script>
<script language="javascript">
 $(document).ready(function() {
 $.featureList(
 $("#tabs li a"),
 $("#output li"), {
  start_item:1
 }
 );
</script>

htmlへの記述方法(例)
<div id="feature_list">
 <ul id="tabs">
  <li> <a href="javascript:;"> <img src="services.png">
  <h3>Services</h3>
  <span>Lorem ipsum dolor sit amet consect</span> </a> </li>
  <li> <a href="javascript:;"> <img src="programming.png">
  <h3>Programming</h3>
  <span>Lorem ipsum dolor sit amet consect</span> </a> </li>
  <li> <a href="javascript:;"> <img src="applications.png">
  <h3>Applications</h3>
  <span>Lorem ipsum dolor sit amet consect</span> </a> </li>
 </ul>
 <ul id="output">
  <li> <img src="sample1.jpg"> <a href="#">See project details</a> </li>
  <li> <img src="sample2.jpg"> <a href="#">See project details</a> </li>
  <li> <img src="sample3.jpg"> <a href="#">See project details</a> </li>
 </ul>
</div>

スライドさせたいリストのid名を「output」と設定します。

以上で設定は終わりです。

|

« CSSとjQuery利用したスライドショー | トップページ | blogの更新をしばらくおやすみします。 »

jQuery」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/39190185

この記事へのトラックバック一覧です: 簡単にスライドするリストが作れるjQueryのプラグイン:

« CSSとjQuery利用したスライドショー | トップページ | blogの更新をしばらくおやすみします。 »