dojo(五):Dijit-基本组件
发布时间:2020-12-16 21:33:43 所属栏目:百科 来源:网络整理
导读: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>
<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>
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |