【连载】研究EasyUI系统— Window组件

最新推荐文章于 2024-04-12 03:03:32 发布

我想我是人

最新推荐文章于 2024-04-12 03:03:32 发布

阅读量1k

点赞数

分类专栏： Web编程 easyui 文章标签： easyui web前端

本文链接：https://blog.csdn.net/redeg/article/details/67633069

版权

Web编程同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

easyui

26 篇文章 1 订阅

订阅专栏

　　window组件是独立于父组件的窗口组件，往往用于显示额外的信息或者接收用户的输入。窗口可以关闭，也可以拖动或拉伸，有很强的灵活性。
window组件效果图
　　上图采用了常用的网站设计，顶部为橙色背景条，点击“登录”按钮弹出window组件，点击“取消”则隐藏组件。
　　来看一下代码。
　　windowDemo.php

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="easyui/themes/gray/easyui.css" />
        <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="text/javascript" src="easyui/jquery.min.js"></script>
        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
        <title>windowDemo</title>
    </head>
    <body>
        <div class="container">
            <div class="user-bg" id="userBg">
                <div class="user-container">
                    <div class="title">Window组件示例</div>
                    <button class="user-btn" style="margin-left:160px;" onclick="userLogin();">登 录</button>
                    <button class="user-btn" style="margin-left:10px;">注 册</button>
                </div>
            </div>
        </div>

        <!-- 登录对话框 -->
        <div class="easyui-window" id="winLogin">
            <form id="frmLogin" method="post">
                <div class="winContainer">
                    <div class="inputContainer">
                        <label class="inputLabel">请输入账号</label>
                        <input class="easyui-textbox" data-options="height:28,width:240" id="user">
                    </div>
                    <div class="inputContainer">
                        <label class="inputLabel">请输入密码</label>
                        <input class="easyui-textbox" type="password" data-options="height:28,width:240" id="pass">
                    </div>
                    <a id="btnCancel" class="easyui-linkbutton inputButton" data-options="iconCls:'icon-cancel',width:80,height:30" onclick="cancelLogin();">取消</a>
                    <a id="btnLogin" class="easyui-linkbutton inputButton" data-options="iconCls:'icon-ok',width:80,height:30" href="javascript:void(0)" style="margin-left: 20px">登录</a>
                </div>
            </form>
        </div>
        <script>
            function userLogin() {
                $("#winLogin").window("open");
            }

            function cancelLogin() {
                $("#user").textbox("clear");
                $("#pass").textbox("clear");
                $("#winLogin").window("close");
            }

            $("#winLogin").window({
                title:'登录Window',
                width:450,
                height:240,
                collapsible:false,
                minimizable:false,
                maximizable:false,
                closed:true,
                modal:true
            });
        </script>
    </body>
</html>

　　因为篇幅，上例代码省略了css样式，也没有对form表单编写具体的逻辑处理代码。window组件依赖于panel、resizable、draggable三个组件，所以window既能拉伸也能拖拽，同时也能使用三个组件自身所带的属性、方法和事件等。
　　
window组件属性

属性名称	属性值类型	属性默认值	描述
title	字符串	“New Window”	组件标题
collapsible	布尔值	true	是否显示可伸缩按钮。
minimizable	布尔值	true	是否显示最大化按钮。
maximizable	布尔值	true	是否显示最小化按钮。
closable	布尔值	true	是否显示关闭按钮。
closed	布尔值	false	是否令组件处于关闭状态。
zIndex	数值	9000	组件的z坐标。
draggable	布尔值	true	组件是否可拖拽。
resizable	布尔值	true	组件是否可拉伸。
shadow	布尔值	true	是否显示阴影。
inline	布尔值	false	如为true，组件保持在父容器内部。如为false，组件则置于最外部。
modal	布尔值	true	组件是否为模态。

　　上述是除panel外，window独有的（或重写过的）属性。
　　closed属性一般用于初始状态，例子代码中也用到该属性，即登录对话框初始时是关闭的，不应该显示在页面上，只有等到点击“登录”按钮时才打开。
　　zIndex是指组件在屏幕上的深度位置（即我们坐在电脑前，人脸对着电脑屏幕的方向），数值越大越靠前（越靠近人脸端）。
　　shadow值为true时，组件的四个边框周围有阴影效果。

window组件方法

方法名称	参数	描述
window	无	返回组件对象
hcenter	无	组件水平居中。1.3.1及以上版本支持。
vcenter	无	组件垂直居中。1.3.1及以上版本支持。
center	无	组件水平垂直居中。1.3.1及以上版本支持。