<!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>
- 1
- 2
前往页