easyui的window学习

作者: 全栈未遂工程师 | 来源:发表于2016-03-15 11:06 被阅读191次

easyui的window学习
JQuery EasyUI链接汇总
高级第七天:EasyUI学习
EasyUI(1) -- 简介 & UI组件(layou
第2讲_EasyUI环境搭建
jQuery EasyUI泛读
【年度盘点】最受欢迎的5大Java练习项目
EasyUI入门案例
jQuery EasyUI 入门
01Jquery EasyUI 快速入门

目的：弹出、关闭window。
效果图：

window效果图
代码：/EasyUiLearn/WebContent/window/index.jsp

<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();%>
<%String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="<%=basePath %>">
    <title>window</title>
    <!--
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/default/easyui.css">
    --> 
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/bootstrap/easyui.css">
     
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/icon.css">
    <script type="text/javascript" src="jquery-easyui-1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
</head>
<script>
var windowMain = {
    initWindow:function(){
        $("#win").window({
            title:"一个弹出窗口",
            width:600,
            height:400,
            modal:true,
            closed:true,
            href:"window/window.jsp",
            onLoad:function(){
                console.log('页面加载完成调用！');
                //为新加载的页面控件绑定事件
                $("#closeBtn").click(function(){
                    $("#win").window("close");
                });
            }
        });
    }
}
$(function(){
    windowMain.initWindow();
});

function openWin(){
    $("#win").window("open");
}
</script>
<body>
<a href="javascript:void(0);" class="easyui-linkbutton" onClick="javascript:openWin();">打开</a><br><br>
<div id="win"></div>
</body>
</html>

window代码：/EasyUiLearn/WebContent/window/window.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<div class="easyui-panel" style="padding:10px;">
    <form id="ff" action="form1_proc.php" method="post" enctype="multipart/form-data">
        <table>
            <tr>
                <td>Name:</td>
                <td><input name="name" class="f1 easyui-textbox"></input></td>
            </tr>
            <tr>
                <td>Email:</td>
                <td><input name="email" class="f1 easyui-textbox"></input></td>
            </tr>
            <tr>
                <td>Phone:</td>
                <td><input name="phone" class="f1 easyui-textbox"></input></td>
            </tr>
            <tr>
                <td>File:</td>
                <td><input name="file" class="f1 easyui-filebox"></input></td>
            </tr>
            <tr>
                <td><a id="closeBtn" class="easyui-linkbutton" href="javascript:void(0)">关闭</a></td>
                <td></td>
            </tr>
        </table>
    </form>
</div>

要点：