dojo1.1.0学习总结--简单对话框登陆案例
页面部分：
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>对话框案例</title>
<style type="text/css">
@import "js/dojo-release-1.1.0/dojo/resources/dojo.css";
@import "js/dojo-release-1.1.0/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" djConfig="parseOnLoad: true"
src="js/dojo-release-1.1.0/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
</script>
</head>
<body class="tundra">
<button dojoType="dijit.form.Button" onClick="dijit.byId('loginDialog').show()">显示登陆对话框</button>
<div id="showData"></div>
<div dojoType="dijit.Dialog" id="loginDialog" title="用户登陆">
<form id="dialogForm" method="post">
<table>
<tr>
<td>
<label>用户名</label>
</td>
<td>
<input dojoType="dijit.form.TextBox" type="text" name="username">
</td>
</tr>
<tr>
<td>
<label>密 码</label>
</td>
<td>
<input dojoType="dijit.form.TextBox" type="password" name="password">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button dojoType="dijit.form.Button">登陆
<script type="dojo/method" event="onClick">
function dialogCallBack(data,params){
dojo.byId("showData").innerHTML = data;
}
function dialogError(data,params){
dojo.byId("showData").innerHTML = "服务器错误";
}
dojo.xhrPost({
url:'./login.do',
load:dialogCallBack,
error:dialogError,
form:'dialogForm',
encoding:'utf-8'
});
</script>
</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
后台部分：
package org.sp.struts.action;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
/**
* 登录后台
* @author 无尽de华尔兹
*
*/
public class LoginAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
response.getWriter().write(username + " " + password);
return null;
}
}
dojo 1.1.0 学习总结
三. 对话框案例
1.导入CSS样式
<style type="text/css">
@import "js/dojo-release-1.1.0/dojo/resources/dojo.css"$$
@import "js/dojo-release-1.1.0/dijit/themes/tundra/tundra.css"
</style>
2.添加dojo.js库
<script type="text/javascript" djConfig="parseOnLoad: true" src="js/dojo-release-1.1.0/dojo/dojo.js"></script>
3.导入组件
<script type="text/javascript">
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
</script>
4.弹出型对话框
a.按钮事件，用于显示对话框
<button dojoType="dijit.form.Button" onClick="dijit.byId('loginDialog').show()">显示登陆对话框</button>
b.对话框层
<div dojoType="dijit.Dialog" id="loginDialog" title="用户登陆">
<form id="dialogForm" method="post">
<table>
<tr>
<td>
<label>用户名</label>
</td>
<td>
<input dojoType="dijit.form.TextBox" type="text" name="username">
</td>
</tr>
<tr>
<td>
<label>密 码</label>
</td>
<td>
<input dojoType="dijit.form.TextBox" type="password" name="password">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button dojoType="dijit.form.Button">登陆
<script type="dojo/method" event="onClick">
function dialogCallBack(data,params){
dojo.byId("showData").innerHTML = data;
}
function dialogError(data,params){
dojo.byId("showData").innerHTML = "服务器错误";
}
dojo.xhrPost({
url:'./login.do',
load:dialogCallBack,
error:dialogError,
form:'dialogForm',
encoding:'utf-8'
});
</script>
</button>
</td>
</tr>
</table>
</form>
</div>
注:
该对话框层类型使用 dojoType="dijit.Dialog" id="loginDialog"
title="用户登陆" 标题栏内容
其他完全和表单同样使用
5.提示型对话框
<div dojoType="dijit.form.DropDownButton">
<span>显示登陆提示对话框</span>
<div dojoType="dijit.TooltipDialog" id="loginTipDialog"
title="登陆提示对话框">
<form id="dialogForm" method="post">
<table>
<tr>
<td>
<label>
用户名
</label>
</td>
<td>
<input dojoType="dijit.form.TextBox" type="text" name="username">
</td>
</tr>
<tr>
<td>
<label>
密 码
</label>
</td>
<td>
<input dojoType="dijit.form.TextBox" type="password"
name="password">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button dojoType="dijit.form.Button">
登陆
<script type="dojo/method" event="onClick">
function dialogCallBack(data,params){
dojo.byId("showData").innerHTML = data;
}
function dialogError(data,params){
dojo.byId("showData").innerHTML = "服务器错误";
}
dojo.xhrPost({
url:'./login.do',
load:dialogCallBack,
error:dialogError,
form:'dialogForm',
encoding:'utf-8'
});
</script>
</button>
</td>
</tr>
</table>
</form>
<div>
也可以用文本注释工具的内容
</div>
</div>
</div>
注：
第一层使用类型 dojoType="dijit.form.DropDownButton" 表示是一个按钮或菜单层，当单击时它会自动显示内层的对话框
<span>显示登陆提示对话框</span>作为按钮的显示文本
第二层，即内嵌在其中的对话框 类型为 dojoType="dijit.TooltipDialog"
title="登陆提示对话框" 表示对话框的注释
其他和使用弹出对话框一样。
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>对话框案例</title>
<style type="text/css">
@import "js/dojo-release-1.1.0/dojo/resources/dojo.css";
@import "js/dojo-release-1.1.0/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" djConfig="parseOnLoad: true"
src="js/dojo-release-1.1.0/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
</script>
</head>
<body class="tundra">
<button dojoType="dijit.form.Button" onClick="dijit.byId('loginDialog').show()">显示登陆对话框</button>
<div id="showData"></div>
<div dojoType="dijit.Dialog" id="loginDialog" title="用户登陆">
<form id="dialogForm" method="post">
<table>
<tr>
<td>
<label>用户名</label>
</td>
<td>
<input dojoType="dijit.form.TextBox" type="text" name="username">
</td>
</tr>
<tr>
<td>
<label>密 码</label>
</td>
<td>
<input dojoType="dijit.form.TextBox" type="password" name="password">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button dojoType="dijit.form.Button">登陆
<script type="dojo/method" event="onClick">
function dialogCallBack(data,params){
dojo.byId("showData").innerHTML = data;
}
function dialogError(data,params){
dojo.byId("showData").innerHTML = "服务器错误";
}
dojo.xhrPost({
url:'./login.do',
load:dialogCallBack,
error:dialogError,
form:'dialogForm',
encoding:'utf-8'
});
</script>
</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
后台部分：
package org.sp.struts.action;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
/**
* 登录后台
* @author 无尽de华尔兹
*
*/
public class LoginAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
response.getWriter().write(username + " " + password);
return null;
}
}
dojo 1.1.0 学习总结
三. 对话框案例
1.导入CSS样式
<style type="text/css">
@import "js/dojo-release-1.1.0/dojo/resources/dojo.css"$$
@import "js/dojo-release-1.1.0/dijit/themes/tundra/tundra.css"
</style>
2.添加dojo.js库
<script type="text/javascript" djConfig="parseOnLoad: true" src="js/dojo-release-1.1.0/dojo/dojo.js"></script>
3.导入组件
<script type="text/javascript">
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
</script>
4.弹出型对话框
a.按钮事件，用于显示对话框
<button dojoType="dijit.form.Button" onClick="dijit.byId('loginDialog').show()">显示登陆对话框</button>
b.对话框层
<div dojoType="dijit.Dialog" id="loginDialog" title="用户登陆">
<form id="dialogForm" method="post">
<table>
<tr>
<td>
<label>用户名</label>
</td>
<td>
<input dojoType="dijit.form.TextBox" type="text" name="username">
</td>
</tr>
<tr>
<td>
<label>密 码</label>
</td>
<td>
<input dojoType="dijit.form.TextBox" type="password" name="password">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button dojoType="dijit.form.Button">登陆
<script type="dojo/method" event="onClick">
function dialogCallBack(data,params){
dojo.byId("showData").innerHTML = data;
}
function dialogError(data,params){
dojo.byId("showData").innerHTML = "服务器错误";
}
dojo.xhrPost({
url:'./login.do',
load:dialogCallBack,
error:dialogError,
form:'dialogForm',
encoding:'utf-8'
});
</script>
</button>
</td>
</tr>
</table>
</form>
</div>
注:
该对话框层类型使用 dojoType="dijit.Dialog" id="loginDialog"
title="用户登陆" 标题栏内容
其他完全和表单同样使用
5.提示型对话框
<div dojoType="dijit.form.DropDownButton">
<span>显示登陆提示对话框</span>
<div dojoType="dijit.TooltipDialog" id="loginTipDialog"
title="登陆提示对话框">
<form id="dialogForm" method="post">
<table>
<tr>
<td>
<label>
用户名
</label>
</td>
<td>
<input dojoType="dijit.form.TextBox" type="text" name="username">
</td>
</tr>
<tr>
<td>
<label>
密 码
</label>
</td>
<td>
<input dojoType="dijit.form.TextBox" type="password"
name="password">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button dojoType="dijit.form.Button">
登陆
<script type="dojo/method" event="onClick">
function dialogCallBack(data,params){
dojo.byId("showData").innerHTML = data;
}
function dialogError(data,params){
dojo.byId("showData").innerHTML = "服务器错误";
}
dojo.xhrPost({
url:'./login.do',
load:dialogCallBack,
error:dialogError,
form:'dialogForm',
encoding:'utf-8'
});
</script>
</button>
</td>
</tr>
</table>
</form>
<div>
也可以用文本注释工具的内容
</div>
</div>
</div>
注：
第一层使用类型 dojoType="dijit.form.DropDownButton" 表示是一个按钮或菜单层，当单击时它会自动显示内层的对话框
<span>显示登陆提示对话框</span>作为按钮的显示文本
第二层，即内嵌在其中的对话框 类型为 dojoType="dijit.TooltipDialog"
title="登陆提示对话框" 表示对话框的注释
其他和使用弹出对话框一样。