EasyUI系列学习(九)-Panel(面板)

一、加载方式

1.class加载

<div class="easyui-panel" title="面板一" style="width:500px">内容一</div>

2.js加载

<div id="pl">内容二<
<script>
    $(function () {
        $("#pl").panel({
            width: 500,
            title: "面板二"
        });
    })
</script>

二、属性

1.

<div id="pl">内容二</div>
<div id="tt">
    <a href="#" class="icon-add"></a>
    <a href="#" class="icon-edit"></a>
</div>
<script>
    $(function () {
        $("#pl").panel({
            //面板属性id
            id: "pl2",
            //在面板头部显示的标题文本
            title: "面板二",
            //显示在面板左上角的图标
            iconCls: "icon-edit",
            //在面板中添加按钮
            collapsible: true,
            // collapsed:true,
            closable: true,
            //closed:true,
            minimizable: true,
            //minimized:true,
            maximizable: true,
            //maximized:true,
            tools: "#tt",
            //设置面板的宽度和高度
            width: 500,
            height: 150,
            content: "修改内容",
            //给面板添加额外css属性
            cls: "aa",
            headerCls: "bb",
            bodyCls: "cc"
        });
    })
</script>

生成的html

<div class="panel aa" style="display: block; width: 500px;">
    <div class="panel-header bb" style="width: 488px;">
        <div class="panel-title panel-with-icon">面板二</div>
        <div class="panel-icon icon-edit"></div>
        <div class="panel-tool">
            <a class="icon-add panel-tool-a" href="#"></a>
            <a class="icon-edit panel-tool-a" href="#"></a>
            <a class="panel-tool-collapse" href="javascript:void(0)"></a>
            <a class="panel-tool-min" href="javascript:void(0)"></a>
            <a class="panel-tool-max" href="javascript:void(0)"></a>
            <a class="panel-tool-close" href="javascript:void(0)"></a>
        </div>
    </div>
    <div id="pl2" class="panel-body cc" title="" style="width: 498px; height: 121px;">修改内容</div>
</div>
<div id="tt"> </div>

2.

<div id="pl">内容二</div>
<script>
    $(function () {
        $("#pl").panel({
            title: "面板二",
            width: 500,
            height: 150,
            //自适应父容器
            //fit: true,
            //不会创建面板标题
            //noheader: true,
            //不显示边框
            //border: false,
            //在面板被创建时将重新布局，默认为true
            //doSize:true,
            //默认为true，在超链接载入时缓存面板内容
            //cache: true,
            loadingMessage: "正在加载中",
            href: "demo.ashx",
            //以Ajax方式请求，返回demo.ashx的数据
            extractor: function (data) {
                alert(data);
            }
        });
    })
</script>

三、事件

四、方法