源代码: %@ 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>
效果: