DOJO API 参考手册

wangzhikui

贡献于2014-06-22

字数:0 关键词: Dojo JavaScript框架 手册

DOJO API 参考手册 由  黄诚  整理  QQ 群  65643887  “Dojo”在英汉词典中的解释(来源:百度词典):   dojo  KK: []  DJ: []  n.  1.  【日】道场    Dojo 体系架构 Dojo 的体系架构如图1所示,总体上来看,Dojo 是一个分层的体系架构。最下 面的一层是包系统,Dojo API 的结构与 Java 很类似,它把所有的 API 分成不 同的包(package),当您要使用某个 API 时,只需导入这个 API 所在的包。 包系统上面一层是语言库,这个语言库里包含一些语言工具 API,类似于 Java 的 util 包。再上一层是环境相关包,这个包的功能是处理跨浏览器的问题。 Dojo 体系架构图 Dojo 大部分代码都位于应用程序支持库,由于太小限制,图中没有列出所有的 包。开发人员大部分时候都在调用这个层中的 API,比如,用 IO 包可以进行 Ajax 调用。 最上面的一层是 Dojo 的 Widget 系统,Widget 指的是用户界面中的一个元素, 比如按钮、进度条和树等。 Dojo 的 Widget 基于 MVC 结构。它的视图作为一 个 Template(模板)来进行存放,在 Template 中放置着 HTML 和 CSS 片段, 而控制器来对该 Template 中的元素进行操作。 Widget 不仅支持自定义的样式 表,并且能够对内部元素的事件进行处理。用户在页面中只需要加入简单的标签 就可以使用。在这一层中,存在数百个功能强大的 Widget 方便用户使用,包括 表格、树、菜单等。 常用包介绍 Dojo 1.1.1 提供了上百个包,这些包分别放入三个一级命名空间:Dojo,Dijit 和 DojoX 。其中 Dojo 是核心功能包 , Dijit 中存放的是 Dojo 所有的 Widget 组件,而 DojoX 则是一些扩展或试验功能,DojoX 中的试验功能在成熟 之后有可能在后续版本中移入到 Dojo 或 Dijit 命名空间中。 由于 Dojo 包种类繁多,下面只列举了最常用的一些包及其功能,以方便读者有 个初步了解或供以后查阅。 包名 功能 dojo.io 不同的 IO 传输方式。 script、IFrame 等等; dojo.dnd 拖放功能的辅助 API 。 dojo.string 这个包可以对字符串进行如下的处理:修整、转换为大写、 编码、esacpe、填充(pad)等等; dojo.date 解析日期格式的有效助手; dojo.event 事件驱动的 API,支持 AOP 开发,以及主题 / 队列的功 能; dojo.back 用来撤销用户操作的栈管理器; dojo.rpc 与后端服务(例如理解 JSON 语法的 Web 服务)进行通信; dojo.colors 颜色工具包; dojo.data Dojo 的统一数据访问接口,可以方便地读取 XML、JSON 等 不同格式的数据文件; dojo.fx 基本动画效果库; dojo.regexp 正则表达式处理函数库; dijit.forms 表单控件相关的 Widget 库; dijit.layout 页面布局 Widget 库; dijit.popup 这个包用于以弹出窗口方式使用 Widget ; dojox.charting 用于在页面上画各种统计图表的工具包; dojox.collections 很有用的集合数据结构(List、Query、Set、Stack、 Dictionary...); dojox.encoding 实现加密功能的 API(Blowfish、MD5、Rijndael、SHA...); dojox.math 数学函数(曲线、点、矩阵); dojo.reflect 提供反射功能的函数库; dojox.storage 将数据保存在本地存储中(例如,在浏览器中利用 Flash 的本地存储来实现); dojox.xml XML 解析工具包;   djConfig 是 dojo 内置的一个全局设置对象,其作用是可以通过其控制 dojo 的行为 首先我们需要在引用 dojo.js 前声明 djConfig 对象,以便在加载 dojo.js 的时候才能够取得所设置的值,虽然在 0.3 版本以后 dojo 支持在加载后设置,但是强烈建议你把声明 djConfig 的代码作为第一段 script 一个完整的 djConfig 对象定义如下(值均为 dojo 的默认值) isDebug 是一个很有用的属性,顾名思义,如果设置为真,则所有 dojo.Debug 的输出有效,开发时应该设置为 true,发布时应 该设置为 false debugContainerId 同样也是与调试有关的,如果不指定的话,调试信息将会直接利用 document.write 输出,这样可能会破坏页 面的整体布局,所以你可以指定任何一个可以作为容器的 html 元素的 id 作为调试信息输出容器 allowQueryConfig,这个属性指明 dojo 是否允许从页面 url 的参数中读取 djConfig 中的相关属性,当值为 true 时,dojo 会优先 从 url 参数中读取 djConfig 的其他属性,比如: http://server/dojoDemo.htm?djConfig.debugContainerId=divDebug baseScriptUri,一般不需要设置,dojo 会自动根据你引用 dojo.js 的路径设置这个值,比如,,自动获取的值便是 ../dojo/ ps: 如果你有多个工程需要同时引用 dojo.js 的话,建议也把 dojo 当作一个独立的工程,引用的时候采用绝对路径就可以了 parseWidgets,这个是可以控制 dojo 是否自动解析具有 dojoType 的 html 元素为对应的 widget,如果你没有使用任何 Widget, 建议设置为 false 以加快 dojo 的加载速度 searchIds,这是一个字符串数组,定义了所有需要解析为 widget 的 html 元素的 ID,如果 ID 不在其中的 html 元素是不会被解 析的,当数组为空数组时,则所有具有 dojoType 的元素都会被解析 还有一个 bindEncoding,是用来设置默认的 bind 请求的编码方式 至于其它的属性,不是用处不大,就是不知道有什么作用 在实际开发中,可以把 djConfig 的定义放在一个 js 文件里,并将其作为第一个引用的 js 文件,这样应该是最方便的。 preventBackButtonFix 在 djConfig 中设置 preventBackButtonFix: false。这样保证了隐藏的表单 (hidden  IFRAME)将会添加到页面当中,如果不加入这段,dojo.undo.browser 不会正常工 作。  译者注:设置方法就是在 header 中加入如下代码:    djConfig = { isDebug: true, preventBackButtonFix: false };    djConfig  是 dojo 内置的一个全局设置对象,其作用是可以通过其控制 dojo 的行为 首先我们需要在引用 dojo.js 前声明 djConfig 对象,以便在加载 dojo.js 的时候才能够取得所设置的值, 虽然在 0.3 版本以后 dojo 支持在加载后设置,但是强烈建议你把声明 djConfig 的代码作为第一段 s cript 一个完整的 djConfig 对象定义如下(值均为 dojo 的默认值) var djConfig = { isDebug: false, debugContainerId: "", allowQueryConfig: false, bases criptUri: "", parseWidgets: true searchIds: [], baseRelativePath: "", librarys criptUri: "", iePreventClobber: false, ieClobberMinimal: true, preventBackButtonFix: true, }; isDebug 是一个很有用的属性,顾名思义,如果设置为真,则所有 dojo.Debug 的输出有效,开发时应该 设置为 true,发布时应该设置为 false debugContainerId 同样也是与调试有关的,如果不指定的话,调试信息将会直接利用 document.write 输出, 这样可能会破坏页面的整体布局,所以你可以指定任何一个可以作为容器的 html 元素的 id 作为调试信息 输出容器 allowQueryConfig,这个属性指明 dojo 是否允许从页面 url 的参数中读取 djConfig 中的相关属性,当值为 true 时,dojo 会优先从 url 参数中读取 djConfig 的其他属性,比 如: http://server/dojoDemo.htm?djConfig.debugContainerId=divDebug bases criptUri,一般不需要设置,dojo 会自动根据你引用 dojo.js 的路径设置这个值,比如,,自动获取的值便是 ../dojo/ ps: 如果你有多个工程需要同时引用 dojo.js 的话,建议也把 dojo 当作一个独立的工程,引用的时候采用 绝对路径就可以了 parseWidgets,这个是可以控制 dojo 是否自动解析具有 dojoType 的 html 元素为对 应的 widget,如果你没有使用任何 Widget,建议设置为 false 以加快 dojo 的加载速度 searchIds,这是一个字符串数组,定义了所有需要解析为 widget 的 html 元素的 ID,如果 ID 不在其中的 html 元素是不会被解析的,当数组为空数组时,则所有具有 dojoType 的元素都会被解析 至于其它的属性,不是用处不大,就是不知道有什么作用 在实际开发中,可以把 djConfig 的定义放在一个 js 文件里,并将其作为第一个引用的 js 文件,这样应该 是最方便的。 实现功能:在一个容器里点击一个链接,在另外一个容器中显示这个链接所指向页面的内容。

