Home » jQuery 外掛

[jQ]jQuery pager plug-in

範例 1
沒錯!只要 1,000 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!

jquery_pager_plug_in_

pager 的效果類似於頁籤,只是樣式及切換的方法有點不同而已,用來當作訊息的顯示也是很方便的!

套件名稱:jQuery pager plug-in
套件版本:N/A
作者網站:http://rikrikrik.com/jquery/pager/
套件網址:N/A
發佈日期:2008-11-14
檔案大小:2.66 KB
檔案下載:jquery.pager.js

參數說明:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
clas(必填)
描述: 要用來當 pager 內容的來源標籤
預設值: 無
 
navId(選填)
描述: pager 的 id;如果有其它更多的 pager 時,需要再自訂其它值
預設值: 'nav'
 
navClass(選填)
描述: pager 樣式的 className
預設值: 無
 
navAttach(選填)
描述: pager 選項插入的方式;允許的值有:'prepend''append''before''after'
預設值: 'append'
 
highlightClass(選填)
描述: pager 選項被點擊時的超連結樣式 className
預設值: 'highlight'
 
prevText(選填)
描述: pager 選項中的上一頁的文字;預設顯示為 '«'
預設值: '«'
 
nextText(選填)
描述: pager 選項中的下一頁的文字;預設顯示為 '»'
預設值: '»'
 
linkText(選填)
描述: pager 選項的文字內容,使用字串陣列來儲存
預設值: null
 
linkWrap(選填)
描述: 用來包覆 pager 選項用的元素
預設值: null
 
height(選填)
描述: 設定 pager 最小的高度
預設值: null

方法說明:

檢視原始碼 JavaScript
1
2
// 使用 filestyle 效果
$(selector).pager(clas, options);

使用範例:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.pager.js"></script>
<style type="text/css">
	a {
		color: #005BD8;
	}
	a:hover {
		color: #005BD8;
	}
	.pager_examples {
		border: 1px solid #999;
		margin: 10px 0;
		width: 580px;
	}
	.pager_examples p, h4 {
		padding: 5px;
		margin: 0;
	}
	.pager_examples .nav {
		background: #eee;
		border-top: 1px solid #999;
		padding: 5px;
	}
	.pager_examples .nav#nav2 {
		border-top: 0;
		border-bottom: 1px solid #999;
	}
	.pager_examples .nav a {
		padding: 0 5px;
	}
	.pager_examples .nav a.highlight {
		color: #000;
		font-weight: bold;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 把 #example1 加上 pager 效果
		// div 子元素為內容來源
		$('#example1').pager('div');
 
		// 把 #example2 加上 pager 效果
		// p 子元素為內容來源, 並自訂其它選項
		$('#example2').pager('p', {
			navId: 'nav2',
			height: '120px',
			navAttach: 'prepend',
			prevText: '上一頁',
			nextText: '下一頁',
			linkText: ['Page 1', 'Page 2', 'Page 3', 'Page 4', 'Page 5']
		});
	});
</script>
 
<body>
	<h4>範例 1</h4>
	<div id="example1" class="pager_examples">
		<div>
			<h4>WaterMark 1.0</h4>
			<p>一個體貼使用者的系統,通常都會在一些輸入框中加上貼心的提示,像 MSN 的搜尋框就有這樣的提示功能。基本常看到的做法都是先變更輸入框的 value 值為提示的內容,這樣的做法雖然簡單但最後表單要送出或是驗證時,都要先進行內容的過濾,畢竟總不可能把提示的內容往後端傳送吧!</p>
		</div>
		<div>
			<h4>jQuery 外掛 36 計</h4>
			<p>書中收集了 36 個 jQuery 的外掛供開發人員可以參考使用,並也列出了每一個外掛的屬性、參數及使用的方法,同時還有使用的範例程式。</p>
		</div>
	</div>
 
	<h4>範例 2</h4>
	<div id="example2" class="pager_examples">
		<p>一個體貼使用者的系統,通常都會在一些輸入框中加上貼心的提示,像 MSN 的搜尋框就有這樣的提示功能。基本常看到的做法都是先變更輸入框的 value 值為提示的內容,這樣的做法雖然簡單但最後表單要送出或是驗證時,都要先進行內容的過濾,畢竟總不可能把提示的內容往後端傳送吧!</p>
		<p>書中收集了 36 個 jQuery 的外掛供開發人員可以參考使用,並也列出了每一個外掛的屬性、參數及使用的方法,同時還有使用的範例程式。</p>
		<p>doubleSelect 從名稱就知道它是讓下拉選單連動的套件,我們只要設定好 JSON 格式的資料就可以使用了。雖然能做到多個下拉選單連動,不過就設定看來是會很繁瑣的!</p>
		<p>clearField 套件是一個依輸入框欄位的 vlaue 屬性值來當提示內容的外掛,雖然並不是那麼的華麗,但至少最基本的提示能力是沒問題的。</p>
		<p>這幾天在幫小神童弄作品集時發現,IE 還真是讓設計師恨的牙癢癢的東西,且現在已經有 ,IE 6, ,IE 7 及 ,IE 8 等三種不同版本的瀏覽器,且都有一點小差異,因此為了讓網頁的畫面跟動作都一致的話,就得針對不同的地方下苦功。</p>
	</div>
</body>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

7 筆針對 [jQ]jQuery pager plug-in 的迴響

  1. 請問這特效如何改成一動作過去數字就顯示,而不要再用點選的方式呢? 有點類似yahoo那些tab的功能一樣~

    • 一種是針對它外掛來修改..
      打開 jquery.pager.js 找第 106 行..
      把 click 改成 mouseover

      另一種是不改外掛而在我們使用時多加一段(以第一個為例)

      檢視原始碼 JavaScript
      1
      2
      3
      
      $('#example1').pager('div').find("a").mouseover(function(){
      	$(this).triggerHandler('click');
      });
  2. 感謝您,我自己改就改錯了地方,改在function highlight (),都只成功了fadeOut
    一知半解...
    真的很謝謝您

發表迴響