*

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

Gitに挑んだりしてみる

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

記事を読む

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

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

記事を読む

アラフォーになって感じた事象5つ

ゴールデンウィークの最終日に家族である公園に行きました。 前日とてもよく晴れて暑かったせい

記事を読む

ロリポップ

ロリポップからさくらインターネットにレンタルサーバを変更しました

前のエントリーで少し書きましたが、ロリポップを解約しました。 契約開始から3年と半年、本当

記事を読む

WordPressのテーマを「stinger」に変えたよ

しばらくぶりにブログ(Wordpress)のテーマを変更しました。 以前はオールホワイトで

記事を読む

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

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

記事を読む

no image

WEBは入り口

スクール革命っていう、日曜の昼に放送してる番組見てたら、「近いうちに夢を録画できるようになる

記事を読む

【体験談】千鳥ヶ淵の桜を見て靖国神社に参拝してきました

皆さん、花見に行きましたか? 今日は花見には絶好の日よりだったので、千鳥ヶ淵の桜を見てきました。

記事を読む

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

ご存知の方もいらっしゃると思いますが、6月末で現職を退職することになりました。最終出勤日は明

記事を読む

アップルストア銀座店で初売りのラッキーバッグGETしたよ

元日のポストでアップルのラッキーバッグGETのために並んでいると報告しましたが、GETしてき

記事を読む

Google AD

Google AD

PAGE TOP ↑