查看文章 |
YUI的treeview组件——带checkbox类型的treeview如何实现disabled功能
2009-09-28 18:03
这两天要实现树形目录，功能中要求树形目录带checkbox，而且有默认状态，默认带勾选的，不允许取消。 YUI带checkbox的treeview是通过样式实现的，其实是不带input的，所以没办法实现disabled。选中状态其实是通过挂上高亮的class，treeview本身提供禁止高亮的功能，但一旦禁止，就显示不了勾选，所以不能使用yui的禁止高亮功能完成disabled。 写了个demo，可以模拟disabled功能。如下： ==================================================== <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>阿当制作</title> <script src="http://assets.taobaocdn.com/yui/2.7.0/build/yuiloader/yuiloader-min.js" type="text/javascript"></script> <script type="text/javascript"> var loader = new YAHOO.util.YUILoader(); </script> </head> <body class="yui-skin-sam"> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/treeview/assets/skins/sam/treeview.css" /> <div id="tree" class="ygtv-checkbox"> <ul> <li>1 <ul> <li>1-1</li> <li>1-2 <ul> <li>1-2-1</li> <li>1-2-2</li> </ul> </li> </ul> </li> <li myid="345">2</li> <li class="expanded">3 <ul> <li yuiConfig='{"highlightState":1}'>02/01/2009</li> <li>3-2</li> </ul> </li> </ul> </div> <input type="button" value="确定" id="btn" /> <script type="text/javascript"> function init(){ var tree1 = new YAHOO.widget.TreeView("tree"); tree1.subscribe('clickEvent',tree1.onEventToggleHighlight); tree1.setNodesProperty('propagateHighlightUp',true); tree1.setNodesProperty('propagateHighlightDown',true); tree1.render(); tree1.subscribe('dblClickEvent',tree1.onEventEditNode); var hiLit = tree1.getNodesByProperty('highlightState',1); if(YAHOO.lang.isArray(hiLit)){ for(var i=0,n=hiLit.length;i<n;i++){ hiLit[i].openFlag = true; } } tree1.subscribe("highlightEvent", function(node) { if(node.openFlag){ node.highlight(); } }); YAHOO.util.Event.on("btn","click",function(){ var hiLit = tree1.getNodesByProperty('highlightState',1); if(hiLit[0].isLeaf ){ alert(hiLit[0].index); } }); } </script> <script type="text/javascript"> loader.require(['dom', 'event','treeview','json']); if(init){ loader.onSuccess = init; } loader.insert(); </script> </body> </html> ============================================================== |
最近读者：
