linkerは「人と人」「人と情報」「人と物」をつなぐデザインユニットです。

jQueryでページング

090427.gif

みなさん、こんにちは、まーしーです。
めがねをかけてるときは小木に似てるらしいです。
前回journalを書いたと思ったらまた今日担当です。週末はどこへいったのやら?です。。

jQueryでページング

リスト項目の様な繰り返しの項目が増えてくると、ページ繰りをつけて複数ページに分けたりしますよね。
その方法もいくつかありますが、先日jQueryでやってみたのでその流れを書いてみようかな、と思います。

今回使用するのはjQuery pager plug-inになります。
本家で用意されているdemoをみていただければどういうものかはわかるかと思います。

rikrikrik.com - jQuery pager plug-in
http://rikrikrik.com/jquery/pager/#examples  

こちらをつかえば簡単にページングができます。
自分で使っていて引っかかったのが、高さが固定されてしまっている点でした。
heightのオプションでmin-heightが設定できるようなのですが

height

   Sets a min-height (height in IE) for your content. Default works out largest content automagically

rikrikrik.com - jQuery pager plug-in
http://rikrikrik.com/jquery/pager/  

うちの環境だけかもしれませんが、heightを設定してみてIE7でうまくいきませんでした・・・
そこでjquery.pager.jsの87行目あたり

function sizePanel () {
        if($.browser.msie) {
                $(me).find(clas).not(navid).css( {
                        height: settings.height
                });     
        } else {
                $(me).find(clas).not(navid).css( {
                        minHeight: settings.height
                });
        }
}

function sizePanel () {
        if($.browser.msie) {
                if ($.browser.version.substr(0, 1) == "6") {
                        $(me).find(clas).not(navid).css( {
                                height: settings.height
                        });
                } 
        } else {
                $(me).find(clas).not(navid).css( {
                        minHeight: settings.height
                });
        }
}

このようなかんじに変更してみました。
IE6の時はheightになるように、という感じにしてみたつもりです。  

サンプル

あんまりわからず書いているところがあるので、
そのあたりはもっと突き詰めないといけないですね。

まとめ

ページングはそもそも必要かどうか?という所の検討も必要ですし、
検討の上で、どういう方法でページングを実現させるか?というところも検討しないといけないと思います。
用法・用量を守ってお使い下さい、という感じでしょうね。

おまけ::ページング?ページネーション?

ページ繰り、ってページングですかね? ページネーションですかね?

ページング - Google 検索
http://www.google.co.jp/search?hl=ja&q=%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%B3%E3%82%B0&lr=

ページネーション - Google 検索
http://www.google.co.jp/search?hl=ja&q=%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%8D%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3&lr=   

なんとなくページングだとおもっていたのですが、ページネーションという言葉を@cremaに教えてもらいました。
ページネーションっていうのは初耳でした。 言葉自体しらないと、そもそも検索もできないですよね。
このあたりの検索スキルも高めていかないとな〜、と思った次第です。