css - 应用程序布局中的 float 工具栏？

Question

请引用this question了解我正在尝试做什么。唯一的异常(exception)是我使用的是 ApplicationLayout，并且我希望工具栏位于 PlaceBar 下方。有没有办法欺骗 CSS 将工具栏显示在 PlaceBar 下方，然后在滚动时将其保留在页面顶部？ 或者，如何修复 ApplicationLayout 的顶部部分(即 PlaceBar、TitleBar 等)，以便它们也不会滚动？

Answer 1

更新:扩展了这个想法来制作 XSnippet。 Download it from here .

要修复应用程序布局的顶部部分(例如位置栏、标题栏)，您必须查看应用程序布局控件生成的 HTML 页面的 CSS(Google Chrome 对此有一个很棒的功能 Inspect Element)。它使用 lotusTitleBar、lotusPlaceBar、lotusContent 等类，您可以在自定义 CSS 中使用它们来创建 float 工具栏。

假设这是否是您的 XPage，具有来自扩展库的应用程序布局控制。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:this.resources>
        <xp:styleSheet href="/cssAppLayoutFloatingMenu.css"></xp:styleSheet>
    </xp:this.resources>
    <xe:applicationLayout id="applicationLayout1">
        <xp:panel>
            Sample Text. 1
            <xp:br></xp:br>
            Sample Text. 2
            <xp:br></xp:br>
            Sample Text. 3
            <xp:br></xp:br>
            Sample Text. 4
        </xp:panel>
        <xe:this.configuration>
            <xe:oneuiApplication titleBarName="Sample Title" placeBarName="Sample Place">
                <xe:this.footerLinks>
                    <xe:basicContainerNode label="Container 1">
                        <xe:this.children>
                            <xe:basicLeafNode label="Link 1" href="/"></xe:basicLeafNode>
                            <xe:basicLeafNode label="Link 2" href="/"></xe:basicLeafNode>
                        </xe:this.children>
                    </xe:basicContainerNode>
                    <xe:basicContainerNode label="Container 2">
                        <xe:this.children>
                            <xe:basicLeafNode label="Link 1" href="/"></xe:basicLeafNode>
                            <xe:basicLeafNode label="Link 2" href="/"></xe:basicLeafNode>
                        </xe:this.children>
                    </xe:basicContainerNode>
                </xe:this.footerLinks>
                <xe:this.placeBarActions>
                    <xe:pageTreeNode label="Page 1"></xe:pageTreeNode>
                    <xe:pageTreeNode label="Page 2"></xe:pageTreeNode>
                </xe:this.placeBarActions>
            </xe:oneuiApplication>
        </xe:this.configuration>
    </xe:applicationLayout>
</xp:view>

您可以使用此 CSS 使标题栏和位置栏 float

.lotusTitleBar {
    /*Class for Title bar*/
    position: fixed;
    width: 100%;
    height: 45px;
    z-index: 100;
}
.lotusPlaceBar {
    /*Class for Place bar*/
    position: fixed;
    width: 100%;
    z-index: 100;
    top: 45px; /*Start after height of lotusTitleBar*/
    height: 35px;
}
.lotusContent {
    /*Class for Content*/
    position: relative;
    top: 80px; /*Height of lotusTitleBar + Height of lotusPlaceBar*/
}

注意:这是一个非常基本的示例，只有标题栏和位置栏。如果您在应用程序布局中包含横幅或其他元素，则必须进行相应修改。