dojo(五):Dijit-基本组件

转自：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属性设置在任何的块级元素上。

<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>

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

声明式方式创建Button，看例子：

<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()方法。

dojo(五):Dijit-基本组件的更多相关文章

Android实训案例（五）——四大组件之一ContentProvider的使用，通讯录的实现以及ListView的优化
Android实训案例(五)--四大组件之一ContentProvider的使用,通讯录的实现 Android四大组件是啥这里就不用多说了,看图吧,他们之间通过intent通讯我们后续也会一一的为大 ...
微信小程序把玩（二十五）loading组件
原文:微信小程序把玩(二十五)loading组件 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否主要属性: wxml  <butt ...
微信小程序把玩（十五）checkbox组件
原文:微信小程序把玩(十五)checkbox组件不得不吐糟下checkbox默认样式真是有点略丑!!!checkbox组件为一个多选框被放到checkbox-group组中,并在checkbox-g ...
Vue(基础四)_总结五种父子组件之间的通信方式
一.前言这篇文章主要总结了几种通信方式: 1.方式一:使用props: [ ]和$emit() (适用于单层通信) 2.方式二:$attrs和$listeners(适用于多层) 3.方式三:中央处 ...
dojo 五配置dojoconfig
官方教程:Configuring Dojo with dojoConfig例子: <-- set Dojo configuration, load Dojo --> <script& ...
【React自制全家桶】五、React组件的生命周期函数详解
一.总览React组件的生命周期函数什么是生命周期函数:简单的来说就是在某个时刻会自动执行的函数二.React的生命周期函数主要由四块组成分别是:组件初始化.组件挂载.组件更新.组件卸载三. ...
Django框架（十五）—— forms组件、局部钩子、全局钩子
目录 forms组件.局部钩子.全局钩子一.什么是forms组件二.forms组件的使用 1.使用语法 2.组件的参数 3.注意点三.渲染模板四.渲染错误信息五.局部钩子 1.什么是局部钩子 ...
我心中的核心组件（可插拔的AOP）~第五回消息组件
回到目录之所以把发消息拿出来,完全是因为微软的orchard项目,在这个项目里,将公用的与领域无关的功能模块进行抽象,形成了一个个的组件,这些组件通过引用和注入的方式进行工作,感觉对于应用程序的扩展 ...
NHibernate系列文章十五：NHibernate组件
摘要前面文章介绍了NHibernate对简单.net数据类型的映射对照表.NHibernate也可以映射复杂数据类型,这里介绍通过组件映射NHibernate值对象. 1. NHibernate引用 ...

随机推荐

PHP - PDO 之 mysql 基础操作
<?php /* pdo 学习 */ $dsn = 'mysql:host=localhost;dbname=cswl';//构建连接dsn $db = new pdo($dsn,'root', ...
PDF合并
要求:将多个table导出到一个PDF里,然后打印. 问题分析:要求将四个table放一个PDF打印,四个table的列各不相同,第一个是表头,其他三个是列表,列比表头多很多,如果直接生成一个exce ...
SVN备份教程（二）
上次的博文中SVN备份教程(一)我们简单介绍了一下SVN备份是如何操作的,今天我们接着将上次的问题进行优化. 1.问题回顾在讲之前,我们先来将上次的问题重申一下.之前的SVN备份存在的问题很简单,每 ...
【BZOJ 1934】 [Shoi2007]Vote 善意的投票
Description 幼儿园里有n个小朋友打算通过投票来决定睡不睡午觉.对他们来说,这个问题并不是很重要,于是他们决定发扬谦让精神.虽然每个人都有自己的主见,但是为了照顾一下自己朋友的想法,他们也可 ...
http://blog.csdn.net/itplus/article/details/10088625
http://blog.csdn.net/itplus/article/details/10088625 DBSCAN
_CrtIsValidPointer 问题
从微软站点: 检查指针有效性下面的示例使用 _CrtIsValidPointer 验证给定的内存范围对于读或写是否有效. _ASSERTE(_CrtIsValidPointer( address, s ...
Visual C++ 6.0静态、动态链接库
1.什么是静态连接库,什么是动态链接库静态链接库与动态链接库都是共享代码的方式,如果采用静态链接库,则无论你愿不愿意,lib 中的指令都全部被直接包含在最终生成的 EXE 文件中了 ...
HDU1796+容斥原理
给定n和m个数,询问在小于n的数中有多少个能整除m中的某个数.. 容斥原理. PS:注意64位整数! /* 容斥原理 */ #include<stdio.h> #include<s ...
使用Data Annotations进行手动数据验证
Data Annotations是在Asp.Net中用于表单验证的它通过Attribute直接标记字段的有效性,简单且直观.在非Asp.Net程序中(如控制台程序),我们也可以使用Data Anno ...
pointcut 表达式的含义
execution(* com.spring.dao.*.add*(..)) 第一个*表示任意返回值第二个*表示com.spring.dao包中所有类第三个*表示以add开头的所有方法 (..)表 ...