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

  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，看例子：

  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>
  • 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，看例子：

  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>
  • 查询Button的api查看new Button的参数设置。
  • startup函数：编程式方式创建一个组件之后，应该总是调用组件的startup()方法。编程式创建组件的一个常见的错误就是忘记调用startup()方法。

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

  1. Android实训案例（五）——四大组件之一ContentProvider的使用，通讯录的实现以及ListView的优化

    Android实训案例(五)--四大组件之一ContentProvider的使用,通讯录的实现 Android四大组件是啥这里就不用多说了,看图吧,他们之间通过intent通讯 我们后续也会一一的为大 ...

  2. 微信小程序把玩（二十五）loading组件

    原文:微信小程序把玩(二十五)loading组件 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否 主要属性: wxml <!----> <butt ...

  3. 微信小程序把玩（十五）checkbox组件

    原文:微信小程序把玩(十五)checkbox组件 不得不吐糟下checkbox默认样式真是有点略丑!!!checkbox组件为一个多选框被放到checkbox-group组中,并在checkbox-g ...

  4. Vue(基础四)_总结五种父子组件之间的通信方式

    一.前言 这篇文章主要总结了几种通信方式: 1.方式一:使用props: [ ]和$emit()  (适用于单层通信) 2.方式二:$attrs和$listeners(适用于多层) 3.方式三:中央处 ...

  5. dojo 五 配置dojoconfig

    官方教程:Configuring Dojo with dojoConfig例子: <-- set Dojo configuration, load Dojo --> <script& ...

  6. 【React自制全家桶】五、React组件的生命周期函数详解

    一.总览React组件的生命周期函数 什么是生命周期函数:简单的来说就是 在某个时刻会自动执行的函数 二.React的生命周期函数主要由四块组成 分别是:组件初始化.组件挂载.组件更新.组件卸载 三. ...

  7. Django框架（十五）—— forms组件、局部钩子、全局钩子

    目录 forms组件.局部钩子.全局钩子 一.什么是forms组件 二.forms组件的使用 1.使用语法 2.组件的参数 3.注意点 三.渲染模板 四.渲染错误信息 五.局部钩子 1.什么是局部钩子 ...

  8. 我心中的核心组件（可插拔的AOP）~第五回 消息组件

    回到目录 之所以把发消息拿出来,完全是因为微软的orchard项目,在这个项目里,将公用的与领域无关的功能模块进行抽象,形成了一个个的组件,这些组件通过引用和注入的方式进行工作,感觉对于应用程序的扩展 ...

  9. NHibernate系列文章十五：NHibernate组件

    摘要 前面文章介绍了NHibernate对简单.net数据类型的映射对照表.NHibernate也可以映射复杂数据类型,这里介绍通过组件映射NHibernate值对象. 1. NHibernate引用 ...

随机推荐

  1. 让用户打开你app的位置功能

    +运动 http://www.ccidnet.com/2015/0819/10014152.shtml 让你的app不再是一个购物网站, 而是一种生活方式, 逛街,在实体店逛街积累里程,兑换积分  送 ...

  2. Indri中的动态文档索引技术

    Indri中的动态文档索引技术 戴维 译 摘要: Indri 动态文档索引的实现技术,支持在更新索引的同时处理用户在线查询请求. 文本搜索引擎曾被设计为针对固定的文档集合进行查询,对不少应用来说,这种 ...

  3. 1014: [JSOI2008]火星人prefix - BZOJ

    Description 火星人最近研究了一种操作:求一个字串两个后缀的公共前缀.比方说,有这样一个字符串:madamimadam,我们将这个字符串的各个字符予以标号:序号: 1 2 3 4 5 6 7 ...

  4. 第一章 Spring整体框架和环境搭建

    1.Spring 的整体架构 Spring框架主要由7大模块组成,它们提供了企业级开发需要的所有功能,而且每个模块都可以单独使用,也可以和其他模块组合使用,灵活且方便的部署可以使开发的程序更加简洁灵活 ...

  5. replace()替换文字扑获组做法

    var txt = "12312131283", str = txt.replace(/(12(.3))/g,"中文$2");//$1是针对前面的扑获组()的如 ...

  6. 团体程序设计天梯赛-练习集L1-019. 谁先倒

    L1-019. 谁先倒 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 划拳是古老中国酒文化的一个有趣的组成部分.酒桌上两人划拳 ...

  7. 汇编invoke和call的关系

    win32汇编里面,我们既可以用invoke也可以用call调用子程序/函数,不过invoke使用简单方便,所以绝大多数情况我们都用invoke. 但是很多人只是知道使用它,对它却不是很了解.我以前对 ...

  8. c++内存中字节对齐问题详解

    一.什么是字节对齐,为什么要对齐?    现代计算机中内存空间都是按照byte划分的,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定类型变量的时候经常在特 定的内存地址 ...

  9. 咦，为DJANGO的ORM的QUERYSET增加数据列的样码，很好用哟

    这个我真的没有查资料,是通过直觉和经验弄出来的,哈哈,感觉用深一点好. 这样在模板输出时,就更好控制啦.. if self.kwargs: if self.kwargs.has_key('search ...

  10. zoj 3380 Patchouli's Spell Cards 概率DP

    题意:1-n个位置中,每个位置填一个数,问至少有l个数是相同的概率. 可以转化求最多有l-1个数是相同的. dp[i][j]表示前i个位置填充j个位置的方案数,并且要满足上面的条件. 则: dp[i] ...