Example on how to easily relay clicks

Link 1
Link 2
Link 3
dojo.addOnLoad 可以加载指定函数到 window.load 时执行,好处就是可以很方便的在 window.load 时执行多个函数 Usage Example: dojo.addOnLoad(init); //init 是一个函数 dojo.addOnLoad(myObject, init); //init 是 myObject 对象的一个方法 dojo.require 如果你想调用一个模块的对象的时候,你应该首先用 dojo.require 来请求这个模块,dojo 会根据你的请求自动取得相应的 js 文 件,并加载到内存中,这样你才能调用或创建其中的对象 dojo   会自动维护已加载的模块列表,所以是不会重复加载模块的 Usage Example: dojo.require("dojo.event"); dojo.requireIf=dojo.requireAfterIf   可以根据指定的条件来决定是否加载指定的模块 Usage Example:   dojo.requireIf(dojo.html.ie, "dojo.html"); //如果 dojo.html.ie 为 true,才会加载 dojo.html 模块 dojo.provide 除非你要开发自己的模块,不然是用不到这个方法的,你可以这句看成是向系统注册这个模块名称 Usage Example:   dojo.provide("dojo.custom"); dojo.exists 判断指定对象是否具有指定名称的方法 Usage Example:   dojo.exists(dojo, "exists"); //will return true 模块:dojo.io.IO dojo.io.bind 处理请求取回需要的数据并处理    这个函数是 AJAX 中最为重要和有用的函数,dojo.io.bind 这个类是用来处理客户端与服务器 间通讯的,需要通讯的参数由对象 dojo.io.Request 所定义,具体通讯的方法则由另外一个对 象 Transport 所提供。  因此,我们如果需要与服务器通讯,则应该定义一个 Request 对象, 其中包括服务器地址及回调函数,例子中 Requset 都是以匿名对象方式定义的    虽然我们可以定义一个自己的 Transport,但是显然不如直接利用现成的 Transport 方便。    Dojo 里提供了一个同时兼容 IE 和 Firefox 的 dojo.io.XMLHTTPTransport,但是这个对象位于 dojo.io.BrowserIO,因此,一般 require dojo.io.IO 时,还应该 require dojo.io.BrowserIO   Usage Example     dojo.io.bind({       url: "http://localhost/test.html", //要请求的页面地址       mimetype: "text/html", //请求的页面的类型,应该设置为与你请求页面类型对应的 mimetype,默认为 "text/plain"       method:"GET", //默认为"GET"       sync: false, //默认为异步执行       useCache: false, //默认为不使用页面缓存,注意这里的缓存并不是浏览器的缓存,而是 Dojo 自身所维护的页面缓存       preventCache: false, //默认为启用浏览器缓存,否则将通过自动增加不同的参数来确保浏 览器缓存失效       timeoutSeconds: 3000,  //3 秒后超时,如果为 0 则永不超时       load: function(type, data, evt) { alert(data); }, //type should be "load", data is that we wanted       error: function(type, error) { alert(error.message); }, //error is dojo.io.Error       timeout: function(type) { alert("请求超时!"); }     });     你也可以用一个 handle 来处理所有的事件      dojo.io.bind({       url: "http://localhost/test.html", //要请求的页面地址       mimetype: "text/html", //请求的页面的类型,应该设置为与你请求页面类型对应的 mimetype       timeoutSeconds: 3000,  //3 秒后超时,如果为 0 则永不超时       handle: function(type, data, evt){         if(type == "load") { alert(data); } //data is that we wanted         else if (type == "error") { alert(data.message); } //data is the error object         else { ; } //other events maybe need handled       }     });        如果没有在 Request 中指定所用的 transport,则 Dojo 会自动的在已注册的 transports 中寻 找能够处理这个 Request 的 transport,如果不能找到,则返回指定的 Request。下面是一个 指定了 transport 的例子:     dojo.io.bind({       url: "http://localhost/test.html", //要请求的页面地址       mimetype: "text/html", //请求的页面的类型,应该设置为与你请求页面类型对应的 mimetype       timeoutSeconds: 3000,  //3 秒后超时,如果为 0 则永不超时       transport: "XMLHTTPTransport",       load: function(type, data, evt) { alert(data); }, //type should be "load", data is that we wanted       error: function(type, error) { alert(error.message); }, //error is dojo.io.Error       timeout: function(type) { alert("请求超时!"); }     });     你还可以利用 bind 来得到一个 Javas  cript 所定义的对象(注意 mimetype 必须要定义为 "text/javas cript")      testObj = dojo.io.bind({       url: "http://localhost/test.js", //test.js 里定义了一个对象       mimetype: "text/javas  cript", //请求的页面的类型,应该设置为与你请求页面类型对应的 mimetype       timeoutSeconds: 3000,  //3 秒后超时,如果为 0 则永不超时  handle: function(type, data, evt){         if(type == "load") { alert(data); } //data is a object or value         else if (type == "error") { alert(data.message); } //data is the error object         else { ; } //other events maybe need handled       }     });         下面是一个 Post 的例子:        dojo.io.bind({ url: "http://localhost/test.aspx", //要提交的页面地址 mimetype: "text/html", //请求的页面的类型,应该设置为与你请求页面类型对应的 mimetype timeoutSeconds: 3000, //3 秒后超时,如果为 0 则永不超时 method: "POST", formNode: dojo.byId("myForm"), //指定提交的 Form 名称 load: function(type, data, evt) { alert(data); }, //type should be "load", data is that we wanted error: function(type, error) { alert(error.message); }, //error is dojo.io. Error timeout: function(type) { alert("请求超时!"); } });   另一个 Post 的例子(without Form to post):     dojo.io.bind({       url: "http://localhost/test.aspx", //要提交的页面地址       mimetype: "text/html", //请求的页面的类型,应该设置为与你请求页面类型对应的 mimetype       timeoutSeconds: 3000,  //3 秒后超时,如果为 0 则永不超时       method: "POST",       content: {a: 1, b: 2}, //要提交的数据       load: function(type, data, evt) { alert(data); }, //type should be "load", data is that we wanted       error: function(type, error) { alert(error.message); }, //error is dojo.io.Error       timeout: function(type) { alert("请求超时!"); }     });   dojo.io.queueBind   有时,我们需要一次发出多个网页请求,则应该使用 dojo.io.queueBind,因为浏览器可能 只允许同时发出有限个数的请求,如果是使用 dojo.io.bind 的话,则有可能会申请不到新的 XMLHttp 对象而导致出错。      用法与 dojo.io.bind 是一样的。   dojo.io.argsFromMap 用来把对象转换为 URL 的参数形式 Usage Example: dojo.io.argsFromMap({a:1,b:2,c:3}); //will return "c=3&b=2&a=1" dojo.io.argsFromMap({name:"名称",value:"值 "},"utf"); //will return "value=值&name=å��称", 有中文的话应该指定 utf 格式,否则 dojo.string.encodeAscii 返回的编码是很怪异的 dojo.io.argsFromMap({a:1,b:2,c:3}, "utf", "c"); //will return "b=2&a=1&c=3",最后一个参 数可以控制指定名称的值出现在最后 dojo.io.setIFrameSrc 设置 IFrame 的 Src Usage Example: dojo.io.setIFrameSrc(dojo.byId("myFrame"), "http://localhost/test.htm"); //myFrame 打 开指定的网页 dojo.io.setIFrameSrc(dojo.byId("myFrame"), "http://localhost/test.htm", true); //myFra me 打开指定的网页,并覆盖浏览器的历史记录 模块:dojo.io.BrowserIO 基本上就提供了 dojo.io.XMLHTTPTransport 这个对象 XMLHTTPTransport 一般能够满足我们的需求,但是其有几个限制:它不能传输文件,不能够成功执行 跨域名的远程请求,并且不支持 file:// 这样的协议 因此,根据应用要求,我们可能会需要选用其它的 transport: dojo.io.IframeTransport, dojo.io.repubsubTranport, dojo.io.s criptSrcTransport, ShortBusTransport dojo.io.IframeTransport,用法与 xmlhttp 是一样的,其优点就是可以跨域,不存在任何的安全问题 如果 Request 指定的 mimetype 是 text 或 javas cript,返回的内容应该是放在第一个 textarea 里的 内容,如果指定的 mimetype 是 html,则 IFrame 里的 html 则是需要的内容。因为浏览器兼容的原因, IframeTransport 不能正确处理返回类型为 XML 的请求。 关于 Rpc,这个类似于 Remoting 的东西,也将在以后对其进行介绍。 模块:dojo.string.extras 模块:dojo.string.common 模块:dojo.string dojo.string.common 和 dojo.string 是一样的,只要 require 其中一个就可以使用以下方法 dojo.string.capitalize 把每一个单词的首字母大写   Usage Example: dojo.string.capitalize("show me love"); //will return "Show Me Love" dojo.string.isBlank 判断输入字符串是否为空或全是空白字符,如果传入对象为非字符串则也会返回 true Usage Example: dojo.string.isBlank(" 1 "); //will return false dojo.string.escape 参数 1 为 type,可传值为: xml/html/xhtml, sql, regexp/regex, javas cript/js cript/js, ascii 将按照所传 type 对字符串进行编码 Usage Example: dojo.string.escape("html", ""); //will return "" dojo.string.encodeAscii dojo.string.escapeXml dojo.string.escapeSql dojo.string.escapeRegExp dojo.string.escapeJavas cript dojo.string.escapeString 这些函数也就是 dojo.string.escape 所调用的,这里无需多说 dojo.string.summary 取得输入字符串的缩略版本 Usage Example: dojo.string.summary("1234567890", 5); //will return "12345..." dojo.string.endsWith 判断输入字符串是否以指定的字符串结尾 Usage Example: dojo.string.endsWith("abcde", "E"); //will return false dojo.string.endsWith("abcde", "E", true); //will return true dojo.string.endsWithAny 判断输入字符串是否以指定的任意字符串结尾 Usage Example: dojo.string.endsWithAny("abcde", "E", "e"); //will return true dojo.string.startsWith 判断输入字符串是否以指定的字符串开头 Usage Example: dojo.string.startsWith("abcde", "A"); //will return false dojo.string.startsWith("abcde", "A", true); //will return true dojo.string.startsWithAny 判断输入字符串是否以指定的任意字符串开头 Usage Example: dojo.string.startsWithAny("abcde", "A", "a"); //will return true dojo.string.has 判断输入字符串是否含有任意指定的字符串 Usage Example: dojo.string.has("abcde", "1", "23", "abc"); //will return true dojo.string.normalizeNewlines 按要求转换回车换行的格式 Usage Example: dojo.string.normalizeNewlines("a\r\nb\r\n", "\r"); //will return "a\rb\r" dojo.string.splitEscaped 将字符串按分隔符转换为数组 Usage Example: dojo.string.splitEscaped("a\\_b_c", '_'); //will return ["a\\_b", "c"] dojo.string.trim 去掉字符串的空白   dojo.require("dojo.string");  defined in dojo/string.js  This version of trim() was taken from Steven Levithan’s blog. The short yet performant version of this function is dojo.trim(), which is part of Dojo base. Usage  var foo=dojo.string.trim(str: String); (view source)  parameter type description str String     Usage Example: s = " abc "; dojo.string.trim(s); //will return "abc" dojo.string.trim(s, 0);//will return "abc" dojo.string.trim(s, 1);//will return "abc " dojo.string.trim(s, -1);//will return " abc" dojo.string.trimStart 去掉字符串开头的空白 Usage Example: s = " abc ";dojo.string.trimStart(s); //will return "abc " dojo.string.trimEnd 去掉字符串结尾的空白 Usage Example: s = " abc ";dojo.string.trimEnd(s); //will return " abc" dojo.string.repeat 生成由同一字符(串)重复组成的字符串   Usage Example: dojo.string.repeat("a", 4); //will return "aaaa" dojo.string.repeat("1234", 3, "-"); //will return "1234-1234-1234" dojo.string.pad 使用字符补齐字符串   dojo.require("dojo.string");  defined in dojo/string.js  Pad a string to guarantee 保证  that it is at least 最小的  size length by filling 装填  with the  character ch at either the start or end of the string. Pads at the start, by default.  Usage  var foo=dojo.string.pad(text: String, size: Integer, ch: String?, end: Boolean?);   parameter type description text String the string to pad size Integer length to provide padding ch String Optional. character to pad, defaults to ‘0’ end Boolean Optional. adds padding at the end if true, otherwise pads at start Usage Example: dojo.string.pad("100", 6);//will return "000100" dojo.string.pad("100", 6, "0", 1);//will return "000100" dojo.string.pad("100", 6, "0", -1);//will return "100000" dojo.string.padLeft 使用字符补齐字符串开头 Usage Example: dojo.string.padLeft("100", 6); //will return "100000" dojo.string.padRight 使用字符补齐字符串结尾 Usage Example: dojo.string.padRight("100", 6); //will return "100000" dojo.string.substituteParams dojo.string.substitute 类似 C#中的 String.Format 函数 %{name}要保证与传入的对象的名称大小写一致,否则会出异常 dojo.require("dojo.string");  defined in dojo/string.js  For example, dojo.string.substitute("File '${0}' is not found in directory '${1}'.",["foo.html","/temp"]); dojo.string.substitute("File '${name}' is not found in directory '${info.dir}'.", {name: "foo.html", info: {dir: "/temp"}}); both return "File 'foo.html' is not found in directory '/temp'." Usage  var  foo=dojo.string.substitute(template:  String,  map:  Object|Array,  transform:  Function?,  thisObject: Object?);   parameter type description template String a  string  with  expressions  in  the  form  ${key}  to  be  replaced  or  ${key:format} which specifies a format function. map Object|Array hash to search for substitutions transform Function Optional.  a  function  to  process  all  parameters  before  substitution  takes place, e.g. dojo.string.encodeXML thisObject Object Optional. where to look for optional format function; default to the  global namespace Usage Example: dojo.string.substituteParams("%{0} - %{1} - %{2}", "a", "b", "c"); //will return "a - b - c" dojo.string.substituteParams("%{name}: %{value}", {name:"名称",value:"值"}); //will return "名称: 值" 模块:dojo.lang.common / dojo.lang dojo.lang.common 和 dojo.lang 是一样的,只要 require 其中一个就可以使用以下方法 dojo.lang.inherits dojo.inherits dojo.inherits = dojo.lang.inherits;  function(/*Function*/subclass, /*Function*/superclass){    // summary: Set up inheritance 继承  between two classes.  dojo.lang.mixin dojo.mixin dojo.mixin = dojo.lang.mixin;  将一个对象的方法和属性增加到另一个对象上 Usage Example: var s1 = {name: "TestObj", test1: function(){alert("this is test1!");}} var s2 = {value: 1000, test2: function(){alert("this is test2!");}} var d = {}; dojo.lang.mixin(d, s1, s2); //执行后 d 就具备了 s1 和 s2 的所有属性和方法 d.test1(); dojo.lang.extend dojo.extend dojo.extend = dojo.lang.extend;  为指定类的原型扩展方法与属性 function(/*Object*/ constructor, /*Object...*/ props){ // summary: //Adds all properties and methods of props to constructor's //prototype, making them available to all instances created with //constructor. Usage Example: TestClass = function() {}; dojo.lang.extend(TestClass, {name: "demo", test: function(){alert("Test!");}}); var o = new TestClass(); //TestClass 本来是没有 test 方法的,但是 extend 以后就有 test 方法了 o.test(); dojo.lang.find dojo.lang.indexOf dojo.lang.indexOf = dojo.lang.find;  dojo.lang.find = function(/*Array*/ array, /*Object*/ value, /*Bollean*/ indentity, /*Boolean*/ findLast) // summary: // Return the index of value in array, returning -1 if not found. // array: just what you think // value: the value to locate // identity: // If true, matches with identity comparison (===). If false, uses // normal comparison (==). // findLast: // If true, returns index of last instance of value. // examples: // find(array, value[, identity [findLast]]) // recommended // find(value, array[, identity [findLast]]) // deprecated // support both (array, value) and (value, array) 查找指定对象在指定数组中的位置 返回值在数组中的索引值,-1 为未发现。 Indentity 为 true 匹配模式为(===),反正为(==) findLast 为 true 返回最后一个匹配值的索引。 Usage Example: var arr = [1,2,3,3,2,1];dojo.lang.find(arr, 2);//will return 1 dojo.lang.find(arr, 2, true);//will return 1 dojo.lang.find(arr, "2", true);//will return -1 dojo.lang.find(arr, "2", false);//will return 1 dojo.lang.find(arr, 2, true, true); //will return 4 dojo.lang.findLast dojo.lang.lastIndexOf dojo.lang.lastIndexOf = dojo.lang.findLast; function(/*Array*/array, /*Object*/value, /*boolean?*/identity){ // summary: // Return index of last occurance of value in array, returning -1 if // not found. This is a shortcut for dojo.lang.find() with a true // value for its "findLast" parameter. // identity: // If true, matches with identity comparison (===). If false, uses // normal comparison (==). 查找指定对象在指定数组中的位置,从后往前查 Usage Example: var arr = [1,2,3,3,2,1];dojo.lang.findLast(arr, 2);//will return 4 dojo.lang.findLast(arr, 2, true);//will return 4 dojo.lang.findLast(arr, "2", true);//will return -1 dojo.lang.findLast(arr, "2", false);//will return 4 dojo.lang.inArray function(array /*Array*/, value /*Object*/){ // summary: Return true if value is present in array. 查找指定对象是否在指定数组中 Usage Example: var arr = [1,2,3]; dojo.lang.inArray(arr, 1);//will return true dojo.lang.inArray(arr, 4);//will return false dojo.lang.isObject function(/*anything*/ it){ // summary: Return true if it is an Object, Array or Function. 判断输入的类型是否为对象 Usage Example: dojo.lang.isObject(new String()); //will return true dojo.lang.isObject("123")); //will return false dojo.lang.isArray function(/*anything*/ it){ // summary: Return true if it is an Array. 判断输入的类型是否为数组 Usage Example: dojo.lang.isArray({a:1,b:2}); //will return false dojo.lang.isArray([1,2,3]); //will return true dojo.lang.isArrayLike function(/*anything*/ it){ // summary: //Return true if it can be used as an array (i.e. is an object with //an integer length property). dojo.lang.isFunction function(/*anything*/ it){  // summary:  Return true if it is a Function.  判断输入的类型是否为函数 Usage Example: dojo.lang.isFunction(function() {}); //will return true dojo.lang.isString 判断输入的类型是否为字符串 function(/*anything*/ it){ // summary: Return true if it is a String. Usage Example: dojo.lang.isString(""); //will return true dojo.lang.isString(0); //will return false dojo.lang.isAlien 判断输入的类型是否为系统函数 function(/*anything*/ it){ // summary: Return true if it is not a built-in function. False if not. Usage Example: dojo.lang.isAlien(isNaN); //will return true dojo.lang.isBoolean 判断输入的类型是否为布尔类型 function(/*anything*/ it){ // summary: Return true if it is a Boolean. Usage Example: dojo.lang.isBoolean(2>1); //will return true 下面的 is***()函数有点不安全 dojo.lang.isNumber 判断输入的类型是否为数值,根据注释所说,此函数使用不太可靠,但是可替换使用的系统函数 isNaN 也 不太可靠 // summary: Return true if it is a number. // description: // WARNING - In most cases, isNaN(it) is sufficient to determine whether or not // something is a number or can be used as such. For example, a number or string // can be used interchangably when accessing array items (array["1"] is the same as // array[1]) and isNaN will return false for both values ("1" and 1). However, // isNumber("1") will return false, which is generally not too useful. // Also, isNumber(NaN) returns true, again, this isn't generally useful, but there // are corner cases (like when you want to make sure that two things are really // the same type of thing). That is really where isNumber "shines". // // Recommendation - Use isNaN(it) when possible dojo.lang.isUndefined 判断输入是否为未定义,根据注释所说,此函数有可能会导致抛出异常,推荐使 用 typeof foo == "undefined" 来判断 // summary: Return true if it is not defined. // description: // WARNING - In some cases, isUndefined will not behave as you // might expect. If you do isUndefined(foo) and there is no earlier // reference to foo, an error will be thrown before isUndefined is // called. It behaves correctly if you scope yor object first, i.e. // isUndefined(foo.bar) where foo is an object and bar isn't a // property of the object. // // Recommendation - Use typeof foo == "undefined" when possible 模块:dojo.lang.array 处理数组相关 api  dojo.lang.has 判断对象是否具有指定属性,不过这个方法有用吗,不如直接使用 if(name in obj) function(/*Object*/obj, /*String*/name) // summary: is there a property with the passed name in obj? Usage Example: dojo.lang.has(dojo.lang, "has"); //will return true dojo.lang.isEmpty 判断对象或数组是否为空 function(/*Object*/obj) // summary: // can be used to determine 求出 if the passed object is "empty". In // the case of array-like objects, the length, property is // examined 检查, but for other types of objects iteration 重复 is used to // examine the iterable "surface area" to determine if any // non-prototypal properties have been assigned 分配. This iteration is // prototype-extension safe. Usage Example: dojo.lang.isEmpty({a: 1}); //will return false dojo.lang.isEmpty([]); //will return true dojo.lang.map 调用指定的方法处理指定的数组或字符串 function(/*Array*/arr, /*Object|Function*/obj, /*Function?*/unary_func) // summary: // returns a new array constituded from the return values of // passing each element of arr into unary_func. The obj parameter // may be passed to enable the passed function to be called in // that scope. In environments that support JavaScript 1.6, this // function is a passthrough to the built-in map() function // provided by Array instances. For details on this, see: // http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:map // examples: //dojo.lang.map([1, 2, 3, 4], function(item){ return item+1 }); // returns [2, 3, 4, 5] Usage Example: dojo.lang.map([1,2,3,4,5], function(x) { return x * x;}); //will return [1,4,9,16,25] dojo.lang.reduce function(/*Array*/arr, initialValue, /*Object|Function*/obj, /*Function*/binary_func)  // summary:  //     similar to Python's builtin reduce() function. The result of  //     the previous 前面的  computation 计算  is passed as the first argument 争论  to  //     binary_func along with the next value from arr. The result of  //     this call is used along with the subsequent 后来的  value from arr, and  //     this continues until arr is exhausted. The return value is the  //     last result. The "obj" and "initialValue" parameters may be  //     safely omitted and the order of obj and binary_func may be  //     reversed. The default order of the obj and binary_func argument  //     will probably be reversed in a future release, and this call  //     order is supported today.  // examples:  //   dojo.lang.reduce([1, 2, 3, 4], function(last, next){ return last+next});  //   returns 10  dojo.lang.forEach 遍历指定的数组或字符串,并对其中的元素调用指定的方法 function(/*Array*/anArray, /*Function*/callback, /*Object?*/thisObject) // summary: // for every item in anArray, call callback with that item as its // only parameter. Return values are ignored 忽略. This funciton // corresponds 协调(and wraps) the JavaScript 1.6 forEach method. For // more details, see: //http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:forEach Usage Example: dojo.lang.forEach("abc", function(x) { alert(x); }); dojo.lang.every 检查指定的数组是否全部满足指定方法的条件 function(/*Array*/arr, /*Function*/callback, /*Object?*/thisObject) // summary: // determines 决定 whether or not every item in the array satisfies 符合 the // condition 条件 implemented by callback. thisObject may be used to // scope the call to callback. The function signature 特征 is derived 起源 // from the JavaScript 1.6 Array.every() function. More // information on this can be found here: // http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:every // examples: // dojo.lang.every([1, 2, 3, 4], function(item){ return item>1; }); // // returns false // dojo.lang.every([1, 2, 3, 4], function(item){ return item>0; }); // // returns true Usage Example: dojo.lang.every([1,-2,3], function(x) { return x > 0; }); //指定的数组不是全大于 0 的,因此返回 false dojo.lang.some 检查指定的数组是否部分满足指定方法的条件 function(/*Array*/arr, /*Function*/callback, /*Object?*/thisObject) // summary: // determines whether or not any item in the array satisfies the // condition 条件 implemented by callback. thisObject may be used to // scope the call to callback. The function signature is derived // from the JavaScript 1.6 Array.some() function. More // information on this can be found here: // http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:some // examples: // dojo.lang.some([1, 2, 3, 4], function(item){ return item>1; }); // // returns true // dojo.lang.some([1, 2, 3, 4], function(item){ return item<1; }); // // returns false Usage Example: dojo.lang.some([1,-2,3], function(x) { return x > 0; }); //指定的数组有大于 0 的元素,因此返回 true dojo.lang.filter 根据指定的方法来过滤指定的数组 function(/*Array*/arr, /*Function*/callback, /*Object?*/thisObject) // summary: // returns a new Array with those items from arr that match the // condition implemented by callback.thisObject may be used to // scope the call to callback. The function signature is derived // from the JavaScript 1.6 Array.filter() function, although // special accomidation is made in our implementation for strings. // More information on the JS 1.6 API can be found here: //http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:filter // examples: // dojo.lang.some([1, 2, 3, 4], function(item){ return item>1; }); // returns [2, 3, 4] Usage Example: dojo.lang.filter([1,-2,3], function(x) { return x > 0; }); //will return [1, 3] dojo.lang.unnest 把指定的参数或数组转换为一维数组 function(/* ... */){ // summary: // Creates a 1-D array out of all the arguments passed, // unravelling any array-like objects in the process // usage: // unnest(1, 2, 3) ==> [1, 2, 3] // unnest(1, [2, [3], [[[4]]]]) ==> [1, 2, 3, 4] Usage Example: dojo.lang.unnest(1, 2, 3); //will return [1, 2, 3] dojo.lang.unnest(1, [2, [3], [[[4]]]]); //will return [1, 2, 3, 4] dojo.lang.toArray 将输入转换为数组 function(/*Object*/arrayLike, /*Number*/startOffset){ // summary: // Converts an array-like object (i.e. arguments, DOMCollection) // to an array. Returns a new Array object. Usage Example: function test() { return dojo.lang.toArray(arguments, 1); } test(1,2,3,4,5); //will return [2,3,4,5] 模块:dojo.lang.extras dojo.lang.setTimeout 延迟指定时间后执行指定方法 function(/*Function*/func, /*int*/delay /*, ...*/){ // summary: // Sets a timeout in milliseconds to execute a function in a given // context with optional arguments. // usage: // dojo.lang.setTimeout(Object context, function func, number delay[, arg1[, ...]]); // dojo.lang.setTimeout(function func, number delay[, arg1[, ...]]); Usage Example: function onTime(msg){dojo.debug(msg)}dojo.lang.setTimeout(onTime, 1000, "test"); //1 秒后会输出调试 信息"test"dojo.lang.setTimeout(dojo, "debug", 1000, "test"); //1 秒后会输出调试信息"test" dojo.lang.clearTimeout function(/*int*/timer){  // summary: clears timer by number from the execution queue 排列  // FIXME:  //   why do we have this function? It's not portable outside of browser  //   environments and it's a stupid wrapper on something that browsers  //   provide anyway.  dojo.lang.getNameInObj 获得指定项目在指定对象中的名称 function(/*Object*/ns, /*unknown*/item) // summary: // looks for a value in the object ns with a value matching item and // returns the property name // ns: if null, dj_global is used // item: value to return a name for Usage Example: dojo.lang.getNameInObj(dojo, dojo.debug); //will return "debug" dojo.lang.shallowCopy 返回指定对象的浅表复制副本 function(/*Object*/obj, /*Boolean?*/deep) // summary: // copies object obj one level deep, or full depth if deep is true Usage Example: dojo.lang.shallowCopy({}); //will return a 空对象 dojo.lang.firstValued 返回第一个非定义的参数 function(/* ... */){ // summary: Return the first argument that isn't undefined Usage Example: var a;dojo.lang.firstValued(a,2,3); //will return 2 dojo.lang.getObjPathValue function(/*String*/objpath, /*Object?*/context, /*Boolean?*/create){ // summary: // Gets a value from a reference specified as a string descriptor, // (e.g. "A.B") in the given context. // context: if not specified, dj_global is used // create: if true, undefined objects in the path are created. dojo.lang.setObjPathValue function(/*String*/objpath, /*anything*/value, /*Object?*/context, /*Boolean?*/create) // summary: // Sets a value on a reference specified as a string descriptor. // (e.g. "A.B") in the given context. This is similar to straight // assignment, except that the object structure in question can // optionally be created if it does not exist. // context: if not specified, dj_global is used // create: if true, undefined objects in the path are created. // FIXME: why is this function valuable? It should be scheduled for // removal on the grounds that dojo.parseObjPath does most of it's work and // is more straightforward and has fewer dependencies. Also, the order of // arguments is bone-headed. "context" should clearly come after "create". // *sigh* 模块:dojo.lang.func dojo.lang.hitch 将指定的方法挂在指定的对象下并返回该方法 function(/*Object*/thisObject, /*Function|String*/method /*, ...*/) // summary: // Returns a function that will only ever execute in the a given scope // (thisObject). This allows for easy use of object member functions // in callbacks and other places in which the "this" keyword may // otherwise not reference the expected scope. Any number of default // positional arguments may be passed as parameters beyond "method". // Each of these values will be used to "placehold" (similar to curry) // for the hitched function. Note that the order of arguments may be // reversed in a future version. // thisObject: the scope to run the method in // method: // a function to be "bound" to thisObject or the name of the method in // thisObject to be used as the basis for the binding // usage: // dojo.lang.hitch(foo, "bar")(); // runs foo.bar() in the scope of foo // dojo.lang.hitch(foo, myFunction); // returns a function that runs myFunction in the scope of foo Usage Example: func = {test: function(s) {alert(s)}}; dojo.lang.mixin(func, {demo: dojo.lang.hitch(func, "test")}); func.demo("demo and test are same method"); dojo.lang.nameAnonFunc function(/*Function*/anonFuncPtr, /*Object*/thisObj, /*Boolean*/searchForNames){    // summary:    //   Creates a reference to anonFuncPtr in thisObj with a completely    //   unique name. The new name is returned as a String.  If    //   searchForNames is true, an effort will be made to locate an    //   existing reference to anonFuncPtr in thisObj, and if one is found,    //   the existing name will be returned instead. The default is for    //   searchForNames to be false.  dojo.lang.forward 返回自身对象的指定名称的方法引用 function(funcName){  // summary:  //     Returns a function that forwards a method call to  //     this.funcName(...).  Unlike dojo.lang.hitch(), the "this" scope is  //     not fixed on a single object. Ported from Mochi Usage Example: func = {test: function(s) {alert(s)}, demo: dojo.lang.forward("test")}; func.demo("demo and test are same method"); dojo.lang.curry What is curry? 请参阅这篇文章:http://www.svendtofte.com/code/curried_javas cript/ function(thisObj, func /* args ... */) // summary: // similar to the curry() method found in many functional programming // environments, this function returns an "argument accumulator" // function, bound to a particular scope, and "primed" with a variable // number of arguments. The curry method is unique in that it returns // a function that may return other "partial" function which can be // called repeatedly. New functions are returned until the arity of // the original function is reached, at which point the underlying // function (func) is called in the scope thisObj with all of the // accumulated arguments (plus any extras) in positional order. // examples: // assuming a function defined like this: // var foo = { // bar: function(arg1, arg2, arg3){ // dojo.debug.apply(dojo, arguments); // } // }; // // dojo.lang.curry() can be used most simply in this way: // // tmp = dojo.lang.curry(foo, foo.bar, "arg one", "thinger"); // tmp("blah", "this is superfluous"); // // debugs: "arg one thinger blah this is superfluous" // tmp("blah"); // // debugs: "arg one thinger blah" // tmp(); // // returns a function exactly like tmp that expects one argument // // other intermittent functions could be created until the 3 // positional arguments are filled: // // tmp = dojo.lang.curry(foo, foo.bar, "arg one"); // tmp2 = tmp("arg two"); // tmp2("blah blah"); // // debugs: "arg one arg two blah blah" // tmp2("oy"); // // debugs: "arg one arg two oy" // // curry() can also be used to call the function if enough arguments // are passed in the initial invocation: // // dojo.lang.curry(foo, foo.bar, "one", "two", "three", "four"); // // debugs: "one two three four" // dojo.lang.curry(foo, foo.bar, "one", "two", "three"); // // debugs: "one two three" // FIXME: the order of func and thisObj should be changed!!! Usage Example: function add(a, b) { return a + b; } dojo.lang.curry(null, add, 2, 3); //will return 5 dojo.lang.curry(null, add, 2)(3); //will return 5 dojo.lang.curry(null, add)(2)(3); //will return 5 dojo.lang.curry(null, add)()(2)(3); //will return 5 dojo.lang.curryArguments 与 dojo.lang.curry 类似,但是可以选择忽略掉前 n 个参数 function(/*Object*/thisObj, /*Function*/func, /*Array*/args, /*Integer, optional*/offset) // summary: // similar to dojo.lang.curry(), except that a list of arguments to // start the curry with may be provided as an array instead of as // positional arguments. An offset may be specified from the 0 index // to skip some elements in args. Usage Example: function add(a, b) { return a + b; } dojo.lang.curryArguments(null, add, [1,2,3,4,5], 2); //will return 7 (= 3 + 4) dojo.lang.tryThese 测试参数指定所有函数,并返回第一个返回值不为 0 的函数值,没看懂这个函数哪里用得着 function(/*...*/){ // summary: // executes each function argument in turn, returning the return value // from the first one which does not throw an exception in execution. // Any number of functions may be passed. from seno: dojo.lang.tryThese 方法和 prototype 中的 Try.these()方法是一样的, xmlNode.text 在一些浏览器中好用,但是 xmlNode.textContent 在另一些浏览器中正常工作。 使用 Try.these()方法我们可以得到正常工作的那个方法的返回值。 2: 加入 dojo.require("dojo.undo.browser"); 设定网页程序的初始状态: dojo.undo.browser.setInitialState( state); 当用户每次点击前进或者后退,state 对象都会被调用。 然后我们需要给 state 对象创建几个方法(function) • 得到后退提示:back(),backButtion()或者 handle(type),type 可 以是“back”或者是“forward”。 • 得到前进提示:forward(),forwardButton()或者 handle(type),ty pe 如上。 下面是个简单的例子: var state = { back: function() { alert("Back was clicked!"); }, forward: function() { alert("Forward was clicked!"); } }; 注册一个 state 对象使用下面的方法: dojo.undo.browser.addToHistory(sta te); 如 果向改变浏览器的地址(URL),引用 state 对象的 changeUrl 属性。如果 changeUrl 是 true,doj o.undo.browser 就将产生一个唯一的标签,如果 changeUrl 被定义为任何其他的值(不包括 undefin ed,null,0 和空 string),那么这个值就会被使 用为标签。这样用户就可以把当前页加入收藏夹了。 提示 • 如果你要使用 changeUrl,即使你不设定自己的标签,也至少定义为 true。 • 如果你要在本机测试,不要使用 IE。因为当 IE 访问本地文件时不会创建历史列表 ifram_histor y.html。请把网页上传到服务器上测试。 • Safari2.0.3+:只有后退按钮可以正常工作,并且只有当 changeUrl 没用使用的时候。 • Opera 8.5.3:不会正常运行。 这里有一个网上的例子: http://archive.dojotoolkit.org/nightly/tests/undo/test_browser.html 模块:dojo.connect 模块:dojo.widget dojox.widget.FisheyeList dojo.widget.FisheyeList <%-- dojoType="dojox.widget.FisheyeList" dojoType 设置 itemWidth/itemHeight:普通模式的宽和高 itemMaxWidth/itemMaxHeight:最大模式的宽和高 orientation:是否水平,默认为垂直方式 effectUnits:有效相关变化的单元数 itemPadding:调整每项的大小 attachEdge:icon 跟随的方向 分为 bottom,、center、top 三种 labelEdge:标签的显示位置:bottom,和 top conservativeTrigger:进入图标才展现鱼眼效果 --%> //主层
//下面为包含在主层中的子层 <%-- dojoType="dojox.widget.FisheyeListItem" 设置为子项 --%>
dijit.layout.TabContainer 让页面更有条理:dijit.layout.TabContainer  当一个页面内容比较多,比较复杂的时候,可以用标签页,将功能类似的一些表格或者信息放在同一个标签页内,用户可以方 便的在不同的标签页之间切换,关闭某个标签页,或者删除某个标签页。 一个最简单的例子: Button Widget Dojo Tests
hi
hi2
如果不同的标签也是单独不通的文件,我们可以在 dijit.layout.ContentPane 组件上设置 href 属性,指定到一个外部文件。需要 注意的是,那个页面必须是 utf-8 的字符集,否则的话中文会出现乱码。例如:
如果要动态添加一个标签页的话可以尝试下面的例子: 这个例子中使用了 iframe,主要原因:如果多个页面的话,很有可能有多个 form,form 之间如果有嵌套就会比较乱,所以分成 了独立的 iframe,当然完全可以在新建一个 ContentPane 的时候设置一下 href 属性,直接加载一个页面。 dijit.form.ValidationTextbox 功能强大的文本框:dijit.form.ValidationTextbox  这个文本输入框的功能比较强大,关键是它能够提供一些常用的验证和大小写转换。下面介绍一个例子和一些常用的属性: validationTextbox

