使用素数 p:布局创建浮动、可折叠的面板

这里的目标是创建一个可折叠的面板，该面板也可以独立于它所在的页面浮动（因此无论页面滚动到何处，它始终可见）。

我认为p：layout将是一个很好的起点。

在我的页面中，我有

<div id="tools" class="toolbox">
    <p:layout fullPage="false">
        <p:layoutUnit position="center" collapsed="true" style="padding: initial; border: initial; overflow: hidden;"/>
        <p:layoutUnit position="east" header="Toolbox" resizable="false" closable="false" collapsible="true">
            <p:tabView id="toolbox-tab">
                <p:tab id="tab1" title="Notes">
                    <p:inputTextarea rows="15" cols="50" />
                </p:tab>
            </p:tabView>
        </p:layoutUnit>
    </p:layout>
</div>

与工具箱关联的样式为：

.toolbox {
    position: fixed;
    right: 0;
    width: 360px;
    top: 15em;
}

我对此不满意，因为在没有滚动条的情况下"隐藏"中央面板似乎有点黑客。

这是一个很好的解决方案，还是有人可以提出更好的方法来做到这一点？

编辑：

更具体地说，我想知道是否有另一种方法来复制 p：layout 面板的布局格式以及 Primefaces 使用的可折叠小部件按钮？

我想我需要更多关于它的解释，但是，这可能是类似的东西吗？

<html lang="en">
<head>
    <meta charset="utf-8">
        <style type="text/css">
            .container {
                position: relative;
            }
            .tab {
                position: absolute;
                top: 15em;
                right: 0;
                width: 360px;
                background-color: red;
            }
        </style>
</head>
<body>
    <div class="container">
        <p class="tab">
            CONTENT
        </p>
    </div>
</body>

然后，您应该决定如何处理滚动条问题：

使用全宽，不包括溢出滚动条，并带有"位置：绝对"

或者，如果您想限制

的高度，使其可滚动...

希望对你有帮助!

相关内容

最新更新

热门标签：