首页 > 其他 > 详细

EasyUI - Panel 面板控件

时间:2015-10-12 00:18:45      阅读:312      评论:0      收藏:0      [点我收藏+]

效果:

技术分享

 

html代码:

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

 

JS代码:

  • 其中有些属性,之间的使用有冲突。
  • 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");
}

 

EasyUI - Panel 面板控件

原文:http://www.cnblogs.com/KTblog/p/4870310.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!