【EasyUI篇】Window視窗元件
阿新 • • 發佈：2018-12-23
微信公眾號：
關注可瞭解更多的教程及排版技巧。問題或建議，請公眾號留言;
11.Window視窗元件
注意
使用$.fn.window.defaults 重寫預設值物件。
window 元件最強大的地方就是可以內部佈局和新增 linkbutton。
具體佈局方法如下：
1.外部用 window元件包裹一下；
2.內部用 layout 元件左右各分配一個，底部分配一個；
3.底部新增一個按鈕即可。
JSP檔案
<%-- Created by IntelliJ IDEA. User: ooyhao Date: 2018/7/29 0029 Time: 9:21 --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Panel</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/Window.js"></script> <style rel="stylesheet" type="text/css"> </style> </head> <body> <%--使用class載入方式載入--%> <%--<div class="easyui-window" title="my window" style="width:600px; height: 400px;" data-options="iconCls:'icon-save',modal:true" > 視窗 </div>--%> <%-- <div id="box"> 視窗 </div>--%> <%--使用視窗進行佈局--%> <div class="easyui-window" style="width: 400px; height: 250px;"> <div class="easyui-layout" data-options="fit:true"> <div data-options="region:'west',width:100,split:true" >左</div> <div data-options="region:'center',height:100,split:true,">中</div> <div style="text-align: right" data-options="region:'south',height:40,split:true, border:false,"> <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'">確認</a> <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a> </div> </div> </div> </body> </html>
JS檔案
$(function () { $("#box").window({ // ----------- 屬性列表 ---------- width:300, height:200, title:"我的視窗", iconCls:'icon-cut', //設定是否為模態框 modal:true, //是否可摺疊，預設true， // collapsible:false, //是否可最小化，預設true， // minimizable:false, //是否可最大化，預設true， // maximizable:false, //是否可關閉，預設true， // closable:false, //初始化時是否處於關閉狀態,預設為false， // closed:false, //z軸的座標，即層疊的優先順序，預設9000 zIndex:9000, //定義是否可以拖動視窗 draggable:true, //定義是否可以改變視窗大小 resizable:true, //定義是否顯示陰影效果 shadow:true, //定義如何佈局視窗，如果為true，視窗將顯示在它的父容器中，否則將顯示在所有元素之上 inline:false, //-------------- 事件列表完全繼承自panel面板 ----------------- }); //-------------- 方法列表 ------------- // console.log($("#box").window('window')); // console.log($("#box").window('body')); $(document).click(function () { //僅水平居中 // $("#box").window('hcenter'); //僅垂直居中 // $("#box").window('vcenter'); //水平垂直同時居中 $("#box").window('center'); }); }); /** 使用$.fn.window.defaults 重寫預設值物件。 window 元件最強大的地方就是可以內部佈局和新增 linkbutton。 具體佈局方法如下： 1.外部用 window元件包裹一下； 2.內部用 layout 元件左右各分配一個，底部分配一個； 3.底部新增一個按鈕即可。 */
window效果圖
佈局效果圖
------------------------------------------------
關注小編微信公眾號獲取更多資源
