JQueryEasyUI 组件布局 portal组件

最新推荐文章于 2025-05-25 13:54:12 发布

原创最新推荐文章于 2025-05-25 13:54:12 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #Web #easyui #布局

JQueryEasyUI 专栏收录该内容

17 篇文章

订阅专栏

JQueryEasyUI 的 Portal组件旨在以用户为中心，提供信息的集中访问方式。该组件允许方便地集成来自不同渠道的信息到一个统一的页面模块中，实现个性化布局。通过其属性配置和方法应用，可以灵活创建和管理门户布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，介绍

以用户为中心实现信息的集中访问
利用portal 可以方便地将登录用户所需要的，来源各种渠道的信息集成在一个统一的页面模块之内

2，属性

属性名	属性值类型	描述
width	number	门户宽度
height	number	门户高度
border	boolean	定义是否显示门户边框
fit	boolean	当属性为true时则设置门户大小自适应父容器

3，方法

方法名	参数类型	描述
add	param	加一个新面板 'param' 参数包含一下属性： panel ：添加的面板对象 columnIndex: 插入的列索引
remove	panel	移除和销毁指定面板

4，实例

<div id="portal-new">
        <div style="width: 33%">第一块</div>
        <div style="width: 33%">第二块</div>
        <div style="width: 33%">
            <div id="frm1" title="31" style="height:500px">
                31
                <a id="btn"  href="#" class="easyui-linkbutton" data-options="iconCls:'icnon-add'">在第一块add</a>
                <a id="btn2" href="#" class="easyui-linkbutton" data-options="iconCls:'icnon-add'">在第二块add</a>
                <a id="btn3" href="#" class="easyui-linkbutton" data-options="iconCls:'icnon-add'">在第三块add</a>
            </div>
            <div id="frm2" title="32" style="height:500px">32</div>
        </div>
    </div>

  $(function () {
            $("#portal-new").portal({
                border: true,
                fit: true
            });

            $("#btn").linkbutton({
                onClick: function () {
                    add("第一块", 0);//添加函数
                }
            });

            $("#btn2").linkbutton({
                onClick: function () {
                    add("第二块", 1);//添加函数
                }
            });

            $("#btn3").linkbutton({
                onClick: function () {
                    //删除代码
                    $("#portal-new").portal("remove", "#frm2");
                }
            });
        });

        function add(strTitle, i) {
            var p = $("<div><div/>").appendTo("body");//在body 标签元素创建一个div
            p.panel({
                //将div实例化并渲染一个panel组件
                title: strTitle,
                content: strTitle,
                height: 150,
                closable: true,
                collapsible:true
            });
            $("#portal-new").portal('add', {
                panel: p,
                columnIndex:i,
            });

            $("#portal-new").portal("resize");
        }