リストをインクリメント検索・ソートできる「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);
デモ
オプション
関連記事
-
-
親要素の大きさに合わせて画像をリサイズ「imgLiquid」
「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装
-
-
数値入力スライダー「jQuery Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
-
-
jqPlot - Legend(凡例) オプション
jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ
-
-
カレンダー実装プラグイン「Bootstrap Calendar」
「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト
-
-
Bootstrap Modal + 拡張機能が実装できるプラグイン
Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 2014/06/16 Bootstrap3対応版に書き換えをしました。
-
-
入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」
「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v
-
-
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや
-
-
実装方法が選べるツールチップ用プラグイン「Smallipop」
Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします
-
-
ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」
「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート
-
-
グリッドレイアウト プラグイン
Waterfall サイト pinbox [browser-shot url="http://kayschneider.github.io/pinbox/example/pinb