jQuery+ul+javascript实现的跨浏览器多级菜单资源-CSDN文库

共8个文件

gif：4个

js：2个

db：1个

jQuery+ul

跨浏览器

javascript

5星 · 超过95%的资源需积分: 10 98 浏览量 2010-01-25 22:45:27 上传评论收藏 24KB RAR 举报

/** * ///////////////////////////////////////////////// * * jQuery+ul 实现的跨浏览器菜单树 * 通过测试浏览器 ie6.0+,firefox3.5,safari3.2,opera10.0,Chrome4.0 * jquery版本：1.3.2 * * * * 用法: * // 构造菜单树对象 * var themenuTree = $("#thetree").makeTree({type:"1"}); * * // 添加菜单项 * themenuTree.addItem ( {id:"0151",pid:"015",title:"菜单项一",click:menuItemClick,data:""} ); * themenuTree.addItem ( {id:"01511",pid:"0151",title:"子菜单项",click:menuItemClick,data:""} ); * * // 获取菜单树选中项的 data 数据 * var val = themenuTree.value(); * * 说明: * 在容器对象 #thetree 上调用 makeTree(option)来构造菜单对象,再调用 addItem 方法添加菜单项 * * 菜单树对象方法： * * makeTree 方法,构造菜单树对象 * json 参数: * @param fold: boolean 菜单初始状态 true 折叠 false 打开,默认为 true * @param close: boolean 打开菜单项时是否关闭不相关的菜单 true 关闭 false 不关闭,默认为 false * @param icon: boolean 是否显示前置图标 true 显示 false 不显示,默认为 true * @param type: string 菜单类型,可取值有 1 树形菜单 2 多选树形菜单 3 单选树形菜单 4 横向弹出菜单 5 导航菜单 ,默认为 1 * @param closedImg: string 折叠状态图标路径 * @param openedImg: string 打开状态图标路径 * @param rightImg: string 右指向箭头图标路径 * @param downImg: string 下指向箭头图标路径 * @param overCss: string 菜单项移入样式类,默认为 .overCss{background-color:green;} * @param outCss: string 菜单项移出样式类,默认为 .outCss{background-color:yellow;} * @param activeCss: string 菜单项活动样式类 * @return 菜单树对象 * * addItem 方法,添加菜单项 * json 参数: * @param id: string 菜单项id * @param pid: string 父项id * @param title: string 显示标题 * @param click: function 单击事件处理方法 * @param data: object 附加数据 * * value 方法,获取菜单树选中菜单项的 data 数据 * @param all: boolean true 返回所有选中菜单项,false 只返回叶节点菜单项 * @return array * * ////////////////////////////////////// * */

资源推荐

资源详情

资源评论

收起资源包目录

ctree.rar （8个子文件）

ctree

right.gif 56B

demo.html 6KB

CTree.min.js 8KB

jquery-1.3.2.min.js 56KB

Thumbs.db 4KB

opened.gif 67B

closed.gif 72B

