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>

三、事件

四、方法

EasyUI系列学习(九)-Panel(面板)的相关教程结束。