在ApplicationLayout中浮動工具欄？

Question

請參考this question瞭解我正在嘗試做什麼。唯一的例外是我使用ApplicationLayout，我想要PlaceBar下方的工具欄。有沒有辦法讓CSS顯示PlaceBar下方的工具欄，然後在滾動時將它保留在頁面的頂部？ 或者，如何修復ApplicationLayout的頂部（即PlaceBar，TitleBar等），以便它們不滾動？

Answer 1

更新：擴展此構思以製作XSnippet。 Download it from here。

要修復應用程序佈局的頂部部分（比如地方欄，標題欄），您需要查看應用程序佈局控件生成的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*/ 
} 

注：這是一個只有標題欄和地方的酒吧非常基本的例子。如果您在應用程序佈局中包含橫幅或其他元素，則必須相應地進行修改。