第一部分： Dijit 2.2 加些装饰

回到目录

04/01/2007 - 19:29 — criecke

让我们先看一下表单的HTML代码

< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8" >
< title >缴税，和死亡一样会发生的事情 ! </ title >
</ head >
< body >

< H1 > 2007 税单 </ H1 >
< P > The Sovreign Nation of Googolica,  In Search We Trust </ P >

< FORM >
姓:  < input  type ="text"  length ="20"  name ="first"   />< br />
名:  < input  type ="text"  length ="20"  name ="last"   />< br />
邮件地址:  < input  type ="text"  length ="20"  name ="email" />< br />
< hr >

< ol >
< li > 请输入2007的税前收入
< input  type ="text"  length ="10"  name ="grossIncome"   /></ li >
< li > Please enter the value from line 1.  This is your  < em > 2007 tax </ em >  
< input  type ="text"  length ="10"  name ="tax"   /></ li >
< li > 你是否愿意为总统竞选基金捐款3美元? 
< input  type ="checkbox"  name ="campaign"  value ="Y"   /></ li >
</ ol >
< br />
< input  type ="submit"  value ="确定"   />
</ FORM >
</ body >

 非常标准的内容。使用Dojo改变几个tag和属性，我们可以用几行JavaScript来改善困扰我们的问题。

神奇之处就在于dijits- Dojo部件（dojo widgets）的简称。Dijits可以执行从装饰一般表单，到控制文章的布局等各种任务。

Dijits预备

要使用dijits你必须在每页上加2个代码段：

• HEAD代码段，用于装载样式（style sheet）和Dojo库，并调用方法装载入单独的dijit类型。
• 给BODY标签增加一个class，用于指定主题（theme）的名字。在例子中我们使用了 "Tundra" 主题。

如下是HEAD代码段: 

< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8" >
< title > Taxes, The Surest Thing Next to Death! </ title >

<link rel=stylesheet href="../js/dijit/themes/tundra/tundra.css" type="text/css">
<script type="text/javascript" src="../js/dojo/dojo.js" 

      </script>...

<script language="JavaScript" type="text/javascript">
    dojo.require("dijit.util.parser");    
    // dojo.require statements will go here when we figure out the wijits we need
</script>

</ head >

 这个一个非常标准的代码块，如果你的开发环境支持拖拉代码，那马上就可以弄好。Tundra是dijit的缺省主题，主题是在各个元素上统一的颜色和设计风格。主题在这里[Themes]被详细讨论,dojit预装了几个非常不错的主题，当然你也可以自己写一个。其他的申明由许多的选项，我们会在[Header Options]中看到.

第二个代码段就非常简单了

< body  class="tundra" >

如果不这样写，你的wijits将看上去非常奇怪，他们严重依赖于css。

把普通INPUT标签变成Wijits

Dijit 引入了一个新的属性 "dijitType".你只需要在tag上加上，就可以让你的tag“dijit”化。注意：下面的例子用的是dojoType, 但从0.9M1版本开始就会改成dijitType 了.

 

< FORM >
First Name:  < input  type ="text"  length ="20"  name ="first"   dojoType ="dijit.form.Textbox"   />< br />
Last Name:  < input  type ="text"  length ="20"  name ="last"   dojoType ="dijit.form.Textbox"    />< br />
Email Address:  < input  type ="text"  length ="20"  name ="email"   dojoType ="dijit.form.Textbox" />< br />
< hr >

< ol >
< li > Please Enter Your 2007 Gross Income 
< input  type ="text"  length ="10"  name ="grossIncome"   dojoType ="dijit.form.Textbox"   /></ li >
< li > Please enter the value from line 1.  This is your  < em > 2007 tax </ em >  
< input  type ="text"  length ="10"  name ="tax"   dojoType ="dijit.form.Textbox"   /></ li >
< li > Would you like to contribute an extra $3 to the Presidential Campaign Fund? 
< input  type ="checkbox"  name ="campaign"  value ="Y"   dojoType ="dijit.form.Checkbox"   /></ li >
</ ol >

我们使用dijitTypes [dijit.form.TextBox] 和[dijit.form.Checkbox]. 现在我们需要在head代码段上加一些代码。

< script  language ="JavaScript"  type ="text/javascript" > ...
    dojo.require("dijit.util.parser");
    dojo.require("dijit.form.Textbox");
    dojo.require("dijit.form.Checkbox");
</ script >

我们得到了什么?

表单现在看起来已经好多了

[LIVE DEMO]

现在非常清楚哪个字段获得了焦点，边框变黑了，the gradient fill turns upside down. 很小的改进，但非常有助于找到小的插入点。检查框使用了一个时髦的图标，看起来漂亮多了。

接下来让我们来加些实质性的内容。。。

 

回到目录