*

JQueryのsliderでpagination機能を作ってみた

公開日: : WEBサービス, システム, 体験談

Pagination: Eventbrite

複数ページが存在するWEBサイトによく使われている機能として「ページネーション」があります。

ページネーションとは
http://e-words.jp/w/E3839AE383BCE382B8E3838DE383BCE382B7E383A7E383B3.html

Amazonや楽天、YahooショッピングなどECサイトでは良く使われていますね。
このページネーション、ページ数が多くなると使いにくくなってくるなーと個人的に感じていました。

ページネーションって一般的に

<< < 1 2 3 4 5 > >>

のようになっていて、じゃあ例えば全部で100ページある時のページネーションで、50ページ目が見たいときどうするの?っていう疑問があります。(大体ページ数が多いサービスには、直接ページ数を入力する欄がありますが。)

このページネーションをもっと直感的に操作できる方法として考えたのがSliderでPaginationをさせる方法です。
とりあえずこちらをどうぞ。

JQueryのsliderでpagination機能
http://rainy4649.sakura.ne.jp/sandbox/pager-jquery/index.html

スライダーを移動させて、任意の場所でドロップすると、そのページに移動します。
どうでしょうか。例えば「7ページ目」とかにもスムーズにアクセスできますよね。

サンプルではコンポーネントを大きく表示してあるので使用感は損なわれていませんが、いざ小さく表示しようとするともしかしたら少し難があるかもですが。。

使用したのはJQueryUIのsliderです。ドロップしたときにアクションが必要になるので、その部分をカスタマイズしました。

Slider | JQuery UI
http://jqueryui.com/slider/

感想とかもらえると嬉しいです。

Google AD


Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

WP-SpamFree by Pole Position Marketing

関連記事

no image

ipad2買ったらコレは買っとけ的なもの その3

Web Albums for iPad - A Picasa Photo Viewer, Uploa

記事を読む

no image

biosが起動しない。

おとといくらいから、うちのPCが起動しない。OSが起動しないだけじゃなくてBiosが起動しない。ファ

記事を読む

docomo-iphone買わなかった

docomo-iphoneが発売されましたが、結局 購入には至りませんでした。 その理

記事を読む

no image

Pear::pager と TwitterBootstrap をマッシュアップしてみた

前回に引き続き、WEBアプリをカスタマイズしてみました。 DB使って商品登録をしてると

記事を読む

no image

ワードプレスのプラグイン初作成

タイトルのとおり。ワードプレスのプラグインを作ってみました。仕事でEC-CUBE使って販売をしている

記事を読む

no image

ec-cubeで欲しい機能

仕事で、ec-cubeを触っている。どこの企業でも同じだと思うが、ec-cubeを使っているとカスタ

記事を読む

転職して新しい職場で仕事始めました

1か月以上もブログを放置してましたが、私は元気です。 むしろこれまで以上に元気です。

記事を読む

蒙古タンメン中本新宿店で北極ラーメンを食べた感想

節分を過ぎて暦の上では春ですが、関東地方では昨日雪が降りました。 まだまだ春は遠いですねー。

記事を読む

no image

iphoneのガラスが割れたので修理した

ゴールデンウィーク中に、iphoneを落としてしまい、フロントのガラスを割るという事件が起こ

記事を読む

no image

組織を作っているもの

去年からWEB制作のPMをさせてもらっていて、クライアントで常駐しているうちに、今回クライア

記事を読む

Google AD

Google AD

iPhone6が来ました。アップルのサポートは未だ健在だったというお話。

アップルは製品だけじゃなくて、サポートの対応にまでその企業哲学

iphone6にするか、iphone6plusにするか、まだ決めなくてもいい方法

iphone6が発表されましたね。iwatchは来年に持越しで

パパも2歳になったよ

早いもので子供が2歳になりました。 年を取るごとに年月が早く

転職して新しい職場で仕事始めました

1か月以上もブログを放置してましたが、私は元気です。 むしろ

6月末で現職を退職します

ご存知の方もいらっしゃると思いますが、6月末で現職を退職するこ

→もっと見る

PAGE TOP ↑