listjs-logo

先月、3月2日にリリースされた JavaScript プラグイン［List.js］を試用しました。
クオリティも高く、凄く便利ですね。

使いドコロの多いJavaScriptだと思うので、今日は本プラグインの具体的な導入方法を紹介していきます。

［List.js］をダウンロードする

まずは必要なファイルをダウンロードします。

下記公式サイトより『Download』をクリックした先のページから入手可能です。

List.js : http://www.listjs.com/

手に入れたJavaScriptファイルはHTMLの任意の箇所で読み込みます。

<script src="list.min.js"></script>

実はCDNでも同スクリプトが配信されています。
わざわざダウンロードせずとも、こちらを利用したほうが手っ取り早いかもしれませんね。

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.2.0/list.min.js"></script>

リストまたはテーブル部分のマークアップ

次に、メインとなるリストまたはテーブルを作り込んでいきます。

ここでは id="sample-list" でリストを囲み、UL要素には class="list" を付与します。各リスト内の要素にも任意のクラス名を追加しておきましょう。

またソートするために使うボタンも冒頭に記述しておくことを忘れずに。
このボタンにはクラス名 class="sort" を追加、さらにカスタムデータ属性で deta-sort というプロパティを指定します。

同様に、検索に使うためのインプット要素には class="search" を使います。

<div id="sample-list">

<dl>
	<dt>ソート</dt>
	<dd class="sort" data-sort="name">氏名でソート</dd>
	<dd class="sort" data-sort="city">住所でソート</dd>
</dl>

<input class="search">

<ul class="list">
	<li>
		<span class="name">Jonny</span>
		<span class="city">Stockholm</span>
	</li>
	<li>
		<span class="name">Jonas</span>
		<span class="city">Berlin</span>
	</li>
	……
</ul>

</div>

比較的シンプルなマークアップで済むのが嬉しいですね。

スクリプトの初期設定

最後に［List.js］を起動させるための初期設定を行います。
今回は公式サイトに倣って次のようにシンプルなコードを記述しました。

<script>
var options = {
	valueNames: [ 'name', 'city' ],
};
var featureList = new List( 'sample-list', options);
</script>

その他の詳しいオプション設定は公式サイトからどうぞ。

List.js Options : http://www.listjs.com/docs/options

最後に

今回はリスト（UL要素）でのサンプルを紹介しましたが、クラス名を揃えればテーブル（table要素）の他、どんな構成のHTMLでも構築できます。

実際に使ってみたサンプルも用意してあるので併せてご覧ください。

サンプル : https://on-ze.com/demo/js-list.js/