dojo(五):Dijit-基本組件

時間 2019-12-08

標籤 dojo dijit 基本組件欄目 Dojo 简体版

原文原文鏈接

轉自：http://blog.csdn.net/trendgrucee/article/details/12679949css

Dijit是Dojo的UI框架，包含一系列豐富的組件以幫助你快速開發Web程序。考慮到大部分Web頁面都是表單元素（指容許用戶輸入的組件，一般會被傳送到服務器進行處理）。Dijit有不少基於表單的組件，包括按鈕、文本框、可校驗文本框、進度條等等。html

另外，Dijit包含了一個可用的主體框架來定義Dijit的視覺效果。Dijit有四個主題：Claro,Tundra,Soria和Nihilo.編程

使用Dijit的主題，須要作兩件事情：引入主題的css文件、在頁面的body元素上設置CSS clsass屬性。你也能夠把主題的CSS屬性設置在任何的塊級元素上。api

[html] view plain copy

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

聲明式方式建立Button，看例子：sass

[html] view plain copy

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

[html] view plain copy