ApplicationLayout에 플로트 도구 모음이 있습니까?

Question

내가하려는 일에 대한 아이디어를 얻으려면 this question을 참조하십시오. 유일한 예외는 ApplicationLayout을 사용하고 있으며 PlaceBar 아래의 툴바를 원합니다. CSS를 트릭하여 툴바를 PlaceBar 아래에 표시하고, 스크롤 할 때 페이지 상단에 툴바를 표시하는 방법이 있습니까? 또는 ApplicationLayout의 상단 부분 (즉, PlaceBar, TitleBar, 등 ...)을 고정하지 않으면 스크롤하지 않습니다.

Answer 1

업데이트 : XSnippet을 만들기 위해이 아이디어가 확장되었습니다. Download it from here.

작업 표시 줄, 제목 표시 줄과 같은 응용 프로그램 레이아웃의 상단 부분을 수정하려면 응용 프로그램 레이아웃 컨트롤 (HTML은 grepe grey 기능이 Inspect Element입니다)에 의해 생성 된 HTML 페이지의 CSS를 조사해야합니다. lotusTitleBar, lotusPlaceBar, lotusContent 등의 클래스를 사용하며 사용자 정의 CSS에서이 도구를 사용하여 부동 도구 모음을 만들 수 있습니다.

그래서 lib의 응용 프로그램 레이아웃 컨트롤이있는 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> 

당신은 제목 표시 줄과 장소 바 플로트에게

.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*/ 
} 

주를 만들기 위해이 CSS를 사용할 수 있습니다에만 제목 표시 줄과 장소 바가 매우 기본적인 예이다. 응용 프로그램 레이아웃에 배너 또는 기타 요소를 포함 시키면 적절하게 수정해야합니다.