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;
                    }
                }
            });