这篇看看easyui是怎么实现panel的，就是类似一个容器，里面可以装具体内容或者其他的easyui控件。
1.这里先看看引用的资源文件
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/icon.css" /> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/demo/demo.css" /> <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
看到这里并没有引用一个类似panel.js的文件，看来D:\Serious\phpdev\easyui\jquery-easyui-1.3.5\plugins这个目录下放置的文件并不是按功能来区分的哦，还是因为这个控件比较简单所以没有单独的放在一个文件里面么？
2.看看html代码都有什么新的特性
<div> <div class="demo-tip icon-tip"></div> <div>The panel is container for other components or elements</div> <div style="margin:10px 0;"> <a class="easyui-linkbutton" href="javascript:void(0);" onclick="javascript:$('#p').panel('open')">Open</a> <a class="easyui-linkbutton" href="javascript:void(0);" onclick="javascript:$('#p').panel('close')">Close</a> <a class="easyui-linkbutton" href="javascript:void(0);" onclick="javascript:$('#p').panel('expand',true)">Expand</a> <a class="easyui-linkbutton" href="javascript:void(0);" onclick="javascript:$('#p').panel('collapse',true)">Collapse</a> </div> <div style="height:350px;border:1px solid #ccc"> <div id="p" class="easyui-panel" title="Basic Panel" style="width:500px;height:200px;padding:10px;" data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable: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> </div> </div>
注意那4个超链接不属于panel，只是用来外部控制的。看字面意思就应该能够猜出什么功能了，$('#p').panel('open')这句貌似就是讲id=p的元素作为一个opanel并且打开它，$('#p').panel('close')这个是关闭它，$('#p').panel('expand',true)这个是展开它，这一这里有两个参数了，$('#p').panel('collapse',true)这个就是收缩它。
下面首先定义了一个div，在这个div里面嵌套了一个div，这里class="easyui-panel"貌似就是把它当成一个panel控件，下面这个特性就比较长了
data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true"
iconCls:'icon-save'：指定它的图标是类似word里面的保存按钮图标
collapsible:true：指定可以收缩
minimizable:true：指定可以最小化
maximizable:true:指定可以最大化
closable:true：指定可以关闭
这些都比较容易理解了，但是我遇到一个比较小巧的问题data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true;"这样写就会报错了，报错内容如下：
apsible:true,minimizable:true,maximizable:true,closable:true;} |
意思是后面少个}，其实是多了个“;”，写js的时候很自然地在最后一句上价格分号，到这里是不行的，不能加分号了，不仅会报js错误还会让页面样式乱掉。
最后效果如下图：
作者：Tyler Ning
出处：http://www.cnblogs.com/tylerdonet/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，如有问题，可以通过以下邮箱地址williamningdong@gmail.com 联系我，非常感谢。
