*

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

関連記事

【どうしてこうなった!?】このブログの直帰率が1%を切りました【自分史上初】

以前のエントリーで、このブログの直帰率が80%から20%に激減したことを報告しました。

記事を読む

no image

ホームページ(笑)を作ればモノが売れるという幻想(笑)

まだこんな考えもってる人がいたのかwww もう「ほーむぺーじ」って言うのもやめて欲

記事を読む

no image

wordpress plug-in [register_taxonomy_for_object_type]

register_taxonomy_for_object_type仕事で使っているWordpress

記事を読む

ロリポップ

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

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

記事を読む

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

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

記事を読む

no image

PHPのpear インストールにて

今さらながらPEARを触ることに。以前に少しだけ触ったことがあって、「ダウンロードするだけでしょ?超

記事を読む

no image

ec-cubeで欲しい機能

仕事で、ec-cubeを触っている。どこの企業でも同じだと思うが、ec-cubeを使っているとカスタ

記事を読む

【体験談:ダイエット】脂肪燃焼スープを作ってみた感想 6日目

脂肪燃焼スープでダイエット6日目。 昨日計ったら1Kg減量してました! おおー!すご

記事を読む

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

前回に引き続き、買ってよかったipadアプリです。i文庫HD以前PDF化した本を読むのにデフォルトの

記事を読む

no image

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

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

記事を読む

Google AD

Google AD

iPhone6が来ました。アップルのサポートは未だ健在だったというお話。

アップルは製品だけじゃなくて、サポートの対応にまでその企業哲学

iphone6にするか、iphone6plusにするか、まだ決めなくてもいい方法

iphone6が発表されましたね。iwatchは来年に持越しで

パパも2歳になったよ

早いもので子供が2歳になりました。 年を取るごとに年月が早く

転職して新しい職場で仕事始めました

1か月以上もブログを放置してましたが、私は元気です。 むしろ

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

ご存知の方もいらっしゃると思いますが、6月末で現職を退職するこ

→もっと見る

PAGE TOP ↑