dojo [Widgets]

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("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">