[jQuery] iPod-Like Dropdown List Sample

這個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/

Share
About Chowky
Chowky 希望可以透過這個blog 來分享自己學到的知識。亦希望可以分享最新的資訊。 IT 轉變得很快,要常常留意市場的變化,面對大陸的競爭,香港的 IT 方面的人才要更有市場觸覺,緊貼市塲走勢。因為其他地方的IT技術已經走得比以往更快。不進則退,就讓大家一起來交流、提昇IT的心得! Chowky 因為工作關係,所以一開始接觸的是visual basic, foxpro ( 這不代表我老 ) 之後是 .NET, MSSQL 和 Crystal Report. 由工作學到的project management, system analysis and design 以及 system testing, user acceptance tests and different documentations. 另外,由不同的freelance 方面學到dreamweaver, javascript, php, mysql. 後來興起CMS wave, Chowky 亦學會了Joomla! 以及常用的javascript framwork: jquery and mootool. 連deisgn 都要自己包辦,所以接觸了photoshop, illustrator, firework. 新的工作方面,要利用RIA -- Flex and AIR 方面的技術。所以緊接下來應該會多一點分享ria 方面的技術 Chowky 所說的未必是對的,但我深信我所說的是未來 IT Trend. 大家亦應抱著懷疑的態度去分析每一件事,未經思考不要輕易相信。

1 Comment

  1. I used to be suggested this blog through my cousin. I am not positive whether this
    publish is written by him as no one else recognize such detailed about my trouble.
    You are wonderful! Thank you!

Leave a Reply