前端框架 jQuery EasyUi 學習筆記七（組件的基礎--面板--panel）
使用$.fn.panel.defaults重写默认值对象。
面板作为承载其它内容的容器。这是构建其他组件的基础（比如：layout,tabs,accordion等）。它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置。
<div id="p" class="easyui-panel" title="My Panel"
style="width:500px;height:150px;padding:10px;background:#fafafa;"
data-options="iconCls:'icon-save',closable:true,
collapsible:true,minimizable:true,maximizable:true">
<p>panel content.</p>
<p>panel content.</p>
</div>//创建面板右上角的的工具栏。
<script type="text/javascript">
$(function(){
$('#p').panel({
width:500,
height:150,
title: 'My Panel',
tools: [{
iconCls:'icon-add',
handler:function(){alert('new')}
},{
iconCls:'icon-save',
handler:function(){alert('save')}
}]
});
});
</script>
</head>
<body>
<div id="p" style="padding:10px;">
<p>panel content.</p>
<p>panel content.</p>
</div>
</body>自定义面板
<script type="text/javascript">
$(function(){
$('#btn1').click(function(){
$('#p').panel('open');
});
$('#btn2').click(function(){
$('#p').panel('close');
});
});
</script>
</head>
<body>
<div style="padding-top: 200px">
<a id="btn1" href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-search'">Open</a>
<a id="btn2" href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-search'">Close</a>
</div>
<!-- 纯HTML方式 -->
<div id="p" class="easyui-panel" title="我的面板"
style="width:700px;height:200px;padding:10px;"
data-options="iconCls:'icon-save',closable:true,
collapsible:true">
<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
<li>complete framework for HTML5 web page.</li>
<li>easyui save your time and scales while developing your products.</li>
<li>easyui is very easy but powerful.</li>
</ul>
</div>
</body>//面板不同于窗口与消息框，不能移动，只能手动添加，调用'move'方法移动/
//面板到新的位置
$('#p').panel('move',{
left:100,
top:100
}); 點擊查看更多內容
2人點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