jbar 是一個能把 ul li 清單轉換成選單工具列的套件。且若 li 裡面還有子選單時,也會出現箭頭提示並提供點選展開喔!
套件名稱:jbar
套件版本:0.2.0
作者網站:https://github.com/javan/jbar
套件網址:N/A
發佈日期:2011-07-02
檔案大小:4.33 KB
檔案下載:jquery.jbar.js jbar.css
參數選項說明:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | cssClass(選填) 描述: 要套用的 CSS 樣式 預設值: 'jbar' downArrow(選填) 描述: 向下的箭頭符號 預設值: '▼' upArrow(選填) 描述: 向上的箭頭符號 預設值: '▲' showSubmenuEvent(選填) 描述: 觸發顯示子選單的事件 預設值: 'click' fixIEzindex(選填) 描述: 是否修正 IE z-index 的問題 預設值: true |
方法說明:
檢視原始碼 JavaScript
1 2 | // 把指定的 ul 元素轉變成選單工具列 $(selector).jbar(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 | <script type="text/javascript" src="jquery.js"></script> <link type="text/css" rel="stylesheet" href="jbar.css" /> <script type="text/javascript" src="jquery.jbar.js"></script> <script type="text/javascript"> $(function(){ $('.jbar').jbar(); }); </script> <body> <ul class="jbar"> <li> <a href="#">jQuery 相關網站</a> <ul> <li><a href="http://jquery.com">jQuery</a></li> <li><a href="http://jqueryui.com">jQuery UI</a></li> <li><a href="http://jquerymobile.com">jQuery Mobile</a></li> </ul> </li> <li> <a href="http://jquery.com">jQuery UI</a> </li> <li> <a href="http://jquery.com"><em>jQuery</em> 相關網站</a> <ul> <li><a href="http://jquery.com">jQuery</a></li> <li><a href="http://jqueryui.com">jQuery UI</a></li> <li><a href="http://jquerymobile.com">jQuery Mobile</a></li> </ul> </li> <li> <ul> <li><a href="http://jquery.com">jQuery</a></li> <li><a href="http://jqueryui.com">jQuery UI</a></li> <li><a href="http://jquerymobile.com">jQuery Mobile</a></li> </ul> </li> </ul> </body> |
請問~要如何解決uparrow在IE裡面無法看到陰影呢? 謝謝