一些属性:
required="true" //必须填写
trim="true" //将前后的空格自动删除
propercase="true" //单词首字母大写
uppercase="true" //大写字母形式
lowercase="true" //小写字母形式

验证文本组件可以支持正则表达式验证,比如:
不包含空格验证:
email 地址验证:
只允许输入数字:
ValidationTextbox 的一些常用方法: setValue(); //不要使用.value 或者.innerHTML 来设置值,你可能设置不成功或者失去校验 getValue(); validate(); 手工校验 isEmpty(); 是否为空 isValid(); 是否符合校验规则 关于校验的正则表达式法比较灵活,功能也非常强大,可以到微软或者 sun 的官方网站查看一些权威的资料。或者直接上网上 搜索一些常用的正则表达式。 下面给出一些常用正则表达式: 1、 非负整数:”^d+$” 2、 正整数:”^[0-9]*[1-9][0-9]*$” 3、 非正整数:”^((-d+)|(0+))$” 4、 负整数:”^-[0-9]*[1-9][0-9]*$” 5、 整数:”^-?d+$” 6、 非负浮点数:”^d+(.d+)?$” 7、 正浮点数:”^((0-9)+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*))$” 8、 非正浮点数:”^((-d+.d+)?)|(0+(.0+)?))$” 9、 负浮点数:”^(-((正浮点数正则式)))$” 10、英文字符串:”^[A-Za-z]+$” 11、英文大写串:”^[A-Z]+$” 12、英文小写串:”^[a-z]+$” 13、英文字符数字串:”^[A-Za-z0-9]+$” 14、英数字加下划线串:”^w+$” 15、E-mail 地址:”^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$” 16、URL:”^[a-zA-Z]+://(w+(-w+)*)(.(w+(-w+)*))*(?s*)?$” 17、匹配中文字符的正则表达式: [\u4e00-\u9fa5] 18、匹配双字节字符(包括汉字在内):[^\x00-\xff] 19、匹配 HTML 标记的正则表达式:/<(.*)>.*<\/\1>|<(.*) \/>/ 20、匹配国内电话号码:\d{3}-\d{8}|\d{4}-\d{7} 21、匹配中国邮政编码:[1-9]\d{5}(?!\d) 22、匹配身份证:\d{15}|\d{18} dijit.Dialog 带背景遮罩的对话框:dijit.Dialog  这个对话框通用性非常好。而且显示效果比较友好,能给使用者很好的体验。而且无论是正常方式,还是编程方式,实现起来 都比较简单。 对话框包括两种,一种是普通的对话框,一种是提示窗口的对话框,用起来都很方便。 下面是一个普通的对话框:  Dialog




