⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 divmenu.html

📁 Js Menu and Tree 利用相同的数据实现menu和tree的例子
💻 HTML
字号:
🔍 
<!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>Menu Bar Widget</title>

<link href="includes/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="includes/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<link href="includes/gavinTree.css" rel="stylesheet" type="text/css" />
<script src="includes/gavinTree.js" type="text/javascript"></script>
<link href="samples.css" rel="stylesheet" type="text/css" />
<script src="includes/SpryMenuBar.js" type="text/javascript"></script>
<script src="includes/DivMenuBar.js" type="text/javascript"></script>

<style>

#menuContainer span 
{
	margin: 0;
	padding: 2px;
	padding-left: 22px;
	display: block;
	background-position: 0% 50%;
	background-repeat: no-repeat;
}
br
{
	clear:both;
}
-->
</style>
</head>
<body>
<h3>Menu Bar Sample</h3>
<!--
type = 'MenuBarHorizontal'    菜单项水平排布(默认)
type = 'MenuBarVertical'      菜单项垂直排布
-->

<div id="menuContainer" type='MenuBarHorizontal' menuClick='menuClick'></div>
<br >
<div id="treeContainer" treeClick='treeTitleClick'></div>

<script type="text/javascript">
<!--
var divData = "" +
		"<div id='menu1' label='1' value='1' backgroundImage='url(images/home.gif)'></div>" +
		"<div id='menu2' label='2' value='2'  backgroundImage='url(images/home.gif)'></div>"+
		"<div id='menu3' label='3' value='3'  backgroundImage='url(images/home.gif)'>"+
			"<div id='menu31' label='3-1'  value='31' backgroundImage='url(images/home.gif)'></div>"+
			"<div id='menu32' label='3-2'  value='32' backgroundImage='url(images/home.gif)'></div>"+
			"<div id='menu33' label='3-3'  value='33' backgroundImage='url(images/home.gif)'>"+
				"<div id='menu331' label='3-3-1'  value='331' backgroundImage='url(images/home.gif)'></div>"+
				"<div id='menu332' label='3-3-2'  value='332' backgroundImage='url(images/home.gif)'></div>"+
				"<div id='menu333' label='3-3-3'  value='333' backgroundImage='url(images/home.gif)'></div>"+
			"</div>"+
		"</div>"+
		"<div id='menu4' label='4'  value='4' backgroundImage='url(images/home.gif)'>"+
			"<div id='menu41' label='4-1'  value='41' backgroundImage='url(images/home.gif)'></div>"+
			"<div id='menu42' label='4-2'  value='42' backgroundImage='url(images/home.gif)'></div>"+
			"<div id='menu43' label='4-3'  value='43' backgroundImage='url(images/home.gif)'></div>"+
		"</div>";
	
//从示例数据生成菜单
var MenuBar = initHTMLMenu("menuContainer",divData);

//从示例数据生成树
var tree = new gavinTree("treeContainer",divData);

function menuClick(obj)
{
	var a = obj.getElementsByTagName("A")[0];
	alert("menu::" + a.getAttribute("label"));
}

function treeTitleClick(obj)
{
	alert("tree::" + obj.getAttribute("label"));
}


//-->
 </script>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -