スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Trackback URL

http://jsnt.blog.fc2.com/tb.php/4-687ce1f7

Comment Form

Comment Form
Only inform the site author.

Comments: -

inco URL 2011-02-15 Tue 10:06:41

IE8なんですがデモが見れないです…;他のブラウザでは見れました。

yuqq URL 2011-02-17 Thu 22:20:52

あれれ。ホントですね。
DOMで複雑な要素入れてるのがダメなのかも。
修正してみます。

(一応、他の部分で使っているものはIE6~9まで全部動きました。)

yuqq URL 2011-02-17 Thu 22:50:25

DOMがダメなのと、IEだとJSファイルの読み込みより先にデモのコードが実行されてしまうみたいで、
$関数じゃなくて$(window).bind('load',fn)使うか、getScriptでコールバックするかしないとダメだったみたい。

inco URL 2011-02-18 Fri 08:42:47

おお!IEでも見れました^^
それにしてもすばらしい機能ですね!
ちょこちょこ寄って勉強させてもらってます^^

Trackback: -

リストをページ分けしてページャーを付けるjQueryプラグイン

  • Posted at 2011-02-13 Sun 15:55:56
  • jQuery
listPager.gif

ブログのコメントとかいっぱい付くと、長々とコメントが続いていて見にくくありませんか?
というわけで、そんな悩みを解消するために、olやulといったリストをページ分けして、その前後にページャーを付けてページ切り替えできるようにするjQueryプラグイン作ってみました。

使い方

$(function()
{
	$('ol#commentlist').listPager({
		per: 10, // 1ページあたりの表示件数(初期値5)
		index: 0,// 初期ページ(初期値0)
		className: 'pager', // ページャにつけるclass名(初期値listPager)
		position: 'top', // ページャを付ける位置(top|bottom|both, 初期値both)
		unker: false // ページ切り替えしたときリストの一番上にアンカー持ってくかどうか(初期値true)
	});
});

下のページャーにはclassNameに加えて、className+'Bottom'クラスが付きます。
ページャーの現在のページのli要素にはactiveクラス、hoverしたli要素にはhoverクラスが付きます。

デモ

ダウンロード

Trackback URL

http://jsnt.blog.fc2.com/tb.php/4-687ce1f7

Comment Form

Comment Form
Only inform the site author.

Comments: 4

inco URL 2011-02-15 Tue 10:06:41

IE8なんですがデモが見れないです…;他のブラウザでは見れました。

yuqq URL 2011-02-17 Thu 22:20:52

あれれ。ホントですね。
DOMで複雑な要素入れてるのがダメなのかも。
修正してみます。

(一応、他の部分で使っているものはIE6~9まで全部動きました。)

yuqq URL 2011-02-17 Thu 22:50:25

DOMがダメなのと、IEだとJSファイルの読み込みより先にデモのコードが実行されてしまうみたいで、
$関数じゃなくて$(window).bind('load',fn)使うか、getScriptでコールバックするかしないとダメだったみたい。

inco URL 2011-02-18 Fri 08:42:47

おお!IEでも見れました^^
それにしてもすばらしい機能ですね!
ちょこちょこ寄って勉強させてもらってます^^

Trackback: 0

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。