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

于 2008-10-17 12:53:00 发布
阅读量968 收藏 1
点赞数
文章标签： dojo function button encoding input import
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/huhaihong/article/details/3091229
版权
 页面部分：

<%@ 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>密&nbsp;&nbsp;&nbsp;码</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>密&nbsp;&nbsp;&nbsp;码</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>
                                    密&nbsp;&nbsp;&nbsp;码
                                </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="登陆提示对话框" 表示对话框的注释
        其他和使用弹出对话框一样。
huhaihong
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值