easyui---基礎組件：panel
阿新 • • 發佈：2018-10-25
on() 直接 對象 itl 分享圖片 http ict psi 如果
加載easyui有兩種方式：1種是html方式加載，1種是js加載。 要加載內容非常多時，用js,如果加載的東西比較少，用html就可以了。
panel組件：面板 就是頭 身展示 ，一個滾動條，幾個關閉等小控件
html方式加載：
一個div,加上class="easyui-panel" class裏面都是easy-組件形式。
<body> <div id="panelid" class="easyui-panel"></div> </body>
給panel加個寬高，
<body> <div id="panelid" class="easyui-panel" style="width:300px;height:300px"></div> </body>
加個title標記，<div id="panelid" class="easyui-panel" style="width:300px;height:300px" title="這是頭部信息"></div>
身體部分，不能再html裏面加content,沒效果，直接在div中輸入內容
<div id="panelid" class="easyui-panel" style="width:300px;height:300px" title="這是頭部信息" > 我是內容 </div>
iconCls:圖標，在引入easyui icon css找到 是iconClass簡寫
<body> <div id="panelid" class="easyui-panel" style="width:300px;height:300px" title="這是頭部信息" iconCls="icon-save"> 我是內容 </div>
closable 是否顯示關閉按鈕
</head> <body> <div id="panelid" class="easyui-panel" style="width:300px;height:300px" title="這是頭部信息" iconCls="icon-save" closable="true"> 我是內容 </div>
collapsible 顯示折疊按鈕，collapsed是初始時，顯示折疊還是 展開
<div id="panelid" class="easyui-panel" style="width:300px;height:300px" title="這是頭部信息" iconCls="icon-save" closable="true" collapsible="true">
| collapsible | 英[k??læps?bl] | 美[k??læps?bl:] |
| 可折疊的，可拆卸的;
|
minimizable="true" maximizable=true ，最大化，最小化
如果內容分行的，<p><p>獨占一行
<body> <div id="panelid" class="easyui-panel" style="width:300px;height:300px" title="這是頭部信息" iconCls="icon-save" closable="true" collapsible="true" minimizable="true" maximizable=true> <p>我是內容</p> <p>我是內容</p> <p>我是內容</p> <p>我是內容</p> </div> </body>
js來加載easyui組件
必須onload中，加載什麽組件，就jquery獲取div對象，.什麽組件
<script> $(function(){ $("#panelid").panel({ }) }) </script> </head> <body> <div id="panelid" ></div> </body>
這就相當於在裏面聲明class="easyui-panel"
註意裏面是option的json格式
<script> $(function(){ $("#panelid").panel({ width:500, height:150, title: ‘My Panel‘ }) }) </script> </head> <body> <div id="panelid" ></div> </body>
這裏面有content選項
$(function(){ $("#panelid").panel({ width:500, height:150, title: ‘My Panel‘, content:"aaaa" }) })
tools自定義工具組，每個工具包含兩個特性：
iconCls和handler
$("#panelid").panel({ width:500, height:150, title: ‘My Panel‘, content:"aaaa", iconCls:"icon-edit", collapsible:"true", minimizable:"true", maximizable:"true", closable:"true", tools: [{ iconCls:‘icon-add‘, handler:function(){alert(‘new‘)} },{ iconCls:‘icon-save‘ , handler:function(){alert(‘save‘)} 點擊工具，觸發的事件 }] })
easyui---基礎組件：panel