jQueryでページング
みなさん、こんにちは、まーしーです。
めがねをかけてるときは小木に似てるらしいです。
前回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になるように、という感じにしてみたつもりです。
あんまりわからず書いているところがあるので、
そのあたりはもっと突き詰めないといけないですね。
まとめ
ページングはそもそも必要かどうか?という所の検討も必要ですし、
検討の上で、どういう方法でページングを実現させるか?というところも検討しないといけないと思います。
用法・用量を守ってお使い下さい、という感じでしょうね。
おまけ::ページング?ページネーション?
ページ繰り、ってページングですかね? ページネーションですかね?
なんとなくページングだとおもっていたのですが、ページネーションという言葉を@cremaに教えてもらいました。ページング - 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=
ページネーションっていうのは初耳でした。 言葉自体しらないと、そもそも検索もできないですよね。
このあたりの検索スキルも高めていかないとな〜、と思った次第です。