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. quick-select

    JavaScript

    素早く簡単に選択できるセレクトボックス「quick-select」

    quick-selectは素早く簡単に選択可能なセレクトボックスを実装…

  2. Albe Timeline

    JavaScript

    JSONデータを用いたタイムライン実装「Albe Timeline」

    Albe TimelineはJSONデータを用いたカスタマイズ性の高い…

  3. JavaScript

    画像やHTML要素に簡単にドロップシャドウをつけられるjQueryプラグイン「pShadow」

    個人的にすごく便利で使う機会がありそなjQueryプラグインの紹介です…

  4. Smooth Anchor Scrolling

    JavaScript

    ページ内リンクをスクロールできる「Smooth Anchor Scrolling」

    ページ内リンクをスムーズにスクロールできる「Smooth Anchor…

  5. RefineSlide

    JavaScript

    多数のエフェクトが素敵!レスポンシブ対応のjQueryスライダー「RefineSlide」

    多数のエフェクトがあってレスポンシブWebデザインにも対応しているスラ…

  6. Menu Droplet Animation

コメント

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

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

最近の記事

  1. Soundcore Liberty Neo(第2世代)
  2. EH-NA0B
  3. KPS-88
  4. Happy Plugs AIR1
  5. cheero Stream 10000mAh

アーカイブ

PAGE TOP