插件名：柯樂義
英文名：Keleyi
js文件名稱：jquery.keleyi.js
插件功能：該插件可以讓你輕易地在頁面上構建一個向上彈出的二級菜單。
示例查看：http://keleyi.com/keleyi/
更多示例：0 1 2 3 4 5 6 7 8 9 10 11 12
從示例可以看出，Keleyi這個菜單插件使用方便，可以靈活自定義多種樣式，包括顏色，位置，菜單項寬度等等。
下面給出一個示例的HTML文件代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Keleyi(jQuery Menu Plugin) - keleyi.com</title><base target="_blank" /> 5 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> 6 <link href="http://keleyi.com/keleyi/demo/keleyi.css" type="text/css" rel="Stylesheet" /> 7 <style> 8 body 9 { 10 margin: 0px; 11 overflow:scroll; 12 } 13 </style> 14 </head> 15 <body> 16 <div style="text-align:center"><h1>Keleyi</h1> 17 A jQuery Menu Plugin 18 </div> 19 <div style="height:360px;background-color:#66FF66;"></div> 20 <ul id="keleyi-menu"> 21 <li><a href="http://keleyi.com">Home</a></li> 22 <li><a href="http://keleyi.com/menu/webqd/">Web</a> 23 <ul> 24 <li><a href="http://keleyi.com/menu/javascript/">Javascript</a></li> 25 <li><a href="http://keleyi.com/menu/jquery/">jQuery</a></li> 26 <li><a href="http://keleyi.com/menu/html5/">HTML5</a></li> 27 </ul> 28 </li> 29 <li><a href="http://keleyi.com/keleyi/">Keleyi</a></li> 30 <li><a href="http://keleyi.com/keleyi/demo/">Demo</a> 31 <ul> 32 <li><a href="http://keleyi.com/keleyi/demo/1.htm">Demo 1</a></li> 33 <li><a href="http://keleyi.com/keleyi/demo/2.htm">Demo 2</a></li> 34 <li><a href="http://keleyi.com/keleyi/demo/3.htm">Demo 3</a></li> 35 <li><a href="http://keleyi.com/keleyi/demo/4.htm">Demo 4</a></li> 36 <li><a href="http://keleyi.com/keleyi/demo/5.htm">Demo 5</a></li> 37 <li><a href="http://keleyi.com/keleyi/demo/6.htm">Demo 6</a></li> 38 <li><a href="http://keleyi.com/keleyi/demo/7.htm">Demo 7</a></li> 39 </ul> 40 </li> 41 <li><a href="http://keleyi.com/keleyi/demo/8.htm">Demo 8</a></li> 42 <li><a href="http://keleyi.com/keleyi/demo/9.htm">Demo 9</a></li> 43 </ul> 44 <div style="height:900px; visibility: visible; background-color:Olive"> 45 </div> 46 <script type="text/javascript" src="http://keleyi.com/keleyi/demo/jquery.keleyi.js"></script> 47 <script type="text/javascript"> 48 $("#keleyi-menu").keleyi({ "item_width": "100px", "bar_position": "relative" 49 , "margin": "0px auto 0px 0px" 50 }); 51 </script> 52 </body> 53 </html>
插件的使用一：
使用這個插件,需要引用這3個文件(一個CSS文件，一個jQuery庫，和一個插件js文件)：
1 <link href="http://keleyi.com/keleyi/demo/keleyi.css" type="text/css" rel="Stylesheet" /> 2 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> 3 <script type="text/javascript" src="http://keleyi.com/keleyi/demo/jquery.keleyi.js"></script>
插件的使用二：
從上面的代碼看出，這個菜單的HTML代碼非常簡潔，格式如下：
1 <ul id="keleyi-menu"> 2 3 <li><a href="http://keleyi.com">主菜單項一</a></li> 4 <li><a href="http://keleyi.com/keleyi/">主菜單項二</a></li> 5 6 <li><a href="http://keleyi.com/keleyi/demo/">主菜單項三</a> 7 <ul> 8 <li><a href="http://keleyi.com/keleyi/demo/1.htm">子菜單項1</a></li> 9 <li><a href="http://keleyi.com/keleyi/demo/2.htm">子菜單項2</a></li> 10 <li><a href="http://keleyi.com/keleyi/demo/3.htm">子菜單項3</a></li> 11 <li><a href="http://keleyi.com/keleyi/demo/4.htm">子菜單項4</a></li> 12 <li><a href="http://keleyi.com/keleyi/demo/5.htm">子菜單項5</a></li> 13 <li><a href="http://keleyi.com/keleyi/demo/6.htm">子菜單項6</a></li> 14 <li><a href="http://keleyi.com/keleyi/demo/7.htm">子菜單項7</a></li> 15 </ul> 16 </li> 17 18 </ul>
插件的使用三：
然后就是定義菜單的代碼:
1 <script type="text/javascript"> 2 $("#keleyi-menu").keleyi({ "item_width": "100px", "bar_position": "relative" 3 , "margin": "0px auto 0px 0px" 4 }); 5 </script>
這樣就可以在頁面上顯示一個特別的向上彈出菜單了。