<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
??? "<html>
??? <head>
??????? <title>Untitled Document</title>
??????? <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
???
??? <script type="text/javascript">
??????? var djConfig = {isDebug: true, debugAtAllCosts: true };
??? </script>
??? <script type="text/javascript" src="../../../dojo.js"></script>
??? <script type="text/javascript">
???
??????? dojo.require("dojo.widget.*");
??????? dojo.require("dojo.widget.TreeV3");
??????? dojo.require("dojo.widget.TreeNodeV3");
??????? dojo.require("dojo.widget.TreeBasicControllerV3");
???????
??????? dojo.require("dojo.widget.TreeDocIconExtension");
???????
??????? ?dojo.require("dojo.widget.TreeSelectorV3");
?????dojo.require("dojo.widget.TreeEmphasizeOnSelect");
?????dojo.require("dojo.widget.TreeExpandOnSelect");
?????dojo.require("dojo.widget.TreeToggleOnSelect");
?????
?????//樹的節點做超級連接。
?????//加div以及在節點寫object="href:http://...".
?????dojo.require("dojo.widget.TreeLinkExtension");
?????
?????//內容不折行
?????dojo.require("dojo.widget.TreeDisableWrapExtension");
?????
?????//拖動
?????dojo.require("dojo.widget.TreeDndControllerV3");
?????//上下文菜單
?????dojo.require("dojo.widget.TreeContextMenuV3");
?????//這個是用來綁定上下文菜單和controller事件的。需要擴展,缺少clone等方法。
?????dojo.require("dojo.widget.TreeDemo");
?????//菜單標簽編輯器
?????dojo.require("dojo.widget.TreeEditor");
?????
?????
??????? dojo.hostenv.writeIncludes();
???
??? ??//兩種結合方式
??? ??//基于方法
??? ??var selectAction = function() {???
???????? return function(message) {
???????????? alert(message.node);
???????? }
???? ?}
???? ?//基于類
??? ??
??? ??var selectClass = function() {???
???????? this.go = function(message) {
??????????? alert(message.node.widgetId);???????
??????????? alert(message.node.isFolder);
????????? }
???? ?}
???? ?
???
??? ??dojo.addOnLoad(function(){
????
??????? /* Add debug print for all controller events */
??????? var selector = dojo.widget.manager.getWidgetById('selector');
??????? //綁定消息的兩種方式。
??????? //dojo.event.topic.subscribe(selector.eventNames['select'],selectAction());
??????? dojo.event.topic.subscribe(selector.eventNames['select'],new selectClass(),'go');
???????
??????? //將上下文菜單和控制器進行綁頂。
??????? dojo.addOnLoad(function() { dojo.widget.TreeDemo.bindDemoMenu(dojo.widget.byId("controller")) });
???});
???
???//展開層次,注意回調接口。
???function testExpandToLevel(level) {
????var d = dojo.widget.byId('controller').expandToLevel(dojo.widget.byId('tree'),level);
????//dojo.widget.byId('treeController').expandToLevel(dojo.widget.byId('Item 1.3'),3)
????//d.addCallback(function() { alert('done') });
???}
???//添加新的節點
???function testCreate() {
????var d = dojo.widget.byId('controller').createChild(dojo.widget.byId('Item 1'),1,{title:'tttttttttttttttttttttttttttttttttttttttt'});??
????//d.addCallbacks(printOk, printErr);
???}
???
???//編輯節點。
???function testEdit() {
????dojo.widget.byId('controller').editLabelStart(dojo.widget.byId('Item 1'));
???}
??? ??
???//節點的contentClass可以改變標題內容。
???//TreeDocIconExtension:在每個項上加圖標。改變docIcon的class。
??? </script>
??? <style>
??????? .myCssClass {
???? ?font-family: Arial, Helvetica, sans-serif;
??????????? font-size: 18px;
??????? }
??? </style>
??? </head>
??? <body>
??????? <div dojoType="TreeEditor" widgetId="editor"></div>
???????
??????? <div dojoType="TreeDocIconExtension" widgetId="docIcons"></div>
??????? <div dojoType="TreeBasicControllerV3" widgetId="controller" editor="editor"></div>
???????
??????? <div dojoType="TreeSelectorV3" allowedMulti="false" widgetId="selector"></div>?
????<div dojoType="TreeEmphasizeOnSelect" selector="selector"></div>
????
????<div dojoType="TreeExpandToNodeOnSelect" selector="selector" controller="controller"></div>???
????<div dojoType="TreeToggleOnSelect" selector="selector" selectEvent="dblselect" controller="controller"></div>
????
????<div dojoType="TreeLinkExtension" widgetId="link" params="target:_blank"></div>?
???????
??????? <div dojoType="TreeDisableWrapExtension" widgetId="disableWrap"></div>
????
????<div dojoType="TreeDndControllerV3" controller="controller" widgetId="dndcontroller"></div>
????
??????? <div dojoType="TreeContextMenuV3" toggle="explode" contextMenuForWindow="false" widgetId="contextMenu">
?????<div dojoType="TreeMenuItemV3" treeActions="addChild" iconSrc="../images/createsmall.gif" widgetId="treeContextMenuCreate" caption="Create"></div>
?????<div dojoType="TreeMenuItemV3" treeActions="remove" iconSrc="../images/removesmall.gif" caption="Remove" widgetId="treeContextMenuDestroy"></div>
?????<div dojoType="TreeMenuItemV3" treeActions="move" iconSrc="../images/downsmall.png" caption="Up" widgetId="treeContextMenuUp"></div>
?????<div dojoType="TreeMenuItemV3" treeActions="move" iconSrc="../images/upsmall.png" caption="Down" widgetId="treeContextMenuDown"></div>
????</div>
???????
??????? <!-- 增加DND功能,在tree div中增加DndMode="between;onto" DndAcceptTypes="tree"-->
??????? <div dojoType="TreeV3" DndMode="between;onto" DndAcceptTypes="tree" listeners="controller;docIcons;selector;link;disableWrap;contextMenu;dndcontroller" widgetId="tree">
??????????? <div dojoType="TreeNodeV3" title="Item 1" object="href:http://news.sina.com.cn" widgetId="Item 1" contentClass="myCssClass">
??????????????? <div dojoType="TreeNodeV3" title="Item 1.1" widgetId="Item 1.1" contentClass="myCssClass"></div>
??????????????? <div dojoType="TreeNodeV3" title="Item 1.2" widgetId="Item 1.2" contentClass="myCssClass"></div>
??????????????? <div dojoType="TreeNodeV3" title="Item 1.3" widgetId="Item 1.3" contentClass="myCssClass">
??????????????????? <div dojoType="TreeNodeV3" title="Item 1.3.1" widgetId="Item 1.3.1" contentClass="myCssClass"></div>
??????????????????? <div dojoType="TreeNodeV3" title="Item 1.3.2" widgetId="Item 1.3.2" contentClass="myCssClass">
??????????????????????? <div dojoType="TreeNodeV3" title="Item 1.3.2.1" widgetId="Item 1.3.2.1" contentClass="myCssClass"></div>
??????????????????????? <div dojoType="TreeNodeV3" title="Item 1.3.3.2" widgetId="Item 1.3.3.2" contentClass="myCssClass">
??????????????????????????? <div dojoType="TreeNodeV3" title="Item 1.3.3.2.1" widgetId="Item 1.3.3.2.1" contentClass="myCssClass"></div>
??????????????????????? </div>
??????????????????? </div>
??????????????? </div>
??????????? </div>
??????????? <!-- node有actionsDisabled 屬性-->
??????????? <div dojoType="TreeNodeV3" actionsDisabled="MOVE" title="Can't move this node"></div>
??????????? <div dojoType="TreeNodeV3" actionsDisabled="ADDCHILD" title="Can't add child this node"></div>
??????? </div>
???????
???????
?????
???
???
???<div style="display:none">
????<!-- IE has a bug: it reloads all dynamically resolved images, no matter, is it
????new Image() or CSS background. If you don't specify images like that,
????it will reload them every time a node is expanded -->
????<img src="../../../src/widget/templates/images/TreeV3/i.gif">
????<img src="../../../src/widget/templates/images/TreeV3/i_half.gif">
????<img src="../../../src/widget/templates/images/TreeV3/expand_minus.gif">
????<img src="../../../src/widget/templates/images/TreeV3/expand_plus.gif">
????<img src="../../../src/widget/templates/images/TreeV3/expand_leaf.gif">
????<img src="../../../src/widget/templates/images/TreeV3/i_long.gif">
????<img src="../../../src/widget/templates/images/TreeV3/document.gif">
????<img src="../../../src/widget/templates/images/TreeV3/open.gif">
????<img src="../../../src/widget/templates/images/TreeV3/closed.gif">
???</div>?
???
???????
??????? <!-- 直接選擇一個節點,但是無法去掉已有的節點。 -->
??????? <input type="button" value="select Item 1" onClick="dojo.widget.byId('selector').select(dojo.widget.byId('Item 1'))"/>
??????? <input type="button" value="Expand to level 3" onClick="testExpandToLevel(100)"/>
??????? <input type="button" value="create new node" onClick="testCreate()"/>
??????? <input type="button" value="edit" onClick="testEdit()"/>
??? </body>
</html>