1,创建Widgets:
dojo可以这样创建Wedgets:
3,给Widgets注册事件
可以这样: <button dojoType="Button" onClick="alert('hello world')">
注意:不像dom事件是全部小写的
以前已经学习过使用connect来注册事件监听器了。
4,Widgets的显示和隐藏
<div dojoType="FloatingPane" toggle="fade" toggleDuration="250">
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)
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现在是否正在显示?
- plain
- fade
- wipe
- explode(经常用于tooltip)
<div dojoType="FloatingPane" toggle="fade" toggleDuration="250">