效果:
html代码:
<div id="p" style="padding: 10px;"> <p>panel content.</p> <p>panel content.</p> </div>
JS代码:
$(function () { $(‘#p‘).panel({ width: 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"); }
原文:http://www.cnblogs.com/KTblog/p/4870310.html