*

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

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

ブログ更新情報をTwitterに流す、FeedBurnerの「Socialize機能」

タイトルの通り、ブログの更新情報をTwitterに流す方法。 結論から言うとFeedBurnaer

記事を読む

CakePHP1.3でブラウザを閉じてもセッションが切れないようにする方法

ちょっと体調を崩してしまってましたが、なんとか回復してきました。(辛かった・・・) 本当に

記事を読む

自分の黒歴史を公表するよ その2(キャプテン翼編)

  自分には5歳年上の兄貴がいるのですが、自分が小学校くらいのころ兄貴は中学

記事を読む

【育児】パパになってもうすぐ2年になります【近況】

最近、自分が完全に親ばかになっている感じがします。 どの親でもわが子はかわいいと言いますが

記事を読む

composerでcakephpをインストールしてプロジェクトを始めてみる

こんにちは!今日も寒いです。 この時期になると気になってくるのが花粉症です。 自分は花粉

記事を読む

no image

Gitに挑んだりしてみる

複数で開発するにあたって絶対必要と言ってもいい、バージョン管理ソフト。WEBSVNという選択肢も頭を

記事を読む

スケジュール管理より品質管理よりコスト管理より、モチベーション管理が大切な件

モチベーション管理とキャリア・マネジメントの時代 VOL1 http://homepage3.

記事を読む

andoさん写真

「オープンソースカンファレンス2012」でcandycaneのセミナー聞いてきた

 オープンソースカンファレンス2012に行ってきました。 オープンソースカンファレンス20

記事を読む

no image

lolipop(ロリポップ)でTinyTinyRSSを導入

Google reader終了のお知らせは、以前ほど使わなくなったサービスとは言え、かなり自

記事を読む

Dont-Be-Evil

エントリー数を増やしてSEO的にアクセス数が戻った件(Don’t be evil)

先月、サーバを変えたらアクセス数が落ちたエントリーをしました。 そんなことがあったので、1

記事を読む

Google AD

Google AD

PAGE TOP ↑