Home » jQuery 外掛

[jQ]promptuMenu

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



promptuMenu 可以建立一個像 iPhoneAndroid 有圖示選單介面的滑動操作方式。 不管是要能垂直或是水平滑動,或者想要自訂一頁顯示幾列都可以透過參數設定就能完成囉!

套件名稱:promptuMenu
套件版本:N/A
作者網站:http://natrixnatrix89.github.com/promptu-menu/
套件網址:N/A
發佈日期:2012-02-22
檔案大小:15.3 KB
檔案下載:jquery.promptu-menu.js promptumenu.css
滑鼠游標:hand.ico

參數選項說明:

檢視原始碼 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
columns(選填)
描述: 每一列放置幾個圖示
預設值: 3
 
rows(選填)
描述: 每一頁顯示幾列
預設值: 4
 
direction(選填)
描述: 可以滑動的方向;允許的值有 'vertical'(垂直)'horizontal'(水平)
預設值: 'horizontal'
 
width(選填)
描述: 區塊的寬度
預設值: 'auto'
 
height(選填)
描述: 區塊的高度
預設值: 'auto'
 
duration(選填)
描述: 切換頁時的移動速度;單位毫秒(1000毫秒 = 1秒)
預設值: 500
 
pages(選填)
描述: 若有多頁時,是否顯示頁數指示器
預設值: true
 
inertia(選填)
描述: 慣性作用的係數,數字越小會停的越快
預設值: 200

方法說明:

檢視原始碼 JavaScript
1
2
// 把指定元素轉換成 promptumenu 效果
$(selector).promptumenu(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
77
78
79
80
81
82
83
<link type="text/css" rel="stylesheet" href="promptumenu.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.promptu-menu.js"></script>
<style type="text/css">
	.promptu-menu a img, .promptu-menu2 a img {
		border: none;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 產生 promptuMenu 效果, 圖示排列為 4 列, 每列 5 個
		$('.promptu-menu').promptumenu({
			width:500, 
			height:500, 
			columns: 5 
		});
 
		// 產生 promptuMenu 效果, 圖示排列為 3 列, 每列 3 個
		// 移動方式為垂直方向, 並且不顯示指示器
		$('.promptu-menu2').promptumenu({
			width: 300, 
			height: 300, 
			rows: 3, 
			columns: 3, 
			direction: 'vertical', 
			pages: false
		});
	});
</script>
 
<body>
	<h1>可左右移動並有指示器</h1>
	<ul class="promptu-menu">
		<li><a href="https://play.google.com/store/apps/details?id=tw.abgne.happybirthday.chinese" class="tap_test"><img src="images/Happy Birthday.png" alt="" /></a></li>
		<li><a href="https://play.google.com/store/apps/details?id=tw.abgne.chinese.calculatorwidget" class="tap_test"><img src="images/Calculate.png" alt="" /></a></li>
		<li><a href="https://play.google.com/store/apps/details?id=tw.abgne.rebootcontrol" class="tap_test"><img src="images/Reboot Control.png" alt="" /></a></li>
		<li><a href="https://play.google.com/store/apps/details?id=tw.abgne.personalization.mycard" class="tap_test"><img src="images/My Card.png" alt="" /></a></li>
		<li><a href="http://abgne.tw" class="tap_test"><img src="images/Books.png" alt="" /></a></li>
		<li><img src="images/Browser.png" alt="" /></li>
		<li><img src="images/Calculator.png" alt="" /></li>
		<li><img src="images/Calendar.png" alt="" /></li>
		<li><img src="images/Camera.png" alt="" /></li>
		<li><img src="images/Clock.png" alt="" /></li>
		<li><img src="images/Contacts.png" alt="" /></li>
		<li><img src="images/Gallery.png" alt="" /></li>
		<li><img src="images/GMail.png" alt="" /></li>
		<li><img src="images/Mail.png" alt="" /></li>
		<li><img src="images/Maps.png" alt="" /></li>
		<li><img src="images/Market.png" alt="" /></li>
		<li><img src="images/Movie Studio.png" alt="" /></li>
		<li><img src="images/Music.png" alt="" /></li>
		<li><img src="images/Phone.png" alt="" /></li>
		<li><img src="images/Settings.png" alt="" /></li>
		<li><img src="images/Talk.png" alt="" /></li>
		<li><img src="images/YouTube.png" alt="" /></li>
	</ul>
 
	<h1>可左右上下移動但沒有指示器</h1>
	<ul class="promptu-menu2">
		<li><a href="http://abgne.tw" class="tap_test"><img src="images/Happy Birthday.png" alt="" /></a></li>
		<li><a href="http://abgne.tw" class="tap_test"><img src="images/Calculate.png" alt="" /></a></li>
		<li><a href="https://play.google.com/store/apps/details?id=tw.abgne.rebootcontrol" class="tap_test"><img src="images/Reboot Control.png" alt="" /></a></li>
		<li><a href="https://play.google.com/store/apps/details?id=tw.abgne.personalization.mycard" class="tap_test"><img src="images/My Card.png" alt="" /></a></li>
		<li><img src="images/Books.png" alt="" /></li>
		<li><img src="images/Browser.png" alt="" /></li>
		<li><img src="images/Calculator.png" alt="" /></li>
		<li><img src="images/Calendar.png" alt="" /></li>
		<li><img src="images/Camera.png" alt="" /></li>
		<li><img src="images/Clock.png" alt="" /></li>
		<li><img src="images/Contacts.png" alt="" /></li>
		<li><img src="images/Gallery.png" alt="" /></li>
		<li><img src="images/GMail.png" alt="" /></li>
		<li><img src="images/Mail.png" alt="" /></li>
		<li><img src="images/Maps.png" alt="" /></li>
		<li><img src="images/Market.png" alt="" /></li>
		<li><img src="images/Movie Studio.png" alt="" /></li>
		<li><img src="images/Music.png" alt="" /></li>
		<li><img src="images/Phone.png" alt="" /></li>
		<li><img src="images/Settings.png" alt="" /></li>
		<li><img src="images/Talk.png" alt="" /></li>
		<li><img src="images/YouTube.png" alt="" /></li>
	</ul>
</body>

範例 1

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

頁數指示器圖片:

備註:
若是用滑鼠點擊時可能會出錯,所以筆者就針對這部份做一點點小防呆的動作-jquery.promptu-menu-fix.js

3 筆針對 [jQ]promptuMenu 的迴響

發表迴響