web前端之dojo实际应用及开发五：丰富的用户界面（附有源码）
现在我们就使用dojo的Dijit工具包来丰富用户界面：
那Dijit的界面组件有哪些呢？日历、调色板、对话框（模态（modal）或非模态）、富文本编辑器、内嵌编辑器、菜单栏和上下文菜单、进度条、折叠菜单和面板、工具栏、工具提示、树等组件。DojoX 扩展库还提供了一系列额外的组件，包括网格、图表、视频播放器、灯箱效果等。那么现在就让我们来进行学习吧：
基本 Dijit 模板：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>基本Dijit模板</title>
<link rel="stylesheet" type="text/css" href="../dojoroot/dijit/themes/claro/claro.css">
<style type="text/css">
body,html{
font-family: helvetica,arial,sans-serif;
font-size: 90%
}
</style>
</head>
<body class="claro">
<script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dijit.dijit");
//Add Dijit components you are using here using dojo.require
dojo.addOnLoad(function(){
//JavaScript content here
});
</script>
</body>
</html>djConfig=”parseOnLoad: true” 属性，告诉 Dojo 它要使用 HTML 解析器，并寻找带有 dojoType 属性的 HTML 元素。为 “dijit.dijit” 添加了一个 dojo.require 声明，优化 Dijit 的加载。定义了模板之后，后续就可以在应用程序内使用 Dijit 组件了。
Dijit 日历、调色框、下拉组件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>基本Dijit模板</title>
<link rel="stylesheet" type="text/css" href="../dojoroot/dijit/themes/claro/claro.css">
<style type="text/css">
body,html{
font-family: helvetica,arial,sans-serif;
font-size: 90%
}
</style>
</head>
<body class="claro">
<script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dijit.dijit");
//Add Dijit components you are using here using dojo.require
dojo.require("dijit._Calendar");//调用日历
dojo.require("dijit.TitlePane");//调用下拉
dojo.require("dijit.ColorPalette");//调用调色框
dojo.addOnLoad(function(){
//JavaScript content here
});
</script>
<div dojoType="dijit._Calendar"></div><!-- 日历 -->
<div dojoType="dijit.TitlePane" title="Color Picker"><!-- 下拉框 -->
<div dojoType="dijit.ColorPalette"></div><!-- 调色框 -->
</div>
</body>
</html>在dojo.require(“dijit.dijit”);后面必须添加dojo.require(“dijit._Calendar”);dojo.require(“dijit.TitlePane”);dojo.require(“dijit.ColorPalette”)；才能导入dijit工具。并用dojoType=”dijit._Calendar”等来分别调用，两者缺一不可，必须要一样。
dijit工具改进版：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Dijit模板进行改进</title>
<link rel="stylesheet" type="text/css" href="../dojoroot/dijit/themes/claro/claro.css">
<style type="text/css">
body,html{
font-family: helvetica,arial,sans-serif;
font-size: 90%
}
</style>
</head>
<body class="claro">
<script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dijit.dijit");
//Add Dijit components you are using here using dojo.require
dojo.require("dijit._Calendar");//调用日历
dojo.require("dijit.TitlePane");//调用下拉
dojo.require("dijit.ColorPalette");//调用调色框
dojo.addOnLoad(function(){
//JavaScript content here
});
</script>
<div dojoType="dijit._Calendar"></div><!-- 日历 -->
<div dojoType="dijit.TitlePane" title="Color Picker"><!-- 下拉框 -->
<div dojoType="dijit.ColorPalette">
<script type="dojo/method" event="onChange" args="evt">
//定义应将此代码绑定到哪个事件，使用 args 属性将所有参数传递给函数。
alert(this.value);
</script>
</div><!-- 调色框 -->
</div>
</body>
</html>点击调色板相应的颜色，就会得出其对应的颜色属性。script type=”dojo/method” event=”onChange” args=”evt” ；type必须是：”dojo/method”，event：你学要进行的是什么事件，args：将所有参数传递给函数。
使用JavaScript处理dijit：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>JavaScript改进Dijit模板</title>
<link rel="stylesheet" type="text/css" href="../dojoroot/dijit/themes/claro/claro.css">
<style type="text/css">
body,html{
font-family: helvetica,arial,sans-serif;
font-size: 90%
}
</style>
</head>
<body class="claro">
<script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dijit.dijit");
dojo.require("dijit.Calendar");//调用日历
dojo.addOnLoad(function(){
var calendar=new dijit.Calendar({},"myCalendar");
});
</script>
<div id="myCalendar"></div>
</body>
</html>dojo.addOnLoad(function(){}里面添加new dijit.Calendar({},myCalendar);
其中新建的new dijit.Calendar()；第一个参数为空，第二个是ID名称。第一个的{}里面为对应的参数。
JavaScript进行内容的嵌套：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>JavaScript改进Dijit模板</title>
<link rel="stylesheet" type="text/css" href="../dojoroot/dijit/themes/claro/claro.css">
<style type="text/css">
body,html{
font-family: helvetica,arial,sans-serif;
font-size: 90%
}
</style>
</head>
<body class="claro">
<script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dijit.dijit");
//Add Dijit components you are using here using dojo.require
dojo.require("dijit.TitlePane");//调用下拉
dojo.require("dijit.ColorPalette");//调用调色框
dojo.addOnLoad(function(){
/*
var colorPalette=new dijit.ColorPalette({
onChange:function(evt){
alert(this.value);
}
});*/
//也可以以下这种方式：
var colorPalette=new dijit.ColorPalette({});
dojo.connect(colorPalette,"onChange",null,function(evt){
alert(this.value);
});
var titlePane=new dijit.TitlePane({
content:colorPalette
,title:"123"
},"myTitlePane");
});
</script>
<div id="myTitlePane"></div>
</body>
</html>dojo.connect 可以添加事件处理程序，详情
其余的组件可以通过官网API进行查看
相关学习：
web前端之dojo实际应用及开发六：页面布局（附有源码）
web前端之dojo实际应用及开发五：丰富的用户界面（附有源码）
web前端之dojo实际应用及开发四：面向对象开发[关键]（附有源码）
web前端之dojo实际应用及开发三：dojo.xhr* 增强 Ajax（附有源码）
web前端之dojo实际应用及开发二：事件处理（附有源码）
web前端之dojo实际应用及开发一：开始dojo（附有源码）
web前端之Dojo与jQuery综合比较分析
web前端之dojo(用javascript语言实现的开源DHTML工具包)
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
