【連載】研究EasyUI系統— Window元件

阿新 • • 發佈：2018-12-23

　　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及以上版本支援。

　　上述方法也是除panel外window元件獨有的方法，都比較簡單，不詳細說明。
　　另外，window元件事件與panel一致，請參閱panel部分。

【連載】研究EasyUI系統— Window元件

【連載】研究EasyUI系統— Window元件

【連載】研究EasyUI系統—Panel元件（方法和事件）

【連載】研究EasyUI系統— Resizable元件

【連載】研究EasyUI系統— Layout元件

【連載】研究EasyUI系統—Tree元件（方法）

【連載】研究EasyUI系統—Easyloader元件

【連載】研究EasyUI系統—ProgressBar元件

【連載】研究EasyUI系統—Panel元件（屬性）

【連載】研究EasyUI系統—Panel元件（概述）

【轉】WPF自定義控制元件與樣式(13)-自定義窗體Window & 自適應內容大小訊息框MessageBox

【原創】.NET平臺機器學習元件-Infer.NET連載(一)介紹

【原創】.NET平臺機器學習元件-Infer.NET連載(二)貝葉斯分類器

【連載】計算機組成原理 --- 第四章指令系統

【Linux】Linux操作系統學習路線

【轉】以操作系統的角度述說線程與進程

【Java】得到當前系統時間，精確到毫秒

【CCF】模板生成系統

【CQOI2015】任務查詢系統（主席樹）

【Linux】Linux操作系統期末復習筆記

【北京】高級系統實施工程師 10—30w/年

【連載】研究EasyUI系統— Window元件

相關推薦