JavaScript

リスト化した要素を自分が指定した数に分割できる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に「5」を指定しました。自分が分割したい数を指定すれば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なんかを指定しておくといいかと思います。

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

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

関連記事

  1. Guardian

    JavaScript

    フォームにバリデーションを実装できるjQueryプラグイン「Guardian」

    Guardianはフォームにバリデーション機能を実装することができるj…

  2. Multipicker

    JavaScript

    要素を選択するときに直感的な操作を実現する「Multipicker」

    Multipickerは、日付や曜日、番号、その他さまざまな要素を選択…

  3. Image Lightbox
  4. no-image

    JavaScript

    レスポンシブ対応のシンプルなLightboxプラグイン

    レスポンシブに対応したシンプルなLightboxプラグインを紹介します…

  5. okzoom

    JavaScript

    レンズで拡大するように画像の細部をマウスオーバーでズームできる「okzoom」

    okzoomは画像細部をマウスオーバーでズームすることができるjQue…

  6. WEB TICKER

    JavaScript

    テキストや画像を無限にスクロールさせれるティッカー実装「WEB TICKER」

    WEB TICKERは、テキストや画像、リストなどさまざまなコンテンツ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP