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. no-image

    JavaScript

    水平スクロールができることを示唆してくれる「ScrollHint」

    ScrollHintは水平スクロールができることをポインタアイコンを使…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり…

  3. Cavendish.js

    JavaScript

    CSS transitionsを活用したシンプルなスライドショーを実装できるjQueryプラグイン「…

    CSS transitionsを活用したシンプルなスライドショーを実装…

  4. no-image

    JavaScript

    1日のイベントスケジュールを作成できる「Jquery Layoutday plugin」

    Jquery Layoutday pluginは、1日のイベントスケジ…

  5. JavaScript

    JavaScriptで連想配列(ハッシュ)から1つずつ値を取り出して配列に入れてランダムで取得する

    タイトルが分かりづらくてあれなんですが、JavaScriptの連想配列…

  6. jquery-backToTop

    JavaScript

    カスタマイズ性に優れたトップへ戻るボタンを実装できる「jquery-backToTop」

    jquery-backToTopはカスタマイズ性に優れた「トップへ戻る…

コメント

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

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

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP