当前位置 : 主页 > 网页制作 > Dojo >

dojo(五):Dijit-基本组件

来源:互联网 收集:自由互联 发布时间:2021-06-15
1、简介 Dijit是Dojo的UI框架,包含一系列丰富的组件以帮助你快速开发Web程序。考虑到大部分Web页面都是表单元素(指允许用户输入的组件,通常会被传送到服务器进行处理)。Dijit有很

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>
    <!-- load Dojo -->
    <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>
<!-- set the claro class on our body element -->
<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()方法。
网友评论