学习dojo[Widgets]
我的图书馆
学习dojo[Widgets]
可以说Web2.0的第一要素就是用户体验了，而用户最直观的就是Widgets。1，创建Widgets:dojo可以这样创建Wedgets:
& 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种动画：
explode（经常用于tooltip）
这样设置：&div dojoType="" toggle="fade" toggleDuration="250"&
TA的最新馆藏[转]&[转]&
喜欢该文的人也喜欢博客分类：
通过widgetid来获取dijit.from.Button对象：var dialogBtn=dijit.byId(dojo.query(".dialogBtn",viewRootNode)[0].getAttribute("widgetid"))
TitlePane title加链接：&div dojoType="dijit.TitlePane" open="false"
title="&a href='javascript:void(0);' &查询&/a&"&
注意dojoType与data-dojo-type的区别:
&div data-dojo-type="dijit.form.TextBox" data-dojo-props='name:"text"'&&/div&
关注Dojo以及前端技术:.cn/dojotoolkit
email验证：var regExpEmail = new RegExp(dojox.validate.regexp.emailAddress(false));
if(!regExpEmail.test(v)){
}使用regExp，blur里验证，不要使用validator(每点击就执行一次)
传递this对象，可以在cancelOpenMobileBank 函数里调用this:
dojo.hitch(this,func)
func中的this,跟hitch传入的是一个对象
使用dojo.mixin给一个对象增加方法或者属性：
dojo.mixin（obj ,function)
常用的 dojo.query 用法:
var viewRootNode2= dojo.query(".body .sery .downbtn.disabledbtn")[0];
dojo.query("#header & h1")
//ID 为 header 的元素的直接子节点中的 h3 元素 dojo.query("span[title^='test']")
// 属性 title 以字符串 test 开头的 span 元素 dojo.query("div[id$='widget']") // 属性 id 以字符串 widget 结尾的 div 元素 dojo.query("input[name*='value']")
// 属性 name 包含子串 value 的 input 元素 dojo.query("#myDiv, .error") // 组合查询，结果中包含 ID 为 myDiv 的元素和 CSS 类为 error 的元素 dojo.query(".") // 同时包含了 CSS 类 message 和 info 的元素，注意两个类之间不包含空格 dojo.query("tr:nth-child(even)") // 出现在父节点的偶数位置的 tr 元素 dojo.query("input[type=checkbox]:checked") // 所有选中状态的复选框 dojo.query(".message:not(:nth-child(odd))") // 嵌套子查询，选中包含 CSS 类 message，
//并且不出现在父节点的奇数位置的元素
callback && typeof callback == "function" && callback.call(scope);
var dh2Pane=dijit.byId(dojo.query(".dhPane", this.viewRootNode)[0].id);
dh2Pane.set("content","&p&我爱你！&/p&");
浏览: 676711 次
来自: 北京
推荐用StratoIO打印控件，浏览器和系统的兼容性都很好，而 ...
经过测试，假的，依旧会出现中文乱码！！！！store方法里面采 ...
上面不是有我写的例子吗，好长时间了，忘的差不多了，有可能&lt ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'posts - 424,&
comments - 23,&
trackbacks - 0
Dijit&s的_Widget和_WidgetBase胃创建widgets提供了一个极好的基础，但是_Templated的混合特性是Dijit真正出众的地方。用_TemplatedMixin，你可以快速创建高度可维护性、快速维护性和易操作的widgets。
_TemplatedMixin的基础概念是足够简单的：它允许开发者去创建一个带有一些小扩展的小HTML文件，在运行时加载这个HTML文件作为一个字符串，它被模板Widget的所有实例重用。
让我们穿行_TemplatedMixin所定义的(为什么)，然后用它的功能从头开始建造一个widget。
_TemplatedMixin所提供的
对工作开发者来说，把_TemplatedMixin混合进一个widget定义，因为要用外部的模板，这里值讨论下面这个一个属性：
templateString，//& a string representing the HTML of the template
用_TemplatedMixin
为了确保你自定义的widget是"templatable",所有你需要做的是为你的widget增加"dijit/_Templated"作为类声明数组的第二个参数。
例如，一个SomeWidget的widget可能会像这样声明：
require(["dojo/_base/declare", "dijit/_Widget", "dijit/_dijit/_TemplatedMixin", "dojo/text!./templates/SomeWidget.html"],
&&&&&&&&function(declare, _Widget, _Templated, template) {
&&&&return declare("example.SomeWidget", [_Widget, _Templated], {
&&&&&&&&templateString: template
注意：Dijit依附一个标准，通过在JavaScript声明的同一层级创建一个叫做"templates"的单独目录&&我们建议你在你自己的代码中遵循此标准。
注意在上面我们的声明中，我们用templateString属性与一个模板相连，此模板通过dojo/text!{path}来加载。这是设置引用到你模板文件的推荐方式，因为它确保了文件能够被异步加载和当创建一个Dojo工具箱的构建时能适度整合。
现在我们基于模板来建立我们的widget声明。让我们写一个模板和讨论一些特别在他们中可用的hooks。
一个模板就是一个HTML文档碎片，在里面你定义一个DOM结构，伴随任意特别的&hooks&，把事物返回到你的widget声明里。在我们投入到这些hooks中的每一个之前，看一个快速的例子，在一个模板里变量替换如何发生。这里是我们的SomeWidget的假想模板：
div class="${baseClass}" data-dojo-attach-point="focusNode" data-dojo-attach-event="ondijitclick:_onClick" role="menuitem" tabindex="-1"&
&&&&&span data-dojo-attach-point="containerNode"&&/span&
在简单的同事，这个模板展示了Dijit模板系统三个最重要的方面：变量替换、附着点、事件附着
注意：当你定义一个模板的时候，只能有一个根节点定义(就像XML文档)。在顶层的多节点是不被允许的。
一个模板通过使用简单的变量占位符语法把值设置在提供的DOM上，看起来像这个：
${property}
这个变量的名字是你的widget声明里的任何属性或者字段定义。上述的例子使用了baseClass属性(在任何widget都是可用的)，但是自定义字段也是一样的使用方法&例如，我们在我们的SomeWidget里定义了一个属性叫 foo，我们可以简单的使用${foo}在我们的模板里。如果这个属性碰巧是一个对象的引用，如果你想使用这个对象里的属性值，你可以很容易的做这个通过正常的对象引用符号：
${propertyObject.property}
为了预防_Templated中字符串的避免引号，可以再变量名称钱放置"!",像这样：
${!property}
注意：自从Dijit1.5起，在模板里使用变量替换仅仅为那些在widget生命周期中不会改变的那些值。如果你期望在应用程序编程阶段去设置值，我们建议你用widget的postCreate方法去设置任意的变量。
Dijit的模板系统有一个特别的属性，它可以再你的模板中找到，叫做data-dojo-attach-point，也就是附着点。当你用data-dojo-attach-point来定义一个DOM元素用时，可以在你的js文件中通过名字来直接引用这个节点元素。刚开始接触这个的时候，跟同事讨论，为什么不用id，然后在js文件中用document来获取或者dojo，dijit自带的方法获取，其实这样做有好处的的，避免了ID的冲突，因为在一个完整的应用中可能有多个widget，而id可能会相同，如果真有id相同那么通过document获取的就不知是哪一个了。例如：对于SomeWidget，模板定义 了两个DOM元素。在你的代码里，主元素可以通过属性focusNode引用，内部的span元素可以通过属性containerNode 来引用。
一般的，你模板的根节点变成你widget的domNode属性，因此一般在定义里不需要包含一个附着点属性。然而，有时候，在Dijit里这么做是允许跟节点也可以和其他子系统进行作用，诸如Dijit的焦点管理。
除了附着点之外，Dijit模板系统给你提供了一个把native 的DOM事件附着到你自定义widget里方法的方式。它通过使用
HTML5数据属性data-dojo-attach-event来实现。这是一个逗号隔开的键/值对(用冒号分割)字符串，键是附着控制器的native DOM事件，值是当事件发生时，你的widget需要执行的方法的名字。如果仅有一个单一的事件需要去控制，忽略最后的逗号。例如，这个是定义在Dijit MenuBarItem里的dojo-data-attach-event属性：
data-dojo-attach-event="onmouseenter:_onHover,onmouseleave:_onUnhover,ondijitclick:_onClick"
注意：我们定义在我们例子模板中的事件，ondijitclick,是由Dijit自己设置的一个修饰handler，支持额外的东西，一个普通的onclick事件
不需要捕获。一般来说，你可以在任何你想正常使用onclick的地方使用它
当你widget已经实例化，DOM碎片已经从你的模板创建，Dijit模板系统将会贯穿任意的事件定义，自动地从作为结果的DOM和你的widget对象中连接这些事件(用connect)&&使得它难以置信的简单去连接你的可视化表现和你的控制代码。另外，当这些事件控制器fired时，一般的，由native DOM事件机制传递的同样的参数将会沿着你的widget控制器传递，因此你有充分的访问报告的权利。
关于domNode和srcNode：
在自定义的widget中会用到domNode，其实这个domNode就是整个html模板文件，在dojo中只允许一个顶级节点也就是js文件中最后使用的domNode，类似xml文件中的根节点一样，而srcNode，这个其实是最原始的用来给domNode赋值用的，如果看过dojo的源码就可以看到当domNode被创建成功后，dojo会删掉这个srcNode。
阅读(...) 评论()&&&&&&&&&&&&&&&&&&
posts - 68,comments - 163,trackbacks - 20
&&&&&&& widget在越来越多的web应用中出现，那么，什么是widget？widget使用什么样的标记方式进行声明的呢？widget可以动态创建吗？widget有哪些常用的方法和属性呢？……这一系列的问题不由自主的浮现在脑海，下面，让我们来共同学习一下吧。
学习一：widget的含义
&&&&&&& widget的英文含义是装饰物或者小器具，有些技术文档将其译为小部件，在这里直接使用其英文名，以免引起不必要的混淆。Dojo提供widget框架的原因来自两方面：一是为了更好的用户体验；二是为了帮助开发人员快速开发Web应用。
学习二：widget的声明
&&&&&& &Dojo widget提供了大量可以直接使用的UI控件，它还支持标记方式的声明。其中，dojoType是声明Dojo widget的关键属性，它指明了widget的类型。如：
&button id="button" dojoType="Button"&Create&/button&.
&&&&&& 也可以在页面中这样声明一个Button widget: &button id="button" class="dojo-Button"&Create&/button&; 或者&dojo:Button id="button" caption="Create"/&
学习三：在Dojo中动态创建widget
&&&&&&& Dojo 支持动态创建widget，例如下面的代码动态创建一个Button widget，并将其添加到页面中：
&&&&&&&&&Create Button Widget
&&&&&&&&&w=dojo.widget.createWidget("Button",{caption:"Create"});
&&&&&&&&&dojo.body().appendChild(w.domNode);
学习四：widget编程中常用的方法和属性
&&&&&&& 在Dojo中可以通过编程的方式改变widget的特性，下面是widget编程中常用的方法和属性。
dojo.widget.byId(id)：根据ID获取widget对象
dojo.widget.createWidget：动态创建widget对象
widgetObject.domNode：widget对象对应的DOM节点
widgetObject.containerNode：widget对象所在容器对应的DOM节点
widgetObject.show()/hide()：显示/隐藏widget
widgetObject.toggle()：切换widget的显示/隐藏状态
widgetObject.isShowing()：widget是否可见
学习五：Dojo widget的类型
&&&&&&& 目前Dojo提供了丰富的widget库，可以满足绝大多数web应用开发的需求。Dojo widget按照用途分为3大类：
&&&&&&& 用于页面布局的
&&&&&&& 用于表单增强的
&&&&&& 实现通用功能的General Widget
&&&&&&& Dojo widget框架具有良好的可扩展性，开发人员基于它可以开发自定义的widget，实现代码复用。
阅读(...) 评论()