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

📄 mui.tree.html

📁 一套基于开源javascript framework mootools的UI
💻 HTML
字号:
🔍 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Mootools UI - tree demo</title>
    <script type="text/javascript" src="../mootools.v1.00.js"></script>
    <script type="text/javascript" src="../mui.tree.js"></script>
    <script type="text/javascript"><!-- <![CDATA[
	var tree = new MUI.Tree("Bla"),
	    tree1 = new MUI.Tree("other bla"),
	    node = new MUI.Node("Bla"),
	    node1 = new MUI.LinkNode("Bla1", "http://digg.com"),
	    node2 = new MUI.Node("Bla2");
	tree.addChild(node);
	tree.addChild(tree1);
	tree1.addChild(node1);
	tree1.addChild(node2);

	Window.addEvent("domready", function(){
	    //tree.render(true).injectInside(document.body);
	    //tree.expand(true);
	    /*var tree = new MUI.Tree().import($("t1"));
	    var newtree = tree.render();
	    $("t1").replaceWith(newtree);*/
	    var d2, d1 = new Date().valueOf();
	    $('t1').makeAsTree();
	    d2 = new Date().valueOf();
	    alert(d2-d1);
	});
    // ]]> --></script>
    <style type="text/css">/* <![CDATA[ */
    body{
	/*direction:rtl;*/
    }
    
    div.mui-tree{
    }
    
    div.mui-tree ul, div.mui-tree ul ul{
	border-left:1px dotted #000;
	list-style-type:none;
	padding:0;margin:0;
	margin-left:1.5em;
	display:block;
	font-size:0.9em;
    }
    
    div.mui-tree ul li{
	padding-left:3px;
	margin:2px 0;
	line-height:1.5em;
	vertical-align:top;
    }
    
    
    div.mui-treetitle{
	cursor: default;
    }
    
    div.mui-treetitle:before{
	content: '>>'
    }
    
    div.mui-treetitle:hover{
	background-color: yellow;
	display:inline;
	clear:both;
    }
    /* ]]> */</style>
</head>
<body>
    <div class="mui-tree" id="t1">
	<div class="mui-treetitle">Title</div>
	<ul>
	    <li><span>BlaBla</span></li>
	    <li><span>BlaBla</span></li>
	    <li>
		<div class="mui-tree">
		    <div class="mui-treetitle">Sub Title</div>
		    <ul>
			<li><span>BlaBla</span></li>
			<li><span>BlaBla</span></li>
			<li><span>BlaBla</span></li>
			<li>
			    <div class="mui-tree">
				<div class="mui-treetitle">Sub Title</div>
				<ul>
				    <li><span>BlaBla</span></li>
				    <li>
					<div class="mui-tree">
					    <div class="mui-treetitle">Sub Title</div>
					    <ul>
						<li><span>BlaBla</span></li>
						<li><span>BlaBla</span></li>
						<li><span>BlaBla</span></li>
						<li><span>BlaBla</span></li>
						<li><span>BlaBla</span></li>
						<li>
						    <div class="mui-tree">
							<div class="mui-treetitle">Sub Title</div>
							<ul>
							    <li><span>BlaBla</span></li>
							    <li>
								<div class="mui-tree">
								    <div class="mui-treetitle">Sub Title</div>
								    <ul>
									<li><span>BlaBla</span></li>
									<li><span>BlaBla</span></li>
								    </ul>
								</div>
							    </li>
							</ul>
						    </div>
						</li>
						<li><span>BlaBla</span></li>
					    </ul>
					</div>

				    </li>
				</ul>
			    </div>
			</li>
			<li><span>BlaBla</span></li>
		    </ul>
		</div>
	    </li>
	    <li><span>BlaBla</span></li>
	    <li><span>BlaBla</span></li>
	    <li>
		<div class="mui-tree">
		    <div class="mui-treetitle">Sub Title</div>
		    <ul>
			<li><span>BlaBla</span></li>
			<li>
			    <div class="mui-tree">
				<div class="mui-treetitle">Sub Title</div>
				<ul>
				    <li><a href="digg.com">BlaBla</a></li>
				    <li>
					<div class="mui-tree">
					    <div class="mui-treetitle">Sub Title</div>
					    <ul>
						<li><span>BlaBla</span></li>
						<li>
						    <div class="mui-tree">
							<div class="mui-treetitle">Sub Title</div>
							<ul>
							    <li><span>BlaBla</span></li>
							    <li><span>BlaBla</span></li>
							</ul>
						    </div>
						</li>
						<li><span>BlaBla</span></li>
					    </ul>
					</div>

				    </li>
				</ul>
			    </div>
			</li>
		    </ul>
		</div>
	    </li>
	</ul>
    </div>
</body>
</html>

⌨️ 快捷键说明

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