源代码： %@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%%String path = request.getContextPath();// 获得项目完全路径（假设你的项目叫MyApp，那么获得到的地址就是 http://localho
源代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
// 获得项目完全路径（假设你的项目叫MyApp，那么获得到的地址就是 http://localhost:8080/MyApp/）:
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css"
href="<%=basePath%>dojo/dijit/themes/soria/soria.css">
<link rel="stylesheet" type="text/css"
href="<%=basePath%>dojo/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
href="<%=basePath%>dojo/dojox/grid/resources/soriaGrid.css" />
<style type="text/css">
body,html {
font-family: helvetica, arial, sans-serif;
font-size: 90%;
}
th {
font-size: 13px;
font-family: Arial, Microsoft YaHei, SimSun, sans-serif !important;
text-align: center;
}
td {
font-size: 13px;
font-family: Arial, Microsoft YaHei, SimSun, sans-serif !important;
}
div #copyright {
text-align: center
}
</style>
</head>
<script type="text/javascript" src="<%=basePath%>dojo/dojo/dojo.js"
djConfig="parseOnLoad:true">
</script>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
dojo.require("dojo.parser");
</script>
<script type="text/javascript">
//利用dojo.connect和dojo.disconnect来进行事件绑定
var handler = null;
function connect() {
var btn1 = dojo.byId("btn1");
var btn2 = dojo.byId("btn2");
var span = dojo.byId("span1");
handler = dojo.connect(btn1, "onclick", function(evt) {
dojo.style(span, "backgroundColor", "green");
});
}
function disconnect() {
var span = dojo.byId("span1");
dojo.disconnect(handler);
dojo.style(span, "backgroundColor", "blue");
}
//还可以这样用dojo.connect
function connect1() {
var span = dojo.byId("span1");
//这里只能使用dojo.query,使用dojo.byId("btn1")会出错
handler = dojo.query("#btn1").connect("onclick", function(evt) {
dojo.style(span, "backgroundColor", "red");
});
}
//可以利用dojo.stopEvent()和evt.preventDefault()来阻止浏览器处理DOM事件
//还可以connect一个var对象中的事件
function connect2() {
var btn1 = dojo.byId("btn1");
var btn2 = dojo.byId("btn2");
var myObject = {
id : "myObject",
onClick : function(evt) {
alert("the scope of this handler is " + this.id);
}
};
dojo.connect(btn1, "onclick", myObject.onClick);
//注意这里的第三个参数myObject,表明了绑定事件的context(上下文),默认情况下不用此参数
dojo.connect(btn2, "onclick", myObject, myObject.onClick);
}
//publish/subscribe
function subscribe() {
//直接订阅信息，但不针对某个具体的目标
handler = dojo.subscribe("hi", function(evt) {
alert(evt);
});
}
function alertUser() {
var text = [ "i am alert you" ];
//直接发布消息，但不针对某个具体的目标
dojo.publish("hi", text);
dojo.unsubscribe(handler);
}
function anotherAlert() {
var text = [ "i am another alert you" ];
//直接发布消息，但不针对某个具体的目标
dojo.publish("hi", text);
}
dojo.ready(subscribe);
</script>
<body class="soria">
<div id="container">
<button id="btn1" data-dojo-type="dijit.form.Button">click me</button>
<button id="btn2" data-dojo-type="dijit.form.Button"
data-dojo-props="onClick:disconnect">disconnect</button>
<span id="span1">this is text</span> <br />
<button id="alertButton" data-dojo-type="dijit.form.Button"
data-dojo-props="onClick:alertUser">alert the user</button>
<button id="createAlert" data-dojo-type="dijit.form.Button"
data-dojo-props="onClick:anotherAlert">another</button>
</div>
</body>
</html>
效果