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なんかを指定しておくといいかと思います。

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

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

リストを横並びにした際に簡単に均等にすることができるdisplay:table-cellを使ってみる前のページ

Lightroomで特定の色だけを鮮やかにしたりそれ以外をモノクロ(白黒)にするやり方次のページ

関連記事

  1. HCaptions

    JavaScript

    ホバー時に色々なエフェクトでキャプションをオーバーレイ表示できるjQueryプラグイン「HCapti…

    指定した要素をホバーすると色々なエフェクトでキャプションをオーバーレイ…

  2. popModal

    JavaScript

    6種類のモーダルウィンドウを実装できる「popModal」

    popModalは6種類のモーダルウィンドウを実装することができるjQ…

  3. Huebee

    JavaScript

    オシャレなカラーピッカーを手軽に表示させれる「Huebee」

    Huebeeはシンプルでオシャレなカラーピッカーを手軽に表示させること…

  4. no-image

    JavaScript

    ミニマルでダイナミックなLightboxプラグイン「darkbox.js」

    darkbox.jsはミニマルながらもダイナミックなLightbox風…

  5. TyperText

    JavaScript

    テキストタイピングエフェクトを実装できる「TyperText」

    TyperTextはテキストタイピングエフェクトを実装できるjQuer…

  6. Bootstrap Navbar Sidebar

    JavaScript

    サイドに固定できるナビゲーション実装「Bootstrap Navbar Sidebar」

    Bootstrap Navbar Sidebarは、サイドに固定できる…

コメント

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

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

最近の記事

  1. cheero Power Mountain mini 30000mAh CHE-110
  2. 帆布カメラインナーケース B-2タイプ
  3. 雨粒

アーカイブ

PAGE TOP