Home » jQuery 外掛

[jQ]jQuery pager plug-in

[ 日期： | 瀏覽：4,315 | 迴響：7 ]
範例 1
請協助我把這個效果加到我的網站 (只要 1,000 元)
沒錯!只要 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

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

也許您對這些文章也有興趣

  • [jQ]ddSlick 1.0
  • [jQ]jQuery threesixty 0.6
  • [jQ]jQuery Super Labels Plugin 1.0.1
  • [jQ]jQuery Glow
  • [jQ]Stupid jQuery table plugin
  • [jQ]Shuffle Letters 1.0

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');
});
      回覆 ↓

  4. 感謝您，我自己改就改錯了地方，改在function highlight ()，都只成功了fadeOut
    一知半解...
    真的很謝謝您

    回覆 ↓

發表迴響

您的電子郵件位址並不會被公開。 必要欄位標記為 *

*

您可以使用這些 HTML 標籤與屬性： <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>