這個jquery 的dropdown list. 可以做到類似ipod 的drilldown 的做法。可以chowky 沒有用過ipod ，所以覺得有點新奇，所以分享給大家~
原來都幾易用呢~
可能大家都見過，不過呢~，近來~這個plugin 加入了去jquery ui 作為component，所以支援了apply 不同 theme 的能力，所以大家可以隨便換theme ，都幾好用呢~。
用法好簡單，html的basic structure 都是利用常用的 unorder list “ul” 和 “li”。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <!-- jQuery core --> <script type="text/javascript" src="fg.menu.js"></script> <!-- dropdown list plugin --> <link type="text/css" href="fg.menu.css" media="screen" rel="stylesheet" /> <!-- dropdown list style sheet --> <link type="text/css" href="theme/ui.all.css" media="screen" rel="stylesheet" /> <!-- jQuery UI theme --> <ul> <li><a href="#">Menu option</a></li> <li><a href="#">Menu option</a></li> <li><a href="#">Menu option</a> <ul> <li><a href="#">Child menu option</a></li> <li><a href="#">Child menu option</a></li> <li><a href="#">Child menu option</a></li> </ul> </li> <li><a href="#">Menu option</a></li> </ul> |
之後dom ready 時加上init 的code
1 2 3 4 5 6 7 8 | $(document).ready(function(){ $('#myMenuButton').menu({ content: $('#myContent').html(), maxHeight: 180, positionOpts: { offsetX: 10, offsetY: 20 }, showSpeed: 300 }); }); |
Demo 效果: http://www.filamentgroup.com/examples/menus/ipod.php
License: MIT and GPL
Source: http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
Recent Comments