源代码: %@ 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.byId dojo.create dojo.place dojo.destroy dojo.empty
function ById1() {
var first = dojo.byId("first");
first.innerHTML = "000";
}
function Create() {
var list = dojo.byId("ul1");
var third = dojo.byId("third");
dojo.create("li", {
innerHTML : "sixth",
className : "sixth"
}, list);
dojo.create("li", {
innerHTML : "111"
}, third, "after");
}
function MoveFirst() {
var list = dojo.byId("ul1");
var third = dojo.byId("third");
dojo.place(third, list, "first");
}
function MoveBefore() {
var second = dojo.byId("second");
var third = dojo.byId("third");
dojo.place(second, third, "before");
}
function MoveAfter() {
var second = dojo.byId("second");
var third = dojo.byId("third");
dojo.place(second, third, "after");
}
function MoveEnd() {
var list = dojo.byId("ul1");
var third = dojo.byId("third");
dojo.place(third, list);
}
function Destroy() {
var first = dojo.byId("first");
dojo.destroy(first);
}
function Empty() {
var list = dojo.byId("ul1");
dojo.empty(list);
}
function query() {
var list = dojo.query("#list");//id为list的所有元素
var odd = dojo.query(".odd");//class名为odd的所有元素
var odd1 = dojo.query("#list .odd");//id为list,且class名为odd的元素
var odd2 = dojo.query("a.odd");//标签为a,且class名为odd的元素
var a = dojo.query("#list a");//id为list下标签为a的元素
var a1 = dojo.query("#list>a");//id为list下直接标签为a的元素
var a2 = dojo.query(".odd>a");//...
}
function AddRed() {
dojo.query("#list .odd").addClass("red");
}
function RemoveOdd() {
dojo.query(".odd").removeClass("odd");
}
function Style() {
dojo.query(".even").style("color", "blue");
}
</script>
<body class="soria">
<div id="container">
<ul id="ul1">
<li id="first">first</li>
<li id="second">second</li>
<li id="third">third</li>
<li id="fourth">fourth</li>
<li id="fifth">fifth</li>
</ul>
<button data-dojo-type="dijit.form.Button"
data-dojo-props="onClick:MoveFirst">move first</button>
<button data-dojo-type="dijit.form.Button"
data-dojo-props="onClick:MoveBefore">move before</button>
<button data-dojo-type="dijit.form.Button"
data-dojo-props="onClick:MoveAfter">move after</button>
<button data-dojo-type="dijit.form.Button"
data-dojo-props="onClick:MoveEnd">move end</button>
<button data-dojo-type="dijit.form.Button"
data-dojo-props="onClick:Destroy">destroy first</button>
<button data-dojo-type="dijit.form.Button"
data-dojo-props="onClick:Empty">Empty list</button>
<div id="list">
<div class="odd">One</div>
<div class="even">Two</div>
<div class="odd">Three</div>
<div class="even">Four</div>
<div class="odd">Five</div>
<div class="even">Six</div>
<button data-dojo-type="dijit.form.Button"
data-dojo-props="onClick:AddRed">add red</button>
<button data-dojo-type="dijit.form.Button"
data-dojo-props="onClick:RemoveOdd">remove odd</button>
<button data-dojo-type="dijit.form.Button"
data-dojo-props="onClick:Style">style</button>
</div>
</div>
</body>
</html>
效果:
