製品の特徴についてカッコよく表示できるjQueryプラグイン「Feature List」
2009年12月14日-
スポンサード リンク
製品の特徴についてカッコよく表示できるjQueryプラグイン「Feature List」。
次のような、製品の紹介なんかでどこかで見たようなUIパーツを簡単に実装できるみたいです。


実装方法
最初はちょっと難しいような気もするのですが、実はかなり簡単で次のように<div>以下に2つのulを置いておきます
<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>
で、次のように初期化するだけです。
$.featureList(
$("#tabs li a"),
$("#output li"), {
start_item : 1
}
);
さすがのjQueryですね。
ほうっておいても自動でスライドします。
以下のエントリを参照してください。
jQueryGlobe | jQuery Plugin - Feature List
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 2012年2月10日 管理人のブックマーク
- ブラウザ上でPDFを表示するJSライブラリ「PDF.js」
- 次世代の検索フォームを作成するjQuery&CSS3サンプル
- 2012年2月9日 管理人のブックマーク
- faviconを書き換えてfacebookの通知っぽくしてくれるfaviconアラート実装ライブラリ「Tinycon」
- ページめくりを実現するためのjQueryプラグイン集
- 2012年2月8日 管理人のブックマーク
- HTMLをアップするとCSSのスケルトンを自動生成してくれる「bearcss」
- HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」
- 2012年2月7日 管理人のブックマーク
- 過去のエントリ



















間違いの指摘をしていただける方はメール、あるいはTwitterでお願いします(クリック)




