*

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

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

関連記事

no image

朝ウォーキングするようになった

怒涛の仕事が一つ終り、少し余裕が出てきたので、朝15分~30分早く起きて近所をウォーキングす

記事を読む

IIJmioに申し込んでモバイルバッテリー当たったった

(写真はイメージです) 4月28日のエントリーで、スマホの回線・データ通信をIIJmi

記事を読む

no image

入社して満2年が経ちました

入社して1年が経ちました http://hakomori.net/?p=638 もう1か月く

記事を読む

no image

inception見てきた

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

記事を読む

SVNリポジトリのリプレース(とeclipseの設定)

  SVNリポジトリのリプレースを行ったのでエントリー。 1.リポジトリをdump svn

記事を読む

年末なので2013年を振り返ってみる

クリスマスとか忘年会とか大晦日とか正月とか、この時期ゆっくりしてられないですよね。 それな

記事を読む

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

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

記事を読む

【感想】タモリさんが笑っていいとも!を卒業して人徳とか影響力について考えた

春は出会いと別れの季節ですね。 タモリさんが「笑っていいとも!」を卒業するという話は、

記事を読む

検索

SEO的に去年の今とアクセス数比べてみた

今まで自分のサイトのアクセス数を気にしたことはあまりなかったんですが(オイ)、サーバ移行に伴

記事を読む

DiCE

64ビットwindows8にDiCEを入れる

DiCE[/caption] 新しいPCにwindows8入れてから、旧PCを全く触らなくな

記事を読む

Google AD

Google AD

no image
ビジネスを自動化する!仕組みづくり

収益化のルール https://www.youtube.co

セールススキルの大切さ

今日はセールススキルって大事って話だよ。 ・営業とりあえずやっ

テレワーク・在宅勤務に最適な間取りプランとは?

家の中で集中力をアップさせるには? 人間はそもそ

克己
田中克成さんの実父「プロ精神八か条」とは

今日も田中克成さんのメルマガからのシェア+アウトプットです。

イメージ
心に突き刺さる起業家の言葉「お前は何がしたい?」

こんにちは。起業家のマインドで感銘を受けた動画の、シェアとアウトプッ

→もっと見る