发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
AI助手
留言交流
插件名:柯乐义英文名:Keleyijs文件名称:jquery.keleyi.js插件功能:该插件可以让你轻易地在页面上构建一个向上弹出的二级菜单。示例查看:http:///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) - </title><base target="_blank" /> 5 <script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> 6 <link href="http:///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://">Home</a></li> 22 <li><a href="http:///menu/webqd/">Web</a> 23 <ul> 24 <li><a href="http:///menu/javascript/">Javascript</a></li> 25 <li><a href="http:///menu/jquery/">jQuery</a></li> 26 <li><a href="http:///menu/html5/">HTML5</a></li> 27 </ul> 28 </li> 29 <li><a href="http:///keleyi/">Keleyi</a></li> 30 <li><a href="http:///keleyi/demo/">Demo</a> 31 <ul> 32 <li><a href="http:///keleyi/demo/1.htm">Demo 1</a></li> 33 <li><a href="http:///keleyi/demo/2.htm">Demo 2</a></li> 34 <li><a href="http:///keleyi/demo/3.htm">Demo 3</a></li> 35 <li><a href="http:///keleyi/demo/4.htm">Demo 4</a></li> 36 <li><a href="http:///keleyi/demo/5.htm">Demo 5</a></li> 37 <li><a href="http:///keleyi/demo/6.htm">Demo 6</a></li> 38 <li><a href="http:///keleyi/demo/7.htm">Demo 7</a></li> 39 </ul> 40 </li> 41 <li><a href="http:///keleyi/demo/8.htm">Demo 8</a></li> 42 <li><a href="http:///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/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/demo/keleyi.css" type="text/css" rel="Stylesheet" /> 2 <script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> 3 <script type="text/javascript" src="http:///keleyi/demo/jquery.keleyi.js"></script>
插件的使用二:从上面的代码看出,这个菜单的HTML代码非常简洁,格式如下:
1 <ul id="keleyi-menu"> 2 3 <li><a href="http://">主菜单项一</a></li> 4 <li><a href="http:///keleyi/">主菜单项二</a></li> 5 6 <li><a href="http:///keleyi/demo/">主菜单项三</a> 7 <ul> 8 <li><a href="http:///keleyi/demo/1.htm">子菜单项1</a></li> 9 <li><a href="http:///keleyi/demo/2.htm">子菜单项2</a></li> 10 <li><a href="http:///keleyi/demo/3.htm">子菜单项3</a></li> 11 <li><a href="http:///keleyi/demo/4.htm">子菜单项4</a></li> 12 <li><a href="http:///keleyi/demo/5.htm">子菜单项5</a></li> 13 <li><a href="http:///keleyi/demo/6.htm">子菜单项6</a></li> 14 <li><a href="http:///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>
来自: 昵称10504424 > 《工作》
0条评论
发表
请遵守用户 评论公约
div当滚动到页面顶部的时候固定在顶部实例代码
JQuery实现动态生成树形菜单
<li><span class="folder">Folder 1</span><li><span class="file">Item 1.1</span></li><li><span class="file"&...
Jquery实现图片左右滚动(自动)
向左滚动</span> <spanclass="next">向右滚动»</span> <span class="num"> <ol> <liclass="numcur">1</...
谁会成为下一个jQuery?十大最新JavaScript框架逐个看
十大最新JavaScript框架逐个看。目前jQuery在JavaScript框架中大红大紫,但除了想jQuery,MooTools,Prototype等等这些主流的JS框架外,...
Jquery鼠标右键点击弹出菜单
今天分享一个Jquery鼠标右键点击弹出菜单的组合功能。在项目中,主要是用在表格中,点击单元格, 弹出右键菜单,选择下一步的功能。 ...
js二级菜单
}/* tj_submain */.tj_submain{border:1px solid #c8d2e5;}.tj_submain .title{background:url("images/bg_01.gif") repeat-x 0 -38px;}.tj_submain li{width:181px;}.tj_submain li a{width...
我的jquery.easyui.1.3.3扩展库
我的jquery.easyui.1.3.3扩展库。这是个基于jQuery.easyui 1.3.3 的扩展,包括以前博客中写的扩展easyui.window和Easyui.datagrid扩展——仿Ext.grid rowediting编辑风格的实现,并对easyui.window扩展...
下载了jquery ui后如何使用
下载到jquery-ui-1.8.16.custom.zip是一个压缩包,我们将其解压到一个目录jquery-ui,打开目录后里面有一个叫index.html的,我们直接用浏览器打开可以看到里面已经放了很多的,jquery ui组件的实例,其...
jstree教程
jstree教程。<script type="text/javascript" src="jquery.jstree.js"></script>01.<html>02.&l...
微信扫码,在手机上查看选中内容