版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
Dojo中文使用手册目录快速安装HelloWorld-第一个程序程序调试第一部分：使用Dojo-Dojo和Dijit例子第一个例子：为什么一些人不填写传真表单？第二个例子：总是点击两次第三个例子：和技术人员交谈第二部分Dijit-Dojo的小部件库概述共用特征表单、验证和个性化的文本输入框 表单小部件 复选框、单选框、切换（？） 组合框（ComboBox） 下拉过滤选择框（FilteringSelect） 数字选择框（NumberSpinner） 滑尺（Slider） 文本输入域（Textarea） 文本框类（验证、货币、数字、日期、时间）布局（只讲一个tabContainer）命令控制 按钮、组合按钮和下拉按钮 菜单 工具菜单用户使用帮助提示和反馈 进度条 提示 对话框和工具对话框 页框（TitlePane）高级功能（只讲一个Tree） 树（Tree）第三部分：使用Dojo和Dijit与javascript协作 通用性 初始对象 模块 建立和设计小部件 自已设计小部件类 事件系统 异步交互XMLHttpRequest(XHR) 拖拽 使用Dojo.Data接口 使用dojo.query选择DOM节点 回退按钮 其它功能 多个版本共处于一个页面第四部分：调试第五部分：Dojox扩展包 cometd(客户端) dojox图表 dojox集合 dojox加密 dojox数据 dojox网格（翻译） dojox离线（翻译）快速安装Dojo提供了三种安装方式:使用美国在线(AOL)的内容分发网络(CDN)上的dojo.在本地使用dojo的一个稳定版本.从dojo网站的SVN服务器上获取的最新代码.使用内容分发网络(CDN)上的Dojo这种方法非常的快捷!你能够通过添加一个<script>到美国在线(AOL)的内容分发网络(CDN)上,而无需占用你服务器上的任何空间和资源.所有在这本手册里出现的Dijit范例均通过此方法获取Dojo的js文件.你可以直接拷贝粘贴第1,2部分的任何例子到你自己的服务器上就可以正常的运行了!在第3部分的例子中,因为很多是一些代码片段,所以我们将提醒您如何做一些更改以便使这些例子正常运行.您可以使用:<scripttype="text/javascript"src=></script>来引用Dojo的js文件请参考:DojoAndAOL获取最新的引用链接.使用本地的Dojo如果您是Dojo的传统用户,你可以以以往的方式下载,安装,并且使用Dojo.从
/downloads下载最新的Dojo解压缩文件到本地服务器上.假设您将文件安装到/js目录下,其目录结构应该如下(注：dojo版本与本目录不相同，只有dojo、dijit、dojox三个子目录)。从您的浏览器中打开/js/dijit/themes/themeTester.html你就能够看到如下页面:这样你就已经成功安装Dojo了!这篇教程的目的是提供一个新手学习和了解Dojo的窗口。虽然内容不可能覆盖所有的细节信息(因为过多的细节对新手可能会产生负面影响),但是我们任然尽量将Dojo的大部分特性都介绍给大家.至于那些介绍到的概念等信息,您可以参考本文末尾的连接(获取更多资源一节FindingMoreResources)HelloWorld第一个程序准备工作跑在客户端的Dojo以及Dijit代码已证实可以在IE6,7,Firefox2和Safari上正常运行.建立Dojo首先,你需要在服务器端创建一个文件夹,取名为"HelloWorldTutorial"然后创建再创建一个取名为"dojoroot".最后,使用任何解压缩工具将Dojo压缩包解压缩到/HelloWorldTutorial/dojoroot.目录结构如下:正式开始当我们完成了上述准备工作,我们需要将Javascript组件放入我们的HTML页面当中.代码如下:<html>
<head>
<title>Dojo:HelloWorld!</title>
<!--SECTION1-->
<styletype="text/css">
@import"dojoroot/dijit/themes/tundra/tundra.css"
@import"dojoroot/dojo/resources/dojo.css"
</style>
<scripttype="text/javascript"src="dojoroot/dojo/dojo.js"
djConfig="parseOnLoad:true"></script>
</head>
<bodyclass="tundra">
</body>
</html>
正如你所看到的,这是一个个标准的HTML,其包含三个元素:*两个CSS文件.tundra.css是在本范例中Dijit使用的主题风格.*在head标签里的脚本元素(scriptelement).这个脚本元素负责加载基本的Dojo脚本,其作用是提供动态加载其他Dojo功能的能力.
*最后,我们将trundra作为body标签的class属性值.创建一个按钮小部件(ButtonWidget)好了,现在是最令人兴奋的部分!在这个例子里我们将创建一个拥有"HelloWorld!"文字的按钮小部件.在这里,我们将获取三个事件(mouseOut,mouseOver,mouseDown),这样,我们就能做一些其他事情,比如提高用户体验等.
我们要做的第一步是告诉Dojo去动态加载哪些模块.在head标签里,添加另外一个部分(这部分称作section2)到section1下面:<!--SECTION2-->
<scripttype="text/javascript">
//LoadDojo'scoderelatingtotheButtonwidget
</script>dojo.require作用是通知Dojo加载按钮的小部件(Buttonwidget).如果不加这一行,下面的代码将不能被Dojo解析,这样得到的将是普通的HTML按钮.
然后,请将下面的代码插入到html的body部分中.将一个事件和小部件相连起来如果点击这个按钮触发事件,Dojo将如何处理呢?我们只需要为这个按钮添加一个onClick事件处理函数.不过,Dojo还提供了一套简单而有效的办法:Dojo事件系统(Dojoeventsystem)!这种简单的绑定事件的方法是通过一个脚本标签(scripttag)来绑定事件.当然,这不是一个简单的脚本标签,它包含了一个"dojo/method"的type属性.就像这样:
HelloWorld!
<scripttype="dojo/method"event="onClick">
alert('Youpressedthebutton');
</script>
</button>是不是很简单？将脚本片段插入到标签当中的确是一个好主意。并且你还可以在脚本中利用DOMLevel2事件的全部功能。也就是说，你可以检测到SHIFT和CTRL键，获取所有的事件属性，以及HTML树在事件的冒泡阶段获取事件信息等。如果你曾经使用过DOMLevel2的事件，你就能理解IE与Firefox有多大差别了。通过使用Dojo，你不用多做任何处理就能很好的支持不同的浏览器。这也是Dojo的强大所在。通过服务器获取数据当你点击按钮就弹出一个对话框很不错吧？！但如果我们想从服务器获取数据怎么办？Dojo使用一个简洁的方法完成这一复杂的功能-dojo.xhrGet。为了引用方便，我们标记这一节代码在附带代码一节为HelloWorld-Section5.html和response.txt。首先，当数据从服务端返回时，我们需要一个回调函数去处理数据。将下面的代码插入到head标签里：<script>
functionhelloCallback(data,ioArgs){
alert(data);
}
functionhelloError(data,ioArgs){
alert('Errorwhenretrievingdatafromtheserver!');
}
</script>这里的两个参数很重要，请不要删除任意一个。第一个参数:data包含了从服务端返回的数据，第二个参数ioArgs包含了DojoI/O绑定对象(Bindobject)。我们现在只考虑第一个参数。第二步是使点击按钮触发服务端请求。将下面的代码：<scripttype="dojo/method"event="onclick">
alert('Youpressedthebutton');
</script>改为：<scripttype="dojo/method"event="onClick">
dojo.xhrGet({
url:'response.txt',
load:helloCallback,
error:helloError
});
</script>上面的代码主要目的是告诉Dojo查询指定的url，并且定义回调函数处理服务器端返回的数据。而后，我们需要在与HelloWorld相同路径下创建另外一个名为response.txt的文件。在这个文件中，你可以写上一些文字，比如:"WelcometotheDojoHelloWorldTutorial"。现在，如果你点击按钮，一个javascript的对话框将显示response.txt中的内容。真的很容易！下一步，我们将看看如何通过服务器端请求做一些有意义的事情。使用GET方法向服务器端传送数据从服务端传回静态的数据是个不错的开始。但是在现实生活中却并不常见。我们更需要提交一些信息供服务器端处理。在这一节中，我们将使用GET方法，而下一节我们将使用POST方法实现这一目标。为了引用方便，我们标记这一节代码在附带代码一节为HelloWorld-Section6.html。服务器端代码文件为："HelloWorldResponseGET."分别有以下几个后缀的文件：ASP('.asp'),PHP('.php'),ColdFusion('.cfm')或者Java('jsp')。
首先，在HelloWorld.html里需要添加一个输入框(InputElement)。将一下部分：
HelloWorld!
<scripttype="dojo/method"event="onClick">
dojo.xhrGet({
url:'HelloWorldResponseGET.php',
load:helloCallback,
error:helloError,
content:{name:dojo.byId('name').value}
});
</script>
</button>
Pleaseenteryourname:<inputtype="text"id="name">换为：
HelloWorld!
<scripttype="dojo/method"event="onClick">
dojo.xhrGet({
url:'HelloWorldResponseGET.php',
load:helloCallback,
error:helloError,
content:{name:dojo.byId('name').value}
});
</script>
</button>
Pleaseenteryourname:<inputtype="text"id="name">在下一步之前,我们需要注意的是在dojo.xhrGet方法中的url属性应该设置成与你的服务器环境相匹配的地址,如果你用ASP的服务器,则应该使用'HelloWorldResponseGET.asp'而不是'HelloWorldResponseGET.php',相似的,如果你使用ColdFusion服务器,则应该使用'HelloWorldResponseGET.cfm',如果是JSP服务器,则应该使用'HelloWorldResponseGET.jsp'等等.这些代码都将在下一节中出现,并且能够在本教程最后的附件中找到.这里的dojo.byId('name').value我们是第一次见到,很简单,其实这个方法是标准的document.getElementById(...)的简单写法.
最后,如果你将你的名字放到文本框中,然后点击"HelloWorld",一个信息框应该会显示出"Hello,welcometotheworldofDojo!"的信息,而你在文本框中输入的名字就会出现在那里.
下面是服务器端的脚本.一些能够从本页面的最下面下载.使用PHP服务器<?php
/*
*HelloWorldResponseGET.php
*
*
*Printthenamethatispassedinthe
*'name'$_GETparameterinasentence
*/
header('Content-type:text/plain');
print"Hello{$_GET['name']},welcometotheworldofDojo!n"$$
?>使用ASP服务器<%
'
'HelloWorldResponseGET.asp
'
'
'Printthenamethatispassedinthe
''name'GETparameterinasentence
'
response.ContentType="text/plain"
response.write("Hello"&request.querystring("name")&",welcometotheworldofDojo!n")
%>使用Java(JSP)服务器<%
/*
'HelloWorldResponseGET.jsp
'
'
'Printthenamethatispassedinthe
''name'GETparameterinasentence
*/
response.setContentType("text/plain");
%>
Hello<%=request.getParameter("name")%>,welcometotheworldofDojo!通过POST方法提交数据通过GET方法很有用,但是有些时候你却需要在传统的HTML的表单中使用Dojo去提高网站的用户体验.同样,Dojo提供了一个非常友善的方法.你可以从下面部分获得代码,或者,你也可以本文最末的连接处下载.最后提醒一下,就像上一节所述,你同样需要根据服务端脚本类型去改变url属性的值.<br>
Pleaseenteryourname:<inputtype="text"id="name">变为:
<br>
<formid="myForm"method="POST">
Pleaseenteryourname:<inputtype="text"name="name">
</form>然后,我们需要改变dojo的方法:<scripttype="dojo/method"event="onclick">
dojo.xhrGet({
url:'HelloWorldResponseGET.php',
load:helloCallback,
error:helloError,
content:{name:dojo.byId('name').value}
});
</script>变为:<scripttype="dojo/method"event="onclick">
//Don'tforgettoreplacethevaluefor'url'with
//thevalueofappropriatefileforyourserver
//(i.e.'HelloWorldResponsePOST.asp')foranASPserver
dojo.xhrPost({
url:'HelloWorldResponsePOST.php',
load:helloCallback,
error:helloError,
form:'myForm'
});
</script>接下来,你只要点击"HelloWorld"按钮,应该会弹出一个带有你名字的提示框"Hello,welcometotheworldofDojo!"使用PHP服务器:<?php
/*
*HelloWorldResponsePOST.php
*
*
*Printthenamethatispassedinthe
*'name'$_POSTparameterinasentence
*/
header('Content-type:text/plain');
print"Hello{$_POST['name']},welcometotheworldofDojo!n"$$
?>使用ASP服务器<%
'
'HelloWorldResponsePOST.asp
'
'
'Printthenamethatispassedinthe
''name'$_POSTparameterinasentence
'
response.ContentType="text/plain"
response.write("Hello"&request.form("name")&",welcometotheworldofDojo!n")
%>使用ColdFusion服务器<!
/*
*HelloWorldResponsePOST.cfm
*
*
*Printthenamethatispassedinthe
*'name'POSTparameterinasentence
*/
>
<cfsettingshowDebugOutput="No">
Hello,##,welcometotheworldofDojo!
</cfsetting>使用Java(JSP)服务器<%
/*
'HelloWorldResponsePOST.jsp
'
'
'Printthenamethatispassedinthe
''name'POSTparameterinasentence
*/
response.setContentType("text/plain");
%>
Hello<%=request.getParameter("name")%>,welcometotheworldofDojo!程序调试可以利用以下调试工具来进行调试。使用Firebug或者是FirebugLiteFirebug是最佳的调试工具。下载地址是：/。如果您不想用它，那么可以在IE或其它浏览器下使用FirebugLite。，但这种方式要求你必须在dojo里包含以下内容：<script//dojo/dojo.js"djConfig="parseOnLoad:true,isDebug:true"></script>第一部分：使用Dojo-Dojo和Dijit例子第一个例子：为什么一些人不填写传真表单？第二个例子：总是点击两次第三个例子：和技术人员交谈第一部分：使用Dojo-Dojo和Dijit例子略第二部分Dijit-Dojo的小部件库如果你没有使用Dojo的经历，那么从Dijit开始将是个好的起点。你可以通过它使用很少甚至不需要使用JS来建立符合web2.0的页面。Dijit有两种使用方式：在html标签里使用特殊属性的声明、通过JS实现。这两种方式都有相同的选项。像在第一部分里我们都使用声明的方式使用。第三部分将展示如何通过程序实现。Dijit是与它自己的主题绑定的，tundra主题给了针对所有小部件的一个通用的设计和色彩方案。你可以通过容器或元素的主题重构。Dijit被设计成通用的-适应用户不同的语言和文化以及相关的不同功能。语言翻译，双向文本，不同习惯的数字、日期都已经被封装了。服务器交互后的数据可能并没有考虑到本地习惯。所有的小部件都允许键盘操作和使用标准的主题，高对比模式的屏幕显示方式。Dijit概述Form,Validation,SpecializedInputCheckBoxComboBoxCurrencyTextBoxDateTextBoxFilteringSelectInlineEditBox0.9-1.0NumberSpinnerNumberTextBoxSliderTextareaTextareaexpandstofitcontentTextBoxTimeTextBoxValidationTextBoxLayoutAccordionContainerBorderContainer(newin1.1)ContentPaneSplitContainer(deprecatedin1.1)StackContainerTabContainerCommandControlButton,ComboButton,DropDownButtonMenuToolbarUserAssistanceandFeedbackDialogTooltipDialogProgressBarTitlePane（点击展开或收回）Tooltip高级编辑、显示部件ColorPaletteEditorGrid(1.0)InlineEditBox0.9-1.0属性，方法，扩展点每一个Dijit组件都有交互的点，你可以自定义他们。属性是用来控制显示或行为的数据元素。举个例子，ContentPane的标签（label）属性当pane是TabbedContainer的一部分时将显示。属性只能在创建的时候设置一次。这就是说，你可以在声明标签中设置它们，或者通过newdiji._()来设置它们。在此之后，你将不能直接设置。一些属性可以通过方法来改变，即使用setAtrributeName()来实现。后面我们在适用的时候会讲到。方法控制某些事情的函数。举个例子，在NumberSpinner中，用户可以点击上下按钮来调整数字大小。你可以通过adjust()方法来达到同样的效果。扩展点是一个你可以重构的函数。例如，VailiddationTextBox有个isValid()扩展点。如果你的校验包括几个域或需要更多更强大的规则时，你可以为它写个新的子类来提供你自己的校验函数。通用属性这些属性可以指定给任何小部件，作为普通html属性的补充。属性类型或值默认值说明idStringNone唯一的ID属性。如果不唯一，这指定的ID将被忽略并使用系统生成的ID.是最常用的通用属性。domNodeNodeNonethisisourvisiblerepresentationofthewidget!OtherDOMNodesmaybyassignedtootherproperties,usuallythroughthetemplatesystem'sdojoAttachPointsyntax,butthedomNodepropertyisthecanonical"toplevel"nodeinwidgetUI.Innon-templatedwidgets,thiswillequalthesrcNodeRef.langStringdjConfig.localeordefaultprovidedbynavigatorobjectoverridesthewidesettingtouseadifferentlanguageforthiswidgetonly.MustchoosefrombootstrappedlanguagesindjConfig.extraLocale.It'susuallybesttodefaulttothepagesettingssothatthepagecanbelocalizedwithasinglesettingorthedefault.Useofthisattributeistypicallylimitedtodemonstrationsorpageswithmultiplelanguagesbesidestheuser's.layoutAlignStringDependsonorderwithinLayoutContainer只适用dijit.layout.LayoutContainer中的Dijit组件.可能的值为:"left","right","bottom","top",和"client".LayoutContainer和它的子结点可以left/top/bottom/rightsrcNodeRefNodeDOMNodewhichhasthedojoTypeattribute.ConsiderthisattributeReadOnly.Intemplatedwidgets,usuallythisnodewilldisappear,replacedbyafilled-intemplate.扩展点方法和扩展点都是JS函数（译者注：即外部函数和内部函数的区别）。区别只是在于含义。我们用方法表示“程序员通常使用的函数”，而用扩展点表示“Dijit组件通常调用的函数”。没有技术上的原因限制你不能调用一个扩展点或重构一个函数，但要慎重。你可以很容易的提供一个扩展点函数。例如下面这个ValidationTextBox扩展：2.复制函数内容3.使用方法直接调用：<scripttype="dojo/method"event="isValid">//Flipacointodeterminevalidity.*evillaughter!*returnMath.round(Math.random()*100)%2==0;</script></div>当然，如果你的isValid函数对多个小部件相同，你不想逐个修改，你可以这样：1.按上述的前两步操作；//Flipacointodeterminevalidity.*evillaughter!*returnMath.round(Math.random()*100)%2==0;}你可以对Dijit做的其它事情你可以改变每个组件的风格，Dijit类，或创建全新的一个主题。“主题及设计”部分将会告诉你怎么做。你可以通过程序创建组件。所有的属性和方法、扩展点都可以通过js操作。你可以创建一个已有组件的子类，甚至自己写一个小部件。表单，验证，个性化的文本框下面的小部件可以用在表单标签内，也可以用在表单标签外。所有的表单部件继承了下面的属性和方法。很多都是充当html属性或方法的影子。如name和id.属性disabledBoolean是否要求本部件与客户交互？使用方法"disabled='disabled'",或者只是"disabled".创建后使用setAttribute("disabled",true/false)来改变intermediateChangesBoolean如果为true，每次触发onChange事件时都会调用setValue方法。如果为false,onChange事件触发时将会询问被调用者。例如，滑动条是个true时，将在鼠标拖动的任何一个点时将触发onChange,如果为false,那么只在释放鼠标时触发onChange。tabIndexInteger标签的顺序值方法focus设置部件为当前焦点getValue取得部件的值setValue设置部件的值reset重置部件值为初始值undo撤销最后一次修改的部件值1.1版本中的变化setAttribute控制部件的属性，如disabled,readonly等。但部件的值除外，改变部件的值要使用setValue()/getValue().像setDisabled()这样的方法已经取消。ExtensionPoints扩展点onChange当值改变时触发表单尽管你不需在中定义dijit表单元素,这么做只是让你有更好的方法和扩展点来使用。dijit.form.Form对html表单的重写方法getValues从表单部件的值生成JSON数据结构isValid如果每个部件isValid（）都返回true则返回truesetValues使用json数据填充表单（通过name，部件的值也是通过部件的name生成的）submit通过程序来提交表单扩展点execute当用户点击提交按钮时使用用户的自定义函数复选框，单选框，toggle按钮toggle按钮可以用在工具栏-加粗的按钮，所以有点像数据按钮，也有点像命令按钮。例子：复选框的例子：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"<html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>CheckboxExample</title><styletype="text/css">/dijit/themes/tundra/tundra.css";/dojo/resources/dojo.css"</style>djConfig="parseOnLoad:true"></script><scripttype="text/javascript">dojo.require("dojo.parser");</script></head><bodyclass="tundra">name="developer"checked="checked"value="on"type="checkbox"/><labelfor="cb">AreyouaDeveloper</label></body></html>单选按钮的例子：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"<html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>RadioButtonExample</title><styletype="text/css">/dijit/themes/tundra/tundra.css";/dojo/resources/dojo.css"</style>djConfig="parseOnLoad:true"></script><scripttype="text/javascript">dojo.require("dojo.parser");</script></head><bodyclass="tundra">checked="checked"value="metallica"type="radio"/><labelfor="sum1">Metallica</label>value="Extreme"type="radio"/><labelfor="sum2">Extreme</label>value="Slayer"type="radio"/><labelfor="sum3">Slayer</label></body></html>属性checkedString使用方法："checked='checked'"或"checked".True表示被选择.使用setChecked()来改变创建后的值方法setValue(/*Boolean*/checked)如果为true表示选择。扩展点onClick(/*Event*/e)单击事件键盘操作Tab在表单元素中移动，只会使之获得焦点。部件键盘操作ToggleButton空格键Checkbox空格键RadioButton方向键，上下左右。上左表示前一个，下右表示下一个。组合框(Combobox)组合框是介于select标签和文本框之间的一个组件。和select一样，提供了一个可选择值的列表（option），与select不同的是，和text一样，你可以忽略所有的选择项并属于任何你需要的信息。这特别适用于广泛的多种答案的问题。有两个域-一个是select选择域，一个是文本输入域-你可以只用其中的一个。注意，select总是有键/值对，如有option属性，并有键/值对。组合框(ComboBox)不是这样的，只能通过显示的文本-和文本框一样。例子：固定选项方式使用ComboBox非常类似<select>标签：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"<html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>SimpleComboBox</title><styletype="text/css">/dijit/themes/tundra/tundra.css";/dojo/resources/dojo.css"</style>djConfig="parseOnLoad:true"></script><scripttype="text/javascript">dojo.require("dojo.parser");functionsetVal1(value){console.debug("Selected"+value);}</script></head><bodyclass="tundra"><selectname="state1"autocomplete="false"value="California"onChange="setVal1"><optionselected="selected">California</option><option>Illinois</option><option>NewYork</option><option>Texas</option></select></body></html>该标签实现了值和自动完成功能。value属性可以设置默认值。option标签没有隐藏的提交值；如果要使用隐藏的值，那么你必须用FilterSelect，而不能用ComboBox。特别注意：ie7只有选择的option的值，对默认选中的值被忽略了。为了对选中的属性值不忽略，你必须对默认的值也设置option。ComboBox可以使用dojo.DataCombobox,FilterSelect,Tree和Grid都可以使用dojo.Data。这就是说，你可以使用option和tree来指定页面的数据，当然这个dojo.data是从服务器端获得的。统一的dojo.data能从各种渠道得到数据，包括数据库，webserivce,等。可以查看dojo.data手册来了解详细的信息。url="states.txt"></div>看起来像个部件，但它确实不是。（只有来源于dijit._的dojoType是部件）。这个标签利用了dojo.parser的优点，可以使用标准的html创建js对象。你可以查看dojo.parser来了解详细的信息。下面的例子使用了json数据，你可以下载states.txt，下面是个摘录：{identifier:"abbreviation",items:[{name:"Alabama",label:"Alabama",abbreviation:"AL"},{name:"Alaska",label:"Alaska",abbreviation:"AK"},{name:"AmericanSamoa",label:"AmericanSamoa",abbreviation:"AS"},{name:"Arizona",label:"Arizona",abbreviation:"AZ"},下面的例子使用了上述json数据：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"<html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>SimpleComboBox</title><styletype="text/css">/dijit/themes/tundra/tundra.css";/dojo/resources/dojo.css"</style>djConfig="parseOnLoad:true"></script><scripttype="text/javascript">dojo.require("dojo.parser");functionsetVal2(value){console.debug("Selected"+value);}</script></head><bodyclass="tundra">url="states.txt"></div>store="stateStore"value="California"searchAttr="name"name="state2"onChange="setVal2"/></body></html>jsId是url指定的全局变量的名字。jsId能从指定的url里提取数据，比如一个服务器端的应用。如果不使用url属性，你可以使用data属性直接嵌入数据。自动填充文本域，下拉列表值来自于数据提供值的类，这个类返回一个列表，这个列表是基于你输入的字符。属性autoCompleteBoolean
true自动完成hasDownArrowBoolean
true是否显示下拉箭头ignoreCaseBoolean
true如果true,则忽略大小写pageSizeInteger
Infinity数据提供者的参数。指定每页的列表条数queryObject
{}初始状态下用来过滤数据，即没有输入字符和使用searchAttr时的过滤searchAttrString
name过滤数据使用的字段searchDelayInteger
100提示延迟时间storeObjectComboBox使用的数据仓库键盘操作ActionKey打开下拉列表(以当前的输入过滤)下通过下拉列表定位上、下选择选项回车关闭下拉列表Esc下拉过滤组件（FilteringSelect）FilteringSelect和html的select标签一样，但它是动态的。它对大数据量支持的非常好，因为它可以只加载需要的数据。和ComboBox类似，但它不允许下拉列表中没有的值。当你试图提交一个无效的输入时（不在下拉列表中），将会得到一个警告，但仍保持原来的输入的有效的值。如果你选择文本框并按下ESC时，显示的值会自动转换成最后一次有效的值。这将保证你永远都是输入的有效值。例子首先要有个带有数据的标签<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"<html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>FilterSelectExample1</title><styletype="text/css"></style>djConfig="parseOnLoad:true"></script><scripttype="text/javascript">dojo.require("dojo.parser");</script></head><bodyclass="tundra">name="state3"autocomplete="false"value="CA"><optionvalue="CA"selected="selected">California</option><optionvalue="IL">Illinois</option><optionvalue="NY">NewYork</option><optionvalue="TX">Texas</option></select></body></html>和ComboBox一样，有个value属性。和ComboBox不一样，这个值指的是option的value属性。如：如果你设置值为AL，文本Alabama将会显示在文本框里。如果你想通过程序来改变value属性，使用下面方法：dijit.byId("部件的ID").setValue("部件隐藏的值而非显示的值")和ComboBox一样，FilteringSelect也支持dojo.data。使用dojo.data的数据，你可以指定一个identifier来表示你数据的最上层。identifier告诉你这个数据中对应提交的value是什么：identifier:"abbreviation",items:[{name:"Alabama",label:"Alabama",abbreviation:"AL"},...下面的代码表示identifier为abbreviation，identifier指定提交时实际提交的是abbreviation对应的值。在这个例子里，如果选择的是abbreviation那么AL将被提交到服务器。<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"<html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>Data-EnabledFilteringSelect</title><styletype="text/css"></style>djConfig="parseOnLoad:true"></script><scripttype="text/javascript">dojo.require("dojo.parser");</script></head><bodyclass="tundra">url="states.txt"></div><formmethod="post">store="stateStore"searchAttr="name"name="state1"autocomplete="true"/><inputtype="submit"value="Go!"/></form></body></html>属性autoCompleteBoolean
true自动完成hasDownArrowBoolean
true是不显示下拉箭头ignoreCaseBoolean
true是否忽略大小写labelAttrString
searchAttr显示的值的过滤，如果没有设置，将使用searchAttrlabelTypeString
text"html"或"text"pageSizeInteger
Infinity每页列表条数queryObject
{}初始状态下用来过滤数据，即没有输入字符和使用searchAttr时的过滤searchAttrString
name过滤数据使用的字段searchDelayInteger
100提示延迟时间storeObjectComboBox使用的数据仓库，注意，是对象,此处文档是错误的方法setDisplayedValue(/*String*/label)把显示的值设为"label"setValue(/*String*/value)把隐藏键值设为"value"，这个更有用键盘操作ActionKey打开下拉列表(以当前的输入过滤)下通过下拉列表定位上、下选择选项回车关闭下拉列表EscInlineEditBox(0.9)1.0以后的版本已经被dijit.InlineEditBox代替。数字输入框（NumberSpinner)很简单，只举个例子并列出属性。<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"<html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>NumberSpinnerDemo</title><styletype="text/css">/dijit/themes/tundra/tundra.css";/dojo/resources/dojo.css"</style>djConfig="parseOnLoad:true"></script><scripttype="text/javascript">dojo.require("dojo.parser");</script></head><bodyclass="tundra">value="1000"smallDelta="10"constraints="{min:9,max:1550,places:0}"maxlength="20"id="integerspinner2"></body></html>属性constraintsObject
{}最小和最大值。参见ValidationTextBox.defaultTimeoutInteger
500默认超时时间invalidMessageString
localedep.值无效时显示的提示信息内容intermediateChangesBooleanIftrue,数字变动即触发，否则当释放鼠标时触发largeDeltaNumber
10每使用一次pagedown/pageup时变动的值promptMessageString提示的信息rangeMessageString超出设定区间时的提示信息requiredBoolean
truesmallDeltaNumber
1每点一下鼠标变动的值timeoutChangeRateNumber
0.90每次点击间隔的时间trimBoolean
false删除空格.默认为false.滑杆（Slider）<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"<html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>SliderExample1</title><styletype="text/css">/dijit/themes/tundra/tundra.css";/dojo/resources/dojo.css"</style>djConfig="parseOnLoad:true"></script><scripttype="text/javascript">dojo.require("dojo.parser");</script></head><bodyclass="tundra">value="5"minimum="-10"maximum="10"discreteValues="11"intermediateChanges="true"onChange="dojo.byId('horizontalSlider').value=arguments[0];"/dijit/themes/tundra/images/preciseSliderThumb.png"></div></body></html>属性clickSelectboolean
trueIfclickingtheprogressbarchangesthevalueornotdiscreteValuesinteger
InfinityThemaximumallowedvaluesdispersedevenlybetweenminimumandmaximum(inclusive).intermediateChangesBoolean
falseIftrue,triggeranonChangeeventeverytimesetValueiscalled.Iffalse,triggeronChangeonlywhenaskedbythecallee.Forexample,onSlideratruevaluewouldfireonChangeeventsateachpointofthemousedrag.FalsewouldtriggeronChangeonlyonmouseUp.maximuminteger
100Themaximumallowedvalue.minimuminteger
0Theminimumvalueallowed.pageIncrementinteger
2Theamountofchangewithpageup/pagedownshift+arrowshowButtonsboolean
trueShowincrement/decrementbuttonsattheendsoftheslider?MethodssetValue((/*Number*/value,/*Boolean,optional*/priorityChange)RegularsetValue,butifpriorityChangeistrue,thenitismorelikelytobeanimated.dijit.form.HorizontalRule,dijit.form.VerticalRuleCreatehashmarksfortheHorizontal/VerticalsliderAttributescontainerNode
containerNodeIfthisisachildwidget,connectittothisparentnodecountInteger
3NumberofhashmarkstogenerateruleStyleStringCSSstyletoapplytoindividualhashmarksdijit.form.HorizontalRuleLabels,dijit.form.VerticalRuleLabelsCreatelabelsfortheSliderAttributeslabelsArray
[]Arrayoftextlabelstorender-evenlyspacedfromleft-to-rightorbottom-to-toplabelStyleStringCSSstyletoapplytoindividualtextlabels文本框:Validation,Currency,Number,Date,Time页框（TabContainer）页框是多个页面，但同时只能显示一个。有一系列的页框头和可选的关闭按钮。例子：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"<html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 强夯工程施工合同
- 土方运输合同
- 印刷报价单合同范本
- 2024年度赛事市场开发合同
- 2024年鱼、虾、贝、藻类基因工程体项目资金筹措计划书代可行性研究报告
- 二零二四年度广告合同具体描述2篇
- 2024年上海单位员工信息安全保密合同3篇
- 《金威水炮设计手册》课件
- 2024年度股权转让合同标的与股权变更细节规定
- 2024年多肉植物行业现状分析：多肉植物最高转化率可以达到58.36%
- 礼盒销售方案
- 茶百道整合营销方案
- 建筑工程大学生职业生涯规划
- 腰椎间盘突出症一病一品
- 2024-2024英语全国卷一完形填空整合
- 2024年湖北兴发化工集团股份有限公司招聘笔试参考题库含答案解析
- 脑梗死伴高血压3级病例分析专题报告
- 孕妇心衰健康宣教
- 2021年《建设工程施工合同司法解释一》学习解读
- 工程量计算表(模板)
- 急诊科的工作风险与安全防范措施
评论
0/150
提交评论