リストをインクリメント検索・ソートできる「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);
デモ
オプション
関連記事
-
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
-
開閉できるツリー構造を表現できる「jsTree」
「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち
-
-
入力数値の桁区切り挿入
ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu
-
-
「jqPlot」 カスタマイズ
以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし
-
-
シンプルにポップアップを実装できる「PopBox」
「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!
-
-
レスポンシブにも対応したカレンダーを表示する「Calendario.js」
Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready
-
-
スワイプ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「b
-
-
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション
-
-
テーブル・リスト要素を便利にしてくれるプラグイン
レスポンシブに対応したテーブルを実装できる「FooTable」 リストをインクリメント検索・ソートできる「List.js」 colResizable #カラム幅可変
-
-
様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)
Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際
