EasyUI

效果：

html代码：

<div id="p" style="padding: 10px;">
    <p>panel content.</p>
    <p>panel content.</p>
</div>

JS代码：

• 最重要的是加载数据：href: '../Json/PanelJosn.ashx',//一定要加上 “..” ，加载出数据后，会覆盖原始数据
• 其中有些属性，之间的使用有冲突。
• tools属性，与href属性，与extractor属性，与loadingMessage属性，最为有用。

$(function () {
    $('#p').panel({
         400,
        height: 200,
        title: '标题',
        iconCls: 'icon-add',
        //fit:true,//宽度自适应
        //content:'时间就是金钱'//此处设置会覆盖原有内容
        collapsible: true,//是否显示可折叠按钮
        minimizable: true,
        maximizable: true,
        closable: true,
        tools: [{//自定义工具菜单,面板的顶部
            iconCls: 'icon-add',
            handler: function () {
                alert("ADD");
            }
        }, {
            iconCls: 'icon-search',
            handler: function () {
                alert("Search");
            }
        }],
        //collapsed: true,//是否在加载的时候折叠面板  
        //minimized: true,//是否在加载的时候最小化面板  
        //maximized: true,//是否在加载的时候最大化面板
        //closed: true,//是否在加载的时候关闭面板
        href: '../Json/PanelJosn.ashx',//一定要加上 “..” ，加载出数据后，会覆盖原始数据
        loadingMessage: '正在加载信息，请稍等………………',//显示等待信息
        //extractor: function (data) {//对Ajax返回的数据进行处理，其中data就是返回的数据
        //    if (data == 'Hello World') {
        //        alert("显示的信息是：Hello World！");
        //    }
        //    else {
        //        alert("显示的信息不是：Hello World！");
        //    }
        //},
        method: 'post',//使用HTTP的哪一种方法读取内容页。可用值：'get','post'
        queryParams: 'id',
    })
})

使用到的一般处理程序，.ashx代码：

public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "application/json";
    //Thread.Sleep(1000);//延时3S
    context.Response.Write("Hello World");
}