easyui-1

来源：互联网发布：武汉留学中介知乎编辑：程序博客网时间：2024/06/07 08:46

1.引入 head

<script type="text/javascript" src="jquery-easyui-1.4.2/jquery.min.js"></script>    <script type="text/javascript" src="jquery-easyui-1.4.2/jquery.easyui.min.js"></script>    <link rel="stylesheet" href="jquery-easyui-1.4.2/themes/default/easyui.css" type="text/css"></link>    <link rel="stylesheet" href="jquery-easyui-1.4.2/themes/icon.css" type="text/css"></link>    <script type="text/javascript" src="jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script></head>

2.dialog demo

    <div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"    data-options="iconCls:'icon-save',resizable:true,modal:true">    Dialog Content.    </div>

3.panel demo

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><script type="text/javascript" src="jquery-easyui-1.4.2/jquery.min.js"></script><script type="text/javascript" src="jquery-easyui-1.4.2/jquery.easyui.min.js"></script><link rel="stylesheet" href="jquery-easyui-1.4.2/themes/default/easyui.css" type="text/css"></link><link rel="stylesheet" href="jquery-easyui-1.4.2/themes/icon.css" type="text/css"></link><script type="text/javascript" src="jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script><script type="text/javascript">    $(function(){        $('#bt1').click(function(){            $('#p').panel('open');        });        $('#bt2').click(function(){            $('#p').panel('close');        });        $('#bt3').click(function(){            $('#p').panel('destroy');        });    });</script></head><body>    <div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;"     data-options="iconCls:'icon-save',    closable:true,collapsible:false,minimizable:true,maximizable:true,closed:true">        <p>panel content.</p>        <p>panel content.</p>    </div>    <input id="bt1" type="button" value="button1" >     <input id="bt2" type="button" value="button2" >    <%--销毁--%>    <input id="bt3" type="button" value="button3" > </body></html>

4.dialog登录框demo

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%    String path = request.getContextPath();    String basePath = request.getScheme() + "://"            + request.getServerName() + ":" + request.getServerPort()            + path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><script type="text/javascript" src="jquery-easyui-1.4.2/jquery.min.js"></script><script type="text/javascript" src="jquery-easyui-1.4.2/jquery.easyui.min.js"></script><link rel="stylesheet" href="jquery-easyui-1.4.2/themes/default/easyui.css" type="text/css"></link><link rel="stylesheet" href="jquery-easyui-1.4.2/themes/icon.css" type="text/css"></link><script type="text/javascript" src="jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script><script type="text/javascript">    var loginAndRegDialog;    $(function() {        loginAndRegDialog = $('#loginAndRegDialog').dialog({            closable : false,            modal : true,            resizable : true,            buttons : [ {                text : '登录',                handler : function() {                    console.info("登录");                    $.ajax({                        type : "POST",                        url : "userController/login",                        data : $('#loginInputForm').serialize(),                        /*{                            name : $('#loginInputForm input[name=name]').val(),                            pwd : $('#loginInputForm input[name=pwd]').val()                        }*/                        //禁止使用缓存的结果                        cache : false,                        dateType : 'json',                        success : function(r) {                            //console.info(r.msg);                            if (r && r.success){                                //登录成功                                console.info("成功");                                loginAndRegDialog.dialog('close');                                $.messager.show({                                    title:'提示',                                    msg:r.msg,                                    timeout:3,                                    showType:'slide'                                });                            }else{                                //失败                                console.info("失败");                                $.messager.show({                                    title:'提示',                                    msg:r.msg,                                    timeout:3,                                    showType:'slide'                                });                            }                        }                    });                }            }, {                text : '注册',                handler : function() {                    console.info();                }            } ]        });    });</script></head><body>    <div id="loginAndRegDialog" title="用户登录" style="width:250px;height:200px;">        <form id="loginInputForm" method="post">            <table>                <tr>                    <th align="right">用户名</th>                    <td><input name="name" type="text">                    </td>                </tr>                <tr>                    <th align="right">密码</th>                    <td><input name="pwd" type="password">                    </td>                </tr>            </table>        </form>    </div></body></html>

package com.ui.control;import javax.servlet.http.HttpServletRequest;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;@Controller@RequestMapping("userController")public class UserController {    @RequestMapping("login")    @ResponseBody    public Json login(HttpServletRequest request){        Json json = new Json();        System.out.println(request.getParameter("name"));        System.out.println(request.getParameter("pwd"));        json.setSuccess(false);        json.setMsg("用户登录失败");        return json;    }}

package com.ui.control;public class Json {    private boolean success=false;    private String msg;    private Object object;    public boolean isSuccess() {        return success;    }    public void setSuccess(boolean success) {        this.success = success;    }    public String getMsg() {        return msg;    }    public void setMsg(String msg) {        this.msg = msg;    }    public Object getObject() {        return object;    }    public void setObject(Object object) {        this.object = object;    }}

项目下载
end

0 0