微信公衆號：程序yuan
關注可瞭解更多的教程。問題或建議，請公衆號留言;
查看--> 全套EasyUI示例目錄
7.Panel面板組件
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/Panel.js"></script>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body>
<%--class加載方式--%>
<%--
<div class="easyui-panel" data-options="closable:true," title="My Panel" style="width: 500px;">
<p>內容部分</p>
</div>
--%>
<button id="btn1">銷燬面板</button>
<button id="btn2">打開面板</button>
<button id="btn3">關閉面板</button>
<button id="btn4">刷新面板</button>
<button id="btn5">重新設置大小</button>
<button id="btn6">移動面板</button>
<button id="btn7">最大化面板</button>
<button id="btn8">最小化面板</button>
<button id="btn9">從最大化恢復</button>
<button id="btn10">摺疊面板主體</button>
<button id="btn11">展開面板主體</button>
<div id="box">
<p>內容部分</p>
</div>
<div id="selector">
<a class="icon-add" onclick="javascript:alert('add')"></a>
<a class="icon-edit" onclick="javascript:alert('edit')"></a>
<a class="icon-cut" onclick="javascript:alert('cut')"></a>
</div>
</body>
</html>
JS文件
$(function () {
$("#box").panel({
//----------- 屬性列表 ---------------
//設置id值
// id:'panel',
width:400,
height:300,
title:"我的面板",
iconCls:'icon-search',
// left:200,
// top:200,
//可以進行自定義css的設置，但是可能會涉及到優先級的問題
cls:'a',
headerCls:'b',
bodyCls:'c',
style:{
//設置背景顏色沒有效果
// background:'red',
// 不起作用
// 'min-height':'500px',
},
//自適應
// fit:true,
//是否顯示面板邊框，默認爲true，
border:true,
//在面板創建時是否重新載入屬性，默認爲true，
doSize:true,
//設置是否不顯示頭部區域，默認false，
noheader:false,
content:"設置面板內容",
//設置面板是否可以摺疊
collapsible:true,
//設置面板是否可以最小化
minimizable:true,
//設置面板是否可以最大化
maximizable:true,
//設置面板是否可以有關閉按鈕
closable:true,
//數組方式
tools:[
{
iconCls:'icon-save',
handler:function () {
alert("保存");
}
},{
iconCls:'icon-help',
handler:function () {
alert('幫助');
}
}
],
/*//使用選擇器的方式
tools:"#selector",*/
//定義在初始化時是否摺疊面板，默認爲false，
collapsed:false,
//定義在初始化時是否最小化面板，默認爲false，
minimized:false,
//定義在初始化時是否最大化面板，默認爲false，
maximized:false,
//定義在初始化時是否關閉面板，默認爲false，
closed:false,
//從URL讀取遠程數據並且顯示到面板。默認爲null，
href:'http://localhost:8081/easyui/getUsers.action',
// cache:true,
loadingMessage:"正在努力加載中...",
//可以對加載過來的數據進行過濾
extractor:function (data) {
// alert(data);
// return data.substring(1,10);
return data;
},
//------------- 事件列表 ------------------
// (帶Before的都可以return false)
onBeforeLoad:function () {
// alert("在加載遠程數據之前觸發");
},
onLoad:function () {
// alert("在加載數據之後觸發");
},
onBeforeOpen:function () {
// alert("在打開面板之前觸發");
},
onOpen:function () {
// alert("在打開面板之後觸發");
},
onBeforeClose:function () {
// alert("在關閉面板之後觸發");
},
onClose:function () {
// alert("在關閉面板之後觸發");
},
onBeforeDestroy:function () {
// alert("在銷燬面板之前觸發");
},
onDestroy:function () {
// alert("在銷燬面板之後觸發");
},
onBeforeCollapse:function () {
// alert("在摺疊之前觸發");
},
onCollapse:function () {
// alert("在摺疊過程中觸發");
},
onBeforeExpand:function () {
// alert("在展開前觸發");
},
onExpand:function () {
// alert("在展開過程中觸發");
},
onResize:function (width,height) {
alert("width:"+width+", height:"+height);
},
onMove:function (left,top) {
alert("left:"+left+", top:"+top);
},
onMaximize:function () {
// alert("窗口最大化後觸發");
},
onRestore:function () {
// alert("在窗口恢復原始大小之後觸發");
},
onMinimize:function () {
// alert("在窗口最小化後觸發");
}
});
//屬性設置left和top需要設置定位方式
$("#box").panel('panel').css('position','absolute');
//--------------- 方法列表 ------------------
//返回屬性對象
console.log($("#box").panel('options'));
//返回面板對象
console.log($("#box").panel('panel'));
//返回header頭部對象
console.log($("#box").panel('header'));
//返回body對象
console.log($("#box").panel('body'));
//設置面板標題
$("#box").panel('setTitle','myTitle');
$("#btn1").click(function () {
$("#box").panel('destroy');//執行onBeforeDestroy
// $("#box").panel('destroy',true);//不執行onBeforeDestroy
});
$("#btn2").click(function () {
// $("#box").panel('open');//執行onBeforeOpen
$("#box").panel('open',true);//不執行onBeforeOpen
});
$("#btn3").click(function () {
// $("#box").panel('close');//執行onBeforeClose
$("#box").panel('close',true);//不執行onBeforeClose
});
$("#btn4").click(function () {
$("#box").panel('refresh');//不執行onBeforeClose
// $("#box").panel('refresh',"http://www.baidu.com");//不執行onBeforeClose
});
//重新設置面板大小
$("#btn5").click(function () {
$("#box").panel('resize',{
left:100,
top:100,
width:250,
height:250,
});
});
//移動面板
$("#btn6").click(function () {
$("#box").panel('move',{
left:200,
top:200,
});
});
$("#btn7").click(function () {
$("#box").panel('maximize');
});
$("#btn8").click(function () {
$("#box").panel('minimize');
});
$("#btn9").click(function () {
$("#box").panel('restore');
});
$("#btn10").click(function () {
$("#box").panel('collapse');
});
$("#btn11").click(function () {
$("#box").panel('expand');
});
});
效果圖
------------------------------------------------
關注小編微信公衆號獲取更多資源