遮罩的颜色可以通过设置.dijitDialogUnderlay 来控制 通过编程方式的一个对话框:  Dialog



遮罩的颜色可以通过设置.dijitDialogUnderlay 来控制   提示对话框的例子:  Dialog
显示登录表单



这个弹出式的对话框使用 DropDownButton 来实现比较方便,如果想要通过其他方式实现可能需要一些 dojo 的编程。
其实也可以使用 dijit.MasterTooltip 来实现类似的功能。
dijit.Menu 介绍一下使用 dojo 创建右键菜单,有的时候很有用的。 右键菜单的核心类是 dijit.Menu,菜单类是 dijit.MenuItem; 如果想要添加二级菜单,需要使用 dijit.PopupMenuItem; 如果只是简单的右键菜单,还需要设置一下 dijit.Menu 属性,设置 contextMenuForWindow="true" 下面这个是最简单的一个例子: 测试菜单 点右键测试菜单 如果想为菜单添加图标,使用 iconClass="dijitEditorIconCut" 在 MenuItem 上面。 dijit.TitlePane 带有标题的容器:dijit.TitlePane  TitlePane 的用处十分广泛,它可以是一个页面看上去很整齐,而且,它独特的隐藏显示内容的功能,可以节省页面很多的空间。 如果和 dnd 连在一起使用,还可以实现拖动,也就是让用户自定义自己的页面布局。下面一个简单的例子: titlepane
这是一个 TitlePan 的最简单例子
Dijit.TitlePane 也同样可以设置 href 属性,来链接到另外一个页面,都是通过 xhrGet 的方式从另一个页面返回数据的,所以要 注意汉字字符集问题。 可以调用方法:setTitle(str)来设置 Title 上面的汉字。 dijit.Tooltip 在大多数业务系统中,有很多表单的填写都很复杂,有些文本框的含义比较难理解。为了给使用者一个提示,html 默认有一个 title 属性,比如
test
,如果设置了这个属性,浏览器会在你鼠标停留在这个元素上的时候,给出你一个提 示。 后来微软为了解决

