*

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

swim!

今シーズンで5年になる水泳。初めは運動不足解消のためだったけど、今では欠かせないスポーツに。やっと暖

記事を読む

no image

‘social network’をipad2で見た

最近、自宅でノートPCを使う頻度が減りました。ipad2使ってるからだと思います。メールとネットなら

記事を読む

andoさん写真

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

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

記事を読む

no image

Blogger Syntax Highlighter

今さらですが、Blogger移転を機にSyntax Highlighterを入れてみました。こちらの

記事を読む

facebook logo

facebookでログイン機能を作成してみた

最近の会員サイトには、facebookでログインする、という機能がよくついてます。 この機能が

記事を読む

【解説】Googleウェブマスターツールの使い方

サイトの分析やアクセス解析のツールと言えばGoogleAnalyticsですよね。 このブ

記事を読む

no image

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

Web Albums for iPad - A Picasa Photo Viewer, Uploa

記事を読む

PV5000/月達成したのでまたGoogleAnalyticsのデータを公開します

めちゃくちゃに力を入れていた訳でもなく、特にすごいコンテンツをエントリーした訳でもないのに、

記事を読む

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

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

記事を読む

Google AD

Google AD

PAGE TOP ↑