TAGS: 特徴 | ウィジェット | jQuery | JavaScript | メニュー | スライドショー | MIT
製品などを説明する際、いかに限られたスペースで製品特徴などを印象的に説明するには、なかなか苦労します。
Feature Listは、HTML/CSSで書かれたコンテンツをかっこうよく表示することができます。

表示イメージ:


デモ

ライセンス:MIT License

機能・特徴


◇ jQueryベース プラグイン
◇ 軽量、わずか2KB
◇ HTML/CSSによるスキン定義
◇ タブ・メニュー・自動再生のスライドショー形式 表示
※デモ見れば分かりやすいと思います。

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>


JavaScript定義例
$.featureList(
    $("#tabs li a"),
    $("#output li"), {
        start_item : 1
    }
);
 
// Alternative
 
$('#tabs li a').featureList({
    output        : '#output li',
    start_item    : 1
});

.

Sponsored Link


有关作者
Syboos.jp編集長システム設計や開発、保守運営などを行ってます。オープンソース技術に興味があります。

Comments