• かちびと.net

    連続した要素を分割してページネーションを実装、移動時にエフェクトを加えるjQueryプラグイン・jPagesのご紹介です。大量の情報をコンパクトに出来るのでイザというときに一考したいです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

連続した要素を分割してページネーションを実装、移動時にエフェクトを加えるjQueryプラグイン・jPages

スポンサーリンク

ちょっと珍しいタイプでしたので備忘録。
連続した要素を、指定した数に達したら
分割して、ページネーションを自動で
生成し、移動時にエフェクトが加わえる、
というもの。大量のリストをコンパクト
に、という方に向いてそうですね。

連続した要素になら基本的になんでも使えるっぽいので何かしら応用できるかもしれません。コンパクトにまとめられるのは素敵ですね。

jPages


例えばli要素が100個くらいあったとして、これを10個ごと、10ページに分割し、ページ移動時にエフェクトも実装する、というもの。少々カスタマイズ性には欠けますがこれはこれで手軽に大量の要素をコンパクト化出来るので覚えておいて損はないかなと思います。

以下動作サンプルです。

Sample

ページネーションの数字が小さすg

コード

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jPages.js"></script>

本体とプラグインを読み込みます。

$("div.holder").jPages({
            containerID  : "itemContainer",//連続した要素をラップしてる要素のID
            perPage      : 16,//1ページに表示する要素の数
            startPage    : 1,//初期表示ページ
            startRange   : 1,//ページネーションの表示設定
            midRange     : 5,//上に同じ
            endRange     : 1//上に同じ
});

で、オプションを設定すればいい。エフェクトもここで変更します。

       <ul id="itemContainer">
<li><img src="example.jpg"></li>
<li><img src="example.jpg"></li>
<li><img src="example.jpg"></li>
     ・
     ・
     ・
<li><img src="example.jpg"></li>
<li><img src="example.jpg"></li>
        </ul>

いくら要素を追加しても表示は問題ないですね。要素自体はロードはされるので動作は最適化されませんが。テーブルにも使えますし、大量の情報をコンパクトに収められるので必要そうな時に一考したいですね。

ライセンスはMITです。

jPages

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services