前端框架 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人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