jquery easy-ui panel使用方法
阿新 • • 發佈：2018-12-21
首先引入相關的js 和 css
<link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="css/themes/icon.css" rel="stylesheet" type="text/css" /> <script src="jq/jquery.min.js" type="text/javascript"></script> <script src="jq/jquery.easyui.min.js" type="text/javascript"></script>
通過JS的方式載入panel
<script type="text/javascript"> $(function () { LoadData(); }); function LoadData() { $('#tt').panel({ title: '資料資訊', //標題資訊 iconCls: 'icon-save', //頭部圖示 collapsible: true, //是否有摺疊按鈕 minimizable: true, //是否顯示最小化按鈕 maximizable: true, //是否顯示最大化按鈕 closable: true, //是否摺疊起來 width: '700', //設定寬度 height: '800', //設定高度 closed: false, //是否關閉 loadingMessage: '載入資料資訊',//載入資料時的顯示資訊 tools: [{ //工具欄按鈕 iconCls: 'icon-add', //工具圖示 handler: function () { alert('new') } //點選工具欄按鈕返回的事件 }, { iconCls: 'icon-save', handler: function () { alert('save') } }], href: 'Type.ashx', //一個 URL，用它載入遠端資料並且顯示在面板（panel）裡。請注意，除非面板（panel）開啟，否則內容不會被載入。這對建立一個惰性載入的面板（panel）很有用： onLoad: function () { //當遠端資料被載入時觸發。 }, onBeforeOpen: function () { //面板（panel）開啟前觸發，返回 false 就停止開啟。 }, onClose: function () { //面板（panel）關閉後觸發。 }, onBeforeCollapse: function () { //面板（panel）摺疊前觸發，返回false就停止摺疊。 }, onCollapse: function () { //面板（panel）摺疊後觸發。 }, onBeforeExpand: function () { //面板（panel）展開前觸發，返回false就停止展開。 }, onExpand: function () { // 面板（panel）展開後觸發。 }, onMove: function (left, top) { // 面板（panel）移動後觸發。 left：新的左邊位置 top：新的頂部位置 } }) .panel('setTitle') //設定頭部的標題文字。 .panel('open')// 當 forceOpen 引數設定為 true 時，就繞過 onBeforeOpen 回撥函式打開面板（panel）。 .panel('close') //當 forceClose 引數設定為 true 時，就繞過 onBeforeClose 回撥函式關閉面板（panel）。 .panel('maximize') // 面板（panel）適應它的容器的尺寸。 .panel('minimize') // 最小化面板（panel）。 .panel('collapse') //摺疊面板（panel）主體。 .panel('expand') //展開面板（panel）主體。 } </script>
body部分
<body>
<form id="form1" runat="server">
<div id="tt">
</div>
</form>
</body>