リストをインクリメント検索・ソートできる「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);

デモ

こちら

オプション

オプション

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

関連記事

no image

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

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

iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」

「ContentFlow」は、iTunesのCover Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。ダウンロード スクリプト 実装

no image

シンプルな画像スライダー/ギャラリー用プラグイン

スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン

画像ギャラリーを実装できる「Galleria」

Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを

no image

グラフ作成 プラグイン

C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali

実装方法が選べるツールチップ用プラグイン「Smallipop」

Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします

no image

ローソク足チャート「jqPlot」

「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、

レスポンシブに対応したテーブルを実装できる「FooTable」

「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷

入力数値の桁区切り挿入

ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu

様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)

Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際

Message

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

*

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

PAGE TOP ↑