dojo(五):Dijit-基本组件

时间:2014-06-25 17:55:10   收藏:0   阅读:414

转自:http://blog.csdn.net/trendgrucee/article/details/12679949

1、简介

Dijit是Dojo的UI框架,包含一系列丰富的组件以帮助你快速开发Web程序。考虑到大部分Web页面都是表单元素(指允许用户输入的组件,通常会被传送到服务器进行处理)。Dijit有很多基于表单的组件,包括按钮、文本框、可校验文本框、进度条等等。

另外,Dijit包含了一个可用的主体框架来定义Dijit的视觉效果。Dijit有四个主题:Claro,Tundra,Soria和Nihilo.

2、使用Dijit主题

使用Dijit的主题,需要做两件事情:引入主题的css文件、在页面的body元素上设置CSS clsass属性。你也可以把主题的CSS属性设置在任何的块级元素上。

 

[html] view plaincopy
 
  1. <head>  
  2.     <meta charset="utf-8">  
  3.     <title>Hello Dijit!</title>  
  4.     <!-- load Dojo -->  
  5.     <script src="dojo-release-1.9.1/dojo/dojo.js" data-dojo-config="async:true"></script>  
  6.     <link rel="stylesheet" href="dojo-release-1.9.1/dijit/themes/claro/claro.css">  
  7. </head>  
  8. <!-- set the claro class on our body element -->  
  9. <body class="claro">  
  10.     <h1 id="greeting">Hello</h1>  
  11.     <button>click me</button>  
  12. </body>  

3、以Button为例介绍基本组件的用法

声明式方式创建Button,看例子:

 

[html] view plaincopy
 
  1. <body class="claro">  
  2.     <div id="btn1" data-dojo-type="dijit/form/Button"  
  3.             data-dojo-props="label:‘click me‘,onClick:function(){console.log(‘yes,clicked‘);}">  
  4.     </div>  
  5.     <script>  
  6.        require(["dijit/form/Button","dojo/parser","dojo/domReady!"]);  
  7.     </script>  
  8. </body>  

编程式方式创建Button,看例子:

 

 

[html] view plaincopy
 
  1. <div id="btn2"></div>  
  2.     <script>  
  3.        require(["dijit/form/Button","dojo/domReady!"],function(Button){  
  4.            var button = new Button({  
  5.                label:‘Button2‘,  
  6.                onClick:function(){console.log("Button2 Clicked.");}  
  7.            },"btn2");  
  8.            button.startup();  
  9.        });  
  10.     </script>  

dojo(五):Dijit-基本组件,布布扣,bubuko.com

原文:http://www.cnblogs.com/cugwx/p/3805946.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!