前の記事 ≪:ボタンを綺麗に修飾してくれるライブラリ「sexybuttons」
次の記事 ≫:2009年のCSSサイトデザインベスト

製品の特徴についてカッコよく表示できるjQueryプラグイン「Feature List」

2009年12月14日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法

製品の特徴についてカッコよく表示できる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

関連の記事検索:jQuery, JavaScript, Webデザイン, プラグイン, UI, Web制作
スポンサード リンク

By.KJ : 2009年12月14日 10:00 livedoor Readerで購読 Twitterに投稿

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