<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Mootools - Sortable nested lists</title>
<link rel="stylesheet" href="mootree.css" type="text/css" media="screen" />
<script type="text/javascript" src="mootools.v1.11.js"></script>
<script type="text/javascript" src="mootree(_moro_based).js"></script>
<script type="text/javascript">
//<![CDATA[
var DumpIt = function() {
var theDump = tree.serialize();
$('debug').setHTML(Json.toString(theDump));
};
var tree;
function createTree(el){
tree = new MooTreeControl({
div: el,
mode: 'files',
grid: true,
onClick: function(node) {
$('events').innerHTML += "<b>Tree Event:</b> " + node.data['href'] + " clicked<br />";
},
nodeOptions: {
text: 'Root Node',
open: true,
drag: false,
drop: false
}
});
//import <ul> structure
tree.adopt('adoptme');
// lock root node for modifications
tree.root.lock = true;
// update root node
tree.root.update();
$('dump').addEvent('click', DumpIt);
}
window.addEvent('domready',function() {
createTree('mytree');
});
//]]>
</script>
</head>
<body>
<h1>Advanced MooTree</h1>
<h2>Example:</h2>
<p>Mouse over the little icon before the folder/file icon to see the tools menu.</p>
<p>Beside the tools menu its now possible to:<br/>
<ul>
<li>prevent a node from being dragged: drag:false</li>
<li>prevent a node from being a drop node: drop:false</li>
<li>prevent a node from being modified(keep structure intact): lock:true</li>
</ul>
<br/>The tools menu is render based in those flags:<br/>
<ul>
<li>if the node.parent is locked(lock:true) then the node is not electable for drag or for remove and the tools menu is empty</li>
<li>if the node is locked(lock:true) then isn't possible to add more nodes(either folder or file)</li>
</ul>
</p>
<div style="float:left; width:50%">
<div id="mytree" style="position:relative;width:350px;height:300px;overflow:auto;"></div>
<ul id="adoptme">
<li href="node_one.html">Subnode 1</li>
<li href="node_two.html">Subnode 2
<ul>
<li href="test.html" target="this_is_a_sample_target">Subnode 2.1</li>
<li href="test2.html" title="This is a sample title">Subnode 2.2
<ul>
<li href="test.html">Subnode 2.2.1
<ul>
<li href="test.html">Subnode 2.2.1.1</li>
</ul>
</li>
</ul>
</li>
<li href="test2.html">Subnode 2.3</li>
</ul>
</li>
<li href="node_three.html"><!-- drag:false; drop:false; icon:_doc; color:#ff0000 -->Subnode 3</li>
<li href="node_three.html">Subnode 4</li>
</ul>
<hr />
These values will be used to create folders or files.
<br />
ID: <input type="text" name="id" id="id" value="item12" /><br />
Text: <input type="text" name="text" id="text" value="Item 12" /><br />
<hr />
<input type="button" name="dump" id="dump" value="Dump" />
<pre id="debug"></pre>
</div>
<div style="float:right">
<p id="events">
<i>Recorded events will be displayed below:</i><br />
</p>
</div>
</body>
</html>
基于mootools的菜单Mootree
5星 · 超过95%的资源 需积分: 0 28 浏览量
2008-05-10
14:13:03
上传
评论
收藏 68KB ZIP 举报 
MooTreeAdvanced.zip （12个子文件） 
MooTreeAdvanced 
mootree(_moro_based).js 52KB
mootree.gif 1KB tools.ico 638B mootree_loader.gif 584B AdvMooTree.htm 3KB addfolder.ico 1KB List2.htm 4KB mootree.css 771B mootools.v1.11.js 179KB sample_icons.gif 459B addfile.ico 1KB eliminar.ico 1KB资源评论
cisky2012-07-18支持moo控件，不过现在看来还是有点臃肿了，可以改改。
