リストをインクリメント検索・ソートできる「List.js」

List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。
ダウンロードはこちら
リストだけでなくテーブルにも実装可能のようです。

スクリプト

<script src="jquery.min.js" type="text/javascript"></script>
<script src="list.min.js" type="text/javascript"></script>

実装

<div id="div1065">
    <input class="search" />
    <!-- featureクラスでソート -->
    <span class="sort" data-sort="feature">Sort features</span>
    <ul class="list">
        <li>
            <h4 class="feature">Search</h4>
            <small class="description">Search through all items.</small>
        </li>
        <li>
            <h4 class="feature">Sort</h4>
            <small class="description">Sort lists by value that
                you choose.</small>
        </li>
        <li>
            <h4 class="feature">Filter</h4>
            <small class="description">Write your own filter functions.</small>
        </li>
        <li>
            <h4 class="feature">Add</h4>
            <small class="description">Add items on the fly.</small>
        </li>
        <li>
            <h4 class="feature">Get</h4>
            <small class="description">Get item based on value.</small>
        </li>
        <li>
            <h4 class="feature">Update</h4>
            <small class="description">Update items as you go.</small>
        </li>
        <li>
            <h4 class="feature">Remove</h4>
            <small class="description">Remove items whenever you feel like.</small>
        </li>
    </ul>
</div>

リスト内にclassを指定することで、ソート機能の範囲などを細かく指定できます。
そして、valueNamesに各クラスを登録します。

var options = {
    valueNames: [ 'feature', 'description' ],
};

var featureList = new List( 'div1065', options);

デモ

こちら

オプション

オプション

  • このエントリーをはてなブックマークに追加

関連記事

レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」

「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最

no image

エフェクト豊富なニュースティッカー用プラグイン「inewsticker」

「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ

Lightboxなどが実装できるプラグイン「Magnific Popup」

「Magnific Popup」はlightboxを実装できるjQueryプラグインです。 この手のものは、商用利用に制限がかかっているものが多いですがこのプラグインはMITライセンスで提供されてい

ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン

画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ

no image

ポップアップ・モーダル ウィンドウ プラグイン

ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers

no image

「jqPlot」を使って棒グラフを作成

jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。

no image

時刻入力に便利な「Timepicker for Bootstrap」

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え

マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」

「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト

テキストに動きをつけるプラグイン

テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit

jqPlot - Legend(凡例) オプション

jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