EasyUI - Panel 面板控件
效果:
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({ 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"); }
posted on 2015-10-11 22:40 ultrastrong 阅读(392) 评论(0) 编辑 收藏 举报