*

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

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

ipad2、日本でも発売されましたね。amazonでsimフリーが販売してました。12万円すか・・・

記事を読む

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

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

記事を読む

【実録】あるプロジェクトで痛みを知り、それを通して得た教訓【認められるには?】

以前のエントリーで 嫌われている人から好かれようと思わなくていいんだという件 嫌

記事を読む

no image

inception見てきた

ずっと見たかった映画、inceptionを見てきた!inception何というか、マトリックスのアナ

記事を読む

【他者からの評価?】考えは自由【思想?】

自分の両親はリベラル(自由主義的)な考え方の人で、自分もその影響を受けて自由主義的な考え方を

記事を読む

自分の黒歴史を公表するよ その3(MSX編)

こんにちは! 今トゥームレイダーがやりたいので新しいPC買おうか迷ってます。 でもス

記事を読む

no image

転職しました。

もう3週間になりますが、タイトルの通りです。最初はこんなこと晒してもしょうがないんじゃないか?とかも

記事を読む

no image

引っ越しました

ここのところエントリーが滞ってましたが、一週間前に引っ越しました。 今回の引越しは、自分として

記事を読む

【自分語り】WEB業界に入ろうと思った理由・経緯【その2】

前回は自分がどういう経緯でWEB業界に入って行くかの前篇をお送りしました。 今回はその続き

記事を読む

Google AD

Google AD

PAGE TOP ↑