jquery-EasyUI---panel面板的用法

1、面板大致使用方法和ext差不错，之前有学过一些ext的知识，这里不对panel中的细节进行配置

直接学习在应用场景中如何加载数据，在面板中加载数据

1、标签的形式：

<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> 

2、远程加载;

<div id="content" class="easyui-panel" style="height:200px" 
data-options="href:'test.json?page=1'"> 

3、js

<div id="p" class="easyui-panel" title="My Panel"     
        style="width:500px;height:150px;padding:10px;background:#fafafa;"   
       >   
        <p>panel content.</p>   
        <p>panel content.</p>   
    </div> 
    <ul>
        <li>ddddd</li>
        <li>ddddd</li>
        <li>ddddd</li>
    </ul>

4、我们想刚刚那种href指向某个文件的方式返回的数据格式有可能不是我们需要的，因此我们需要对数据格式进行修改

$("#move").click(function  () {
            $('#p').panel({
                tools:[{
                    iconCls:'icon-reload',
                    handler:function(){
                        $('#p').panel('refresh', 'test1.html');
                    }
                }],
                extractor: function(data){
                    //这里可以对返回的data进行处理
                    return data;
                }
            });   
        })

还有一种方式是我们请求某个html文档，我们用正则去匹配到body中间的内容

修改过后的代码：

$('#p').panel({
                tools:[{
                    iconCls:'icon-reload',
                    handler:function(){
                        $('#p').panel('refresh', 'test1.html');
                    }
                }],
                extractor: function(data){
                    var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
                    var matches = pattern.exec(data);
                    if (matches){
                        console.log(matches[1])
                        return matches[1];    // 仅提取主体内容
                    } else {
                        return data;
                    }
                }
            });