请参考这个问题,以了解我正在尝试做什么。唯一的例外是我在使用ApplicationLayout,我希望工具栏在PlaceBar下面。有没有一种方法可以让CSS在PlaceBar下面显示工具栏,然后在滚动时保持在页面的顶部?或者,如何修复ApplicationLayout的顶部部分(即PlaceBar, TitleBar等),使它们也不滚动?
Update:扩展这个想法来制作XSnippet。
要修复应用程序布局的顶部部分,如位置栏,标题栏,您将不得不查看由应用程序布局控件生成的HTML页面的CSS (Google Chrome有一个伟大的功能Inspect Element)。它使用lotusTitleBar
, lotusPlaceBar
, lotusContent
等类,您可以在自定义CSS中使用它们来创建浮动工具栏。
假设这是你的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使标题栏和位置栏浮动
.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*/
}
注意:这是一个非常基本的例子,只有标题栏和位置栏。如果在应用程序布局中包含横幅或其他元素,则必须进行相应修改。