这篇看看easyui是怎么实现panel的，就是类似一个容器，里面可以装具体内容或者其他的easyui控件。

1.这里先看看引用的资源文件

看到这里并没有引用一个类似panel.js的文件，看来D:\Serious\phpdev\easyui\jquery-easyui-1.3.5\plugins这个目录下放置的文件并不是按功能来区分的哦，还是因为这个控件比较简单所以没有单独的放在一个文件里面么？

2.看看html代码都有什么新的特性

     
        
      
        
      
       The panel is container for other components or elements
      
        
      
            
       Open            
       Close            
       Expand            
       Collapse        
      
        
      
            
       
                
        
jQuery EasyUI framework helps you build your web pages easily
                
        
                    
         
easyui is a collection of user-interface plugin based on jQuery.
                    
         
easyui provides essential functionality for building modem, interactive, javascript applications.
                    
         
using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.
                    
         
complete framework for HTML5 web page.
                    
         
easyui save your time and scales while developing your products.
                    
         
easyui is very easy but powerful.
                
        
            
       
        
      
    
     

　　注意那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;"这样写就会报错了，报错内容如下：

SyntaxError: missing } after property list

apsible:true,minimizable:true,maximizable:true,closable:true;}

意思是后面少个}，其实是多了个“;”，写js的时候很自然地在最后一句上价格分号，到这里是不行的，不能加分号了，不仅会报js错误还会让页面样式乱掉。

最后效果如下图：