转自：http://blog.csdn.net/trendgrucee/article/details/12679949css
一、简介
Dijit是Dojo的UI框架，包含一系列丰富的组件以帮助你快速开发Web程序。考虑到大部分Web页面都是表单元素（指容许用户输入的组件，一般会被传送到服务器进行处理）。Dijit有不少基于表单的组件，包括按钮、文本框、可校验文本框、进度条等等。html
另外，Dijit包含了一个可用的主体框架来定义Dijit的视觉效果。Dijit有四个主题：Claro,Tundra,Soria和Nihilo.编程
二、使用Dijit主题
使用Dijit的主题，须要作两件事情：引入主题的css文件、在页面的body元素上设置CSS clsass属性。你也能够把主题的CSS属性设置在任何的块级元素上。api
- <head>
- <meta charset="utf-8">
- <title>Hello Dijit!</title>
-
- <script src="dojo-release-1.9.1/dojo/dojo.js" data-dojo-config="async:true"></script>
- <link rel="stylesheet" href="dojo-release-1.9.1/dijit/themes/claro/claro.css">
- </head>
- <body class="claro">
- <h1 id="greeting">Hello</h1>
- <button>click me</button>
- </body>
三、以Button为例介绍基本组件的用法
声明式方式建立Button，看例子：sass
- <body class="claro">
- <div id="btn1" data-dojo-type="dijit/form/Button"
- data-dojo-props="label:'click me',onClick:function(){console.log('yes,clicked');}">
- </div>
- <script>
- require(["dijit/form/Button","dojo/parser","dojo/domReady!"]);
- </script>
- </body>
- data-dojo-type：指定咱们要使用dijit的Button控件
- data-dojo-props：设置Button控件的属性，能够查看Button的Api肯定有哪些属性能够设置(不只属性能够设置，方法也能够设置）
- 能够看到咱们在最后的一段script中不只引入了须要的Button模块，还引入了dojo/parse模块，若是不引入此模块，按钮没法显示，而且事件没法处理。关于dojo/parser模块的做用，咱们会在下一篇博客中介绍。如今你只须要知道若是使用声明式使用dijit控件，须要在引入dojo.js的地方时，经过data-dojo-config设置属性parseOnLoad:true（官方文档上这么说，上面的例子没有设置这个属性也能正常运行，待确认)，而且引入dojo/parser模块。
编程式方式建立Button，看例子：服务器
- <div id="btn2"></div>
- <script>
- require(["dijit/form/Button","dojo/domReady!"],function(Button){
- var button = new Button({
- label:'Button2',
- onClick:function(){console.log("Button2 Clicked.");}
- },"btn2");
- button.startup();
- });
- </script>
- 查询Button的api查看new Button的参数设置。
- startup函数：编程式方式建立一个组件以后，应该老是调用组件的startup()方法。编程式建立组件的一个常见的错误就是忘记调用startup()方法。