dojo [Widgets]

发布时间：2020-12-16 21:55:28 所属栏目：百科来源：网络整理

导读：1，创建Widgets: dojo可以这样创建Wedgets: input dojoType = "ComboBox" value="default" dataUrl "comboBoxData.js" Click me var myButton = dojo.widget.byId("foo"); 也可以这样创建：创建一个Editor并显示： var editor = dojo.widget.createWidget("

1，创建Widgets:
dojo可以这样创建Wedgets:

 
 
  
  <input dojoType="ComboBox" value="default" dataUrl"comboBoxData.js">

var myButton = dojo.widget.byId("foo");

也可以这样创建：

创建一个Editor并显示：
var editor = dojo.widget.createWidget("Editor2",{ });
document.body.appendChild(editor.domNode);

创建时使用properties:
var btn = dojo.widget.createWidget("Button",{ label: "Press me",disabled: false });


带innerHTML的Wedgets：
 var srcNode = document.createElement("div");
 srcNode.innerHTML="This is my content";
 var btn = dojo.widget.createWidget("Dialog",{},srcNode);

菜单：
 var menu = dojo.widget.createWidget("PopupMenu2",{targetNodeIds: ["test1","test2","testwithindiv"]});
 menu.addChild(dojo.widget.createWidget("MenuItem2",{caption: "MENU 1"}));
 menu.addChild(dojo.widget.createWidget("MenuItem2",{caption: "MENU1-Item 1"}));
 menu.addChild(dojo.widget.createWidget("MenuItem2",{caption: "MENU1-Item 2"}));


2,与Widgets交互

创建后的Wedgets可以这样取得引用：
var myButton = dojo.widget.byId("foo");
当然创建的时候本身就可以得到引用：
var myButton = dojo.widget.CreateWidget("Button",{caption: "click me"});

设置Widgets属性：
myButton.setCaption("Don't press me!!");
注意象下面那样做事没有用的，因为Widgets并不知道属性变了：
myButton.caption="this won't do anything";

另外：disable属性用disable()/enable() 函数来设置

两个重要的只读属性：

domNode - points to the node that replaced your original markup (the [button] tag in the example above)
containerNode - points to the node that contains the contents of the original markup ("Click me" in the example above)

form1.appendChild(btn.domNode);

3，给Widgets注册事件
可以这样： <button dojoType="Button" onClick="alert('hello world')">
注意：不像dom事件是全部小写的
以前已经学习过使用connect来注册事件监听器了。

dojo.event.connect(myButton,onValueChanged,function(x){
 alert("new val is " + x);
});

4，Widgets的显示和隐藏

myButton.show() - 显示
myButton.hide() - 隐藏
myButton.toggle() - 转换显示/隐藏
isShowing() - 判断Widgets现在是否正在显示?

在隐藏和显示切换的时候可以用4种动画：

plain
fade
wipe
explode（经常用于tooltip）

这样设置：
<div dojoType="FloatingPane" toggle="fade" toggleDuration="250">

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!