tooltip for id1 这个怎么样
tesdfdfdfdfdft
dijit/tooltip.js 还提供了另一个有用的工具 dijit.MasterTooltip 这个工具使用起来非常方便,只要 dojo.require(“dijit.Tooltip”)就可 以使用了,不需要用 html 标签定义,是编程来显示和隐藏的。主要就两个方法:第一:show;第二 hide。 例子: tooltip



    dijit.Tree 使用恐怖的 dijit.Tree  可以说 dojo0.9bate 的 dijit.Tree 太灵活了,功能太强大了。所以使用的时候定制和编程就要很多了。Dijit.Tree 数据源必须是 Store, 常用的是 dojo.data.JsonItemStore ,不能够使用 inline 方式。 下面给出两个例子,一个例子是最基础的,一个例子是动态生成的: TREE
动态添加树节点: function addNode(){ //add one treeNode var _tree=dijit.byId("tree"); var tdata={label:"FR",tree:_tree,item:{name:"FR",type:"one"}}; var child=new dijit._TreeNode(tdata); _tree.addChild(child,1); child._updateLayout(); _tree.getChildren()[2]._updateLayout(); child.setChildren({}); child._setExpando(); // console.debug(); } function addSecondNode(){ // add a treenode for FR var _tree=dijit.byId("tree"); var fr=_tree.getChildren()[1]; var tdata=[{label:"Paris",item:{type:"city",name:"Paris"}}]; fr.setChildren(tdata); fr.getChildren()[0].setChildren({}); fr.isFolder=true; fr.isExpanded=false; fr._updateLayout(); fr._setExpando(); } function addThirdNode(){ var _tree=dijit.byId("tree"); var fr=_tree.getChildren()[1]; var tdata={label:"pp",tree:_tree,item:{name:"pp",type:"city"}}; var child=new dijit._TreeNode(tdata); child.setChildren({}); fr.addChild(child); child._updateLayout(); fr.getChildren()[0]._updateLayout(); } 如果要懒加载一个树,就需要继承 JsonItemStore,可以参考/dojox/data/demos/里面的例子。如果想从其他数据源得到树,可 以参考 dojox.data 里面的其他 store.总之,tree 的数据源必须是 Store。 最新版本的 dojo 取消了 jsonitemstore,使用了 IterFileReadStore。(子节点的定义不一样了,多了个下划线。) 所以如果想要动态创建一个树,必须修改一下程序。 例子如下: test tree , dynamic add treenode

下载文档,方便阅读与编辑

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 6 金币 [ 分享文档获得金币 ] 2 人已下载

下载文档

相关文档