promptuMenu 可以建立一個像 iPhone 或 Android 有圖示選單介面的滑動操作方式。 不管是要能垂直或是水平滑動,或者想要自訂一頁顯示幾列都可以透過參數設定就能完成囉!
套件名稱: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> |
頁數指示器圖片:
備註:
若是用滑鼠點擊時可能會出錯,所以筆者就針對這部份做一點點小防呆的動作-jquery.promptu-menu-fix.js
若用手機瀏覽,會發現,超連結不能點
您好,請問我想把這外掛可以像貴網站"顯示計算機"的功能呈現,應該在哪邊做修改
請問老師如何更改程式碼,當我要動態增加一個元素(圖示)。