Home » jQuery 外掛

[jQ]JQuery Quick Pagination 1.0.1

[ 日期： | 瀏覽：12,415 | 迴響：2 ]
範例 1
請協助我把這個效果加到我的網站 (只要 800 元)
沒錯!只要 800 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



有時清單項目太長時都是要做分頁的，但真正的分頁是要靠後端程式跟資料庫的配合，若一般設計者不會寫程式的話，那就得來試試 JQuery Quick Pagination。除了能自訂每頁筆數之外，還能控制是否顯示頁數等資訊呢。

套件名稱：JQuery Quick Pagination
套件版本：1.0.1
作者網站：http://projects.allmarkedup.com/jquery_quick_paginate/
套件網址：N/A
發佈日期：2008-11-11
檔案大小：3.97 KB
檔案下載：jquery.quickpaginate.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

perpage(選填)
描述： 每頁的筆數
預設值： 6
 
pager(選填)
描述： 用來放置上下頁鈕的 jQuery 選擇器：若沒提供則會附加在清單的最後
預設值： null
 
perpage(選填)
描述： 是否顯示頁數；例如 2/4 等
預設值： true
 
prev(選填)
描述： 上一頁鈕的 className
預設值： "qp_next"
 
next(選填)
描述： 下一頁鈕的 className
預設值： "qp_prev"
 
pagenumber(選填)
描述： 顯示目前頁數的元素的 className
預設值： "qp_pagenumber"
 
totalnumber(選填)
描述： 顯示全部頁數的元素的 className
預設值： "qp_totalnumber"
 
counter(選填)
描述： 放置頁數的元素的 className
預設值： "qp_counter"

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定的清單加入假分頁的效果
$(selector).quickpaginate(settings);

使用範例：

檢視原始碼 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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.quickpaginate.js"></script>
<style type="text/css">
#shopping_list_counter {
	margin: 10px 25px;
}
.qp_counter {
	margin:  10px;
}
a.qp_disabled {
	color: #888;
}
#images_counter {
	width: 200px;
}
#images_counter .qp_prev {
	display: block;
	float: right;
}
#images_counter .qp_next {
	display: block;
	float: left;
}
</style>
<script type="text/javascript">
	$(function(){
		// 把 #shopping_list li 清單加入假分頁的效果
		// 每 4 筆一頁
		$('#shopping_list li').quickpaginate({
			perpage: 4,
			pager: $('#shopping_list_counter')
		});
 
		// 把 #images img 清單加入假分頁的效果
		// 每 1 筆一頁
		$('#images img').quickpaginate({
			perpage: 1,
			pager: $('#images_counter'),
			showcounter: false
		});
	});
</script>
 
<body>
	<ul id="shopping_list">
		<li>松板豬</li>
		<li>中國小龍蝦</li>
		<li>嘉義方塊</li>
		<li>陽澄湖大閘蟹</li>
		<li>萬巒豬腳</li>
		<li>玉井芒果冰</li>
		<li>彰化肉圓</li>
		<li>周氏蝦捲</li>
		<li>松村燻之味</li>
		<li>林鳳營鮮乳</li>
	</ul>
	<div id="shopping_list_counter"></div>
 
 
	<div id="images">
		<img src="images/demo1.jpg" width="200" height="133" alt="Demo1" />
		<img src="images/demo2.jpg" width="200" height="133" alt="Demo2" />
		<img src="images/demo3.jpg" width="200" height="133" alt="Demo3" />
	</div>
	<div id="images_counter"></div>
</body>
範例 1

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

2 筆針對 [jQ]JQuery Quick Pagination 1.0.1 的迴響

發表迴響