Panel组件

Panel组件

• 面板作为承载其它内容的容器。这是构建其他组件的基础（比如：layout,tabs,accordion等）
• 它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置
• 我这里是接着上一篇文章继续写的，内容效果呢直接替换 body 中的标签即可看到效果

<div id="p"
     class="easyui-panel"
     title="My Panel"
     style="width:500px;height:150px;padding:10px;background:#fafafa;"
     data-options="iconCls:'icon-save',closable:true,collapsible:true,minimizable:true,maximizable:true">
    <p>panel content.</p>
    <p>panel content.</p>
</div>

• JS 形式及属性介绍
• 定义js

<script>
    $(function () {
        $("#myPanel").panel({
            // 标题
            title: '我的面板',
            // 宽度
            width: 300,
            // 高度
            height: 300,
            // 设置一个16 x 16 的图标的CSS类选择器或者ID选择器显示在面板左上角
            iconCls: 'icon-add',
            // 面板主题内容
            content: 'BNTang',
            // 是否显示可折叠按钮
            collapsible: true,
            // 是否显示最小化按钮
            minimizable: true,
            // 是否显示最大化按钮
            maximizable: true,
            // 是否显示关闭按钮
            closable: true,
            // 是否在加载的时候折叠面板
            collapsed: false,
            // 从URL读取远程数据并且显示到面板
            href: 'BNTang.html',
            // 在加载远程数据的时候，在面板显示的内容
            loadingMessage: '正在加载...',
            // 如果为true,在超链接加载时缓存面板内容
            cache: true
        })
    });
</script>

Panel事件与方法

• 事件：直接添加事件名称和对应的回调方法即可

<script>
    $(function () {
        $("#myPanel").panel({
            // 标题
            title: '我的面板',
            // 宽度
            width: 300,
            // 高度
            height: 300,
            // 设置一个16 x 16 的图标的CSS类选择器或者ID选择器显示在面板左上角
            iconCls: 'icon-add',
            // 面板主题内容
            content: 'BNTang',
            // 是否显示可折叠按钮
            collapsible: true,
            // 是否显示最小化按钮
            minimizable: true,
            // 是否显示最大化按钮
            maximizable: true,
            // 是否显示关闭按钮
            closable: true,
            // 是否在加载的时候折叠面板
            collapsed: false,
            // 从URL读取远程数据并且显示到面板
            href: 'BNTang.html',
            // 在加载远程数据的时候，在面板显示的内容
            loadingMessage: '正在加载...',
            // 如果为true,在超链接加载时缓存面板内容
            cache: true,
            // 窗口关闭回调
            onClose: function () {
                console.log('窗口关闭');
            }
        })
    });
</script>

• 方法：通过方法可以设置Panel组件的一些属性

<div id="myPanel"></div>
<a href="javascript:;" id="btn">修改Panel标题</a>

<script>
    $(function () {
        $("#myPanel").panel({
            // 标题
            title: '我的面板',
            // 宽度
            width: 300,
            // 高度
            height: 300,
            // 设置一个16 x 16 的图标的CSS类选择器或者ID选择器显示在面板左上角
            iconCls: 'icon-add',
            // 面板主题内容
            content: 'BNTang',
            // 是否显示可折叠按钮
            collapsible: true,
            // 是否显示最小化按钮
            minimizable: true,
            // 是否显示最大化按钮
            maximizable: true,
            // 是否显示关闭按钮
            closable: true,
            // 是否在加载的时候折叠面板
            collapsed: false,
            // 从URL读取远程数据并且显示到面板
            href: 'BNTang.html',
            // 在加载远程数据的时候，在面板显示的内容
            loadingMessage: '正在加载...',
            // 如果为true,在超链接加载时缓存面板内容
            cache: true,
            // 窗口关闭回调
            onClose: function () {
                console.log('窗口关闭');
            }
        })

        $("#btn").click(function () {
            // 组件对象.组件名称(方法名称, 方法参数)
            $("#myPanel").panel("setTitle", "new Title");
        });
    });
</script>