down.gif 53B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jquery+ul跨浏览器菜单</title> <SCRIPT src="./jquery-1.3.2.min.js" type=text/javascript></SCRIPT> <SCRIPT src="./CTree.min.js" type=text/javascript></SCRIPT> </head> <body> <script type="text/javascript"> jQuery(function($) { //　单击事件处理方法 var itemClick = function(item){ //alert(item.id) }; themenuTree1 = $("#thetree1").makeTree({type:"1"}); themenuTree2 = $("#thetree2").makeTree({type:"2"}); themenuTree3 = $("#thetree3").makeTree({type:"3"}); themenuTree4 = $("#thetree4").makeTree({type:"4"}); themenuTree5 = $("#thetree5").makeTree({type:"5"}); menuitem = {id:"015001",pid:"015",title:"菜单项一",click:itemClick,data:"菜单项一"}; themenuTree1.addItem(menuitem); themenuTree2.addItem(menuitem); themenuTree3.addItem(menuitem); themenuTree4.addItem(menuitem); themenuTree5.addItem(menuitem); menuitem = {id:"015005",pid:"015",title:"菜单项二",click:itemClick,data:"菜单项二"}; themenuTree1.addItem(menuitem); themenuTree2.addItem(menuitem); themenuTree3.addItem(menuitem); themenuTree4.addItem(menuitem); themenuTree5.addItem(menuitem); menuitem = {id:"015010",pid:"015",title:"菜单项三",click:itemClick,data:"菜单项三"}; themenuTree1.addItem(menuitem); themenuTree2.addItem(menuitem); themenuTree3.addItem(menuitem); themenuTree4.addItem(menuitem); themenuTree5.addItem(menuitem); menuitem = {id:"015048",pid:"015",title:"菜单项四",click:itemClick,data:"菜单项四"}; themenuTree1.addItem(menuitem); themenuTree2.addItem(menuitem); themenuTree3.addItem(menuitem); themenuTree4.addItem(menuitem); themenuTree5.addItem(menuitem); menuitem = {id:"015001001",pid:"015001",title:"子菜单项一11",click:itemClick,data:"子菜单项一11"}; themenuTree1.addItem(menuitem); themenuTree2.addItem(menuitem); themenuTree3.addItem(menuitem); themenuTree4.addItem(menuitem); themenuTree5.addItem(menuitem); menuitem = {id:"015001002",pid:"015001001",title:"子菜单项一111",click:itemClick,data:"子菜单项一111"}; themenuTree1.addItem(menuitem); themenuTree2.addItem(menuitem); themenuTree3.addItem(menuitem); themenuTree4.addItem(menuitem); themenuTree5.addItem(menuitem); menuitem = {id:"015001003",pid:"015001001",title:"子菜单项一111",click:itemClick,data:"子菜单项一111"}; themenuTree1.addItem(menuitem); themenuTree2.addItem(menuitem); themenuTree3.addItem(menuitem); themenuTree4.addItem(menuitem); themenuTree5.addItem(menuitem); menuitem = {id:"015001024",pid:"015001",title:"子菜单项一22",click:itemClick,data:"子菜单项一22"}; themenuTree1.addItem(menuitem); themenuTree2.addItem(menuitem); themenuTree3.addItem(menuitem); themenuTree4.addItem(menuitem); themenuTree5.addItem(menuitem); menuitem = {id:"015001006",pid:"015001024",title:"子菜单项一222",click:itemClick,data:"子菜单项一222"}; themenuTree1.addItem(menuitem); themenuTree2.addItem(menuitem); themenuTree3.addItem(menuitem); themenuTree4.addItem(menuitem); themenuTree5.addItem(menuitem); menuitem = {id:"015001007",pid:"015001006",title:"子菜单项一2222",click:itemClick,data:"子菜单项一2222"}; themenuTree1.addItem(menuitem); themenuTree2.addItem(menuitem); themenuTree3.addItem(menuitem); themenuTree4.addItem(menuitem); themenuTree5.addItem(menuitem); menuitem = {id:"01500100733",pid:"015001007",title:"子菜单项一22222",click:itemClick,data:"子菜单项一2222"}; themenuTree1.addItem(menuitem); themenuTree2.addItem(menuitem); themenuTree3.addItem(menuitem); themenuTree4.addItem(menuitem); themenuTree5.addItem(menuitem); menuitem = {id:"015014001",pid:"015005",title:"子菜单项二11",click:itemClick,data:"子菜单项二11"}; themenuTree1.addItem(menuitem); themenuTree2.addItem(menuitem); themenuTree3.addItem(menuitem); themenuTree4.addItem(menuitem); themenuTree5.addItem(menuitem); menuitem = {id:"015014002",pid:"015005",title:"子菜单项二11",click:itemClick,data:"子菜单项二11"}; themenuTree1.addItem(menuitem); themenuTree2.addItem(menuitem); themenuTree3.addItem(menuitem); themenuTree4.addItem(menuitem); themenuTree5.addItem(menuitem); menuitem = {id:"015014003",pid:"015010",title:"子菜单项三11",click:itemClick,data:"子菜单项三11"}; themenuTree1.addItem(menuitem); themenuTree2.addItem(menuitem); themenuTree3.addItem(menuitem); themenuTree4.addItem(menuitem); themenuTree5.addItem(menuitem); //$("#show").val(themenuTree3.html()) }); </script> <span style="display:inline-block;width:280px">菜单类型一</span><span style="display:inline-block;width:280px">菜单类型二</span>菜单类型三<br><br> <div id="thetree1" style="float:left;width:250px;margin-right:30px;"></div> <div id="thetree2" style="float:left;width:250px;margin-right:30px;"></div> <div id="thetree3" style="float:left;width:250px;"></div> <br/><br/><br/><br/><br/><br/><br/><br/><br/> <span style="display:inline-block;width:380px">菜单类型四</span>菜单类型五<br><br> <div id="thetree4" style="float:left;width:350px;margin-right:30px;"></div> <div id="thetree5" style="float:left;width:350px;margin-right:30px;"></div> </body> </html>

评论收藏

内容反馈