`
- 浏览:
328045 次
- 性别:
-
我是在网上找的压缩包,很难下载,我上传附件了,大家可以自行下载,其中树的实现有两种方法:
第一种tree是完全用YUI3 的JS脚本库写出来的,tree节点是写死的,具体代码如下:
<div style="margin: 20px; float: left; clear: both;">
<h3>Simple tree from config</h3>
<div id="cattree1" style="min-width:350px; min-height:200px; padding-right: 20px; padding-bottom: 20px; border: 1px solid gray;"></div>
<p id="clickme1" style="cursor:pointer; margin-bottom:10px;">Click me to add node</p>
<p id="unclickme1" style="display:none; cursor:pointer; margin-bottom:10px;">Click me to remove node</p>
<ul id="report1"></ul>
</div>
<script>
YUI().use("gallery-yui3treeview-ng", function(Y) {
var treeview = new Y.TreeView({
startCollapsed: true,
children: [ {
label: "Root",
children: [
{
label : "sub 1",
children : [
{ label: "sub 1-1"},
{ label: "sub 1-2"},
]
},
{
label : "sub 2",
children : [
{ label: "sub 2-1"},
{
label: "sub 2-2",
children: [
{ label: "sub 2-2-1" },
{ label: "sub 2-2-2" }
]
},
]
}
]
}]
});
treeview.render("#cattree1");
var r = Y.one("#report1");
treeview.on("nodeclick", function(e) {
var node = e.treenode;
r.setContent("");
r.appendChild("<li>You clicked " + (node.get("isLeaf") ? "leaf" : "node") + " " + node.get("label"));
r.appendChild("<li>Path to root is: " + node.path().join(" > "));
r.appendChild("<li>State is: " + (node.get("collapsed") ? "collapsed" : "expanded") );
});
Y.one("#clickme1").once("click", function (e) {
treeview.add({
label: "foster-child"
})
e.target.remove(true);
Y.one("#unclickme1").setStyle("display", "block");
});
Y.one("#unclickme1").once("click", function (e) {
treeview.remove(1);
e.target.remove(true);
});
});
</script>
第二种tree 是用ul li标签写在页面中的,具体树的展开收缩功能是用YUI3的JS库控制的,代码如下:
<!-- Tree from markup -->
<div style="margin: 20px; float: left; clear: both;">
<h3>Simple tree from markup</h3>
<div id="cattree2" style="min-width:350px; min-height:200px; padding-right: 20px; padding-bottom: 20px; border: 1px solid gray;">
<ul>
<li><a><span>Root</span></a>
<ul>
<li><a><span>sub 1</span></a>
<ul>
<li><a><span>sub 1-1</span></a></li>
<li><a><span>sub 1-2</span></a></li>
</ul>
</li>
<li><a><span>sub 2</span></a>
<ul>
<li><a><span>sub 2-1</span></a></li>
<li><a><span>sub 2-2</span></a>
<ul>
<li><a><span>sub 2-2-1</span></a></li>
<li><a><span>sub 2-2-2</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<p id="clickme2" style="cursor:pointer">Click me to render tree above!<br><br></p>
<div>
<script>
YUI().use("gallery-yui3treeview-ng", function(Y) {
Y.one("#clickme2").once("click", function(e) {
var treeview = new Y.TreeView({
startCollapsed: false,
srcNode: "#cattree2 > ul" // Its important to set srcNode as a <ul> of the main widget container
});
treeview.render();
e.target.remove(true);
});
});
</script>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
yui3-master.zip
基于yui的layout,tree的一个demo
基于YUI3的dialog组件该组件是基于YUI3开发的,功能强大,详细见http://www.qiqicartoon.com
YUI教程YUI 入门教程YUI 入门教程YUI 入门教程
YAHOO YUI 中文文档 AJAX 详细 比较好用
YUI3 引入了粒度更细的模块管理方式,通过异步 HTTP 请求加载模块、然后执行回调来加载和使用模块。现场有很多人提出疑问,大家无非关心的是“效率”二字。个人以为在现阶段,这种方式有一点激进,否能为广大用户所...
从YUI2到YUI3看前端的演变
Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。
里面包含了YUI的所有实例(element、event等一系列的实例)
dwr-yui实现分页,dwr-yui实现分页,dwr-yui实现分页
YUI中文文档 详细介绍YUI的使用,真的是中文,真的是中文。
利用Yahoo YUI库做的一个TREE实例,很详细的阐述了YUI的使用原理
YUI Compressor 任务时出现了中文乱码,请下载此资源,用这里边 dist 目录里边的 YUIAnt-zh_CN.jar 替换掉官方提供的 YUIAnt.jar ,然后在对应的 Ant 任务中,用 encoding="xxx" 指定源文件的字符编码集即可。
yui对于开发者来说是绝对的好用,开发者福利,特献上最新版
JavaScript是一种最初由Netscape的LiveScript发展而来的面向对象的Web脚本语言,被ECMA国际定义为国际化标准——ECMAScript。JavaScript具有使用局限性。在Web方面,其必须与各种DOM技术结合才能发挥作用。因此,...
YUI 库,全称Yahoo! UI Library。是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等...YUI 项目包括YUI 库和两个创建时工具: YUI Compressor (压缩) 和 YUI Doc (JavaScripts代码的文档引擎)。
NULL 博文链接:https://ttwang.iteye.com/blog/1741592
yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...