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,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,encoding:'utf-8' }); </script> </button> </td> </tr> </table> </form> <div> 也可以用文本注释工具的内容 </div> </div> </div> 注：第一层使用类型 dojoType="dijit.form.DropDownButton" 表示是一个按钮或菜单层，当单击时它会自动显示内层的对话框 <span>显示登陆提示对话框</span>作为按钮的显示文本第二层，即内嵌在其中的对话框类型为 dojoType="dijit.TooltipDialog" title="登陆提示对话框" 表示对话框的注释其他和使用弹出对话框一样。原文链接：https://www.f2er.com/dojo/291886.html

dojo1.1.0学习总结--简单对话框登陆案例

猜你在找的Dojo相关文章