dojo学习之旅【一】 入门

前端之家收集整理的这篇文章主要介绍了dojo学习之旅【一】 入门前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

始终使用Web服务器

从Web服务器,而不是文件系统上运行dojo的源代码dojo下载地址)。浏览器在处理本地的HTTP请求时,要比Web服务器上的更为严格。所以为了获取和官网一致的页面效果,你应该总是从HTTP Web服务器上运行dojo(Apache,Nginx,Tomcat,IIS,Jetty等)。

内容参考:Dojo Start

dojoConfig的配置

dojo从1.6版本引入AMD,djConfig也变成了dojoConfig。dojoConfig是一个页面dojo配置的主要制所在,它会被模块加载器和全局选项组件所引用。如果想进行dojo自定义编程,它还可以进一步用作其配置点。

注:旧版本的的djConfig已经被废弃,但是在2.0版本之前,它在代码中依然兼容。

简单的dojoConfig配置样例:

dojoConfig.html

<!DOCTYPE HTML>
<html lang="en">
	<head>
		<Meta charset="utf-8">
		<title>Demo: dojoConfig</title>
		<link rel="stylesheet" href="../css/dojoConfig.css" media="screen">
		<link rel="stylesheet" href="../../dojo/dijit/themes/claro/claro.css" media="screen">
		<style>
			#dialog { min-width: 200px; }
		</style>
	</head>
	<body class="claro">
		<h1>Demo: dojo/_base/Config</h1>
		<div id="dialog" data-dojo-type="dijit/Dialog" data-dojo-props="title: 'dojo/_base/_config'"></div>
		<!-- load dojo and provide config via data attribute -->
		<script src="../../dojo/dojo/dojo.js" data-dojo-config="has:{'dojo-firebug':true},foo: 'bar',async: 1,isDebug: 1"></script>
		<script>
			require(["dijit/registry","dojo/parser","dojo/json","dojo/_base/config","dijit/Dialog","dojo/domReady!"],function(registry,parser,JSON,config) {
					// Explicitly parse the page
					parser.parse();
					// Find the dialog
					var dialog = registry.byId("dialog");
					// Set the content equal to what dojo.config is
					dialog.set("content",'<pre>' + JSON.stringify(config,null,'\t') + '</pre>');
					// Show the dialog
					dialog.show();
			});
		</script>
	</body>
</html>


dojoConfig.css:

@CHARSET "UTF-8";
body {
    margin: 0;
    padding: 2em;
    font-family: Lucida Sans,Lucida Grande,Arial !important;
    font-size: 13px !important;
    background: white;
    color: #333;
}

button {
	-webkit-transition: background-color 0.2s linear;
	border-radius:4px;
	-moz-border-radius: 4px 4px 4px 4px;
	-moz-Box-shadow: 0 1px 1px rgba(0,0.15);
	background-color: #E4F2FF;
	background-image: url("../../dojo/dijit/themes/claro/form/images/button.png");
	background-position: center top;
	background-repeat: repeat-x;
	border: 1px solid #769DC0;
	padding: 2px 8px 4px;
	font-size:1em;
}

button:hover {
	background-color: #AFD9FF;
	color: #000000;
}

h1 {
	font-size:1.5em;
}

.break
{
float:none;
clear:both;
}

猜你在找的Dojo相关文章