dojo [Widgets]

前端之家收集整理的这篇文章主要介绍了dojo [Widgets]前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
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">
原文链接:https://www.f2er.com/dojo/291981.html

猜你在找的Dojo相关文章