リスト化した要素を自分が指定した数に分割できるjQueryプラグイン「Easy List Splitter」

リスト化した要素を自分が指定した数に分割できるシンプルだけど便利なjQueryプラグイン「Easy List Splitter」を使ってみました。使い方もとても簡単で色んなところで活用できるかと思います。以下、使い方です。

[ads_center]

使い方

いつも通りjQueryとダウンロードしたプラグインを読み込みます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="jquery.easyListSplitter.js"></script>

分割したいリストをセレクタにセットして、colNumberに分割する数を指定します。

<script type="text/javascript">
$(document).ready(function() {
    $('.sample').easyListSplitter({
        colNumber: 5
    });
});
</script>

ここでは5つに分割するのでcolNumberに「５」を指定しました。自分が分割したい数を指定すればOKです。

リストのHTMLは普通にulとliでマークアップしていきます。プラグインのセレクタにセットしたクラス名を忘れずに。

<ul class="sample">
    <li>リスト01</li>
    <li>リスト02</li>
    <li>リスト03</li>
    <li>リスト04</li>
    <li>リスト05</li>
    ・・・以下略・・・
</ul>

上記の場合、CSSはulにfloat: leftなんかを指定しておくといいかと思います。

こんな感じでシンプルな機能ですが、とても使い勝手が良いプラグインですね。数字を変えるだけで分割数も簡単に変えることができるので、設置した後の管理もしやすくなるかと思います。

以下からダウンロードできます。

jQuery plugin: Easy List Splitter | Agenzia Web Madeincima | Trento e Torino