请参阅this question以了解我要执行的操作。唯一的例外是我正在使用ApplicationLayout,并且我希望PlaceBar下方的工具栏。有没有一种方法可以欺骗CSS以在PlaceBar下方显示工具栏,然后在滚动时将其保持在页面顶部?
或者,如何修复ApplicationLayout的顶部(即PlaceBar,TitleBar等),以使它们也不滚动?
最佳答案
更新:扩展了此想法以制作XSnippet。 Download it from here。
要修复“应用程序布局”的顶部部分,例如位置栏,标题栏,您必须查看由应用程序布局控件生成的HTML页面的CSS(为此,Google Chrome具有Inspect Element的强大功能)。它使用诸如lotusTitleBar
,lotusPlaceBar
,lotusContent
之类的类,您可以在自定义CSS中使用它们来创建浮动工具栏。
因此,假设这是您的XPage,带有来自扩展库lib的应用程序布局控件。
<?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*/
}
注意:这是一个非常基本的示例,仅包含标题栏和位置栏。如果在应用程序布局中包括横幅或其他元素,则必须进行相应的修改。