Question

 <body id="content">
  <div data-role="header">
     <h3>header text</h3>
   </div>

   <div data-role="content" id="pagePort">
       //here I am loading my integrating server generated pages sample application
   </div>

    <div data-role="footer">
       <h3>simple footer</h3
    </div>
 </body>

这是我的主要html页面。在服务器页面html页面我有

 <div id="AppBody"> 
   <div id="tabButtonsContainer">
  </div>

这个div与id =“tabbuttonsContainer”我在我的js文件中使用它作为parentdiv如下

WL.TabBar.setParentDivId（ “tabButtonsContainer”）; 但仍然只有标签栏位于顶部

Answer 1

- 查看 .tabBar css类。它有位置：固定，顶部：0和左：0，这就是为什么tabbar仍然呈现在顶部，即使它的父级位于其他位置 - 固定相对于浏览器...

- 这是一个开放的错误。

- 您可以尝试使用tabbar（或其父级）的position属性来改变它 - 只需确保它不会影响tabBar上方/下方的元素。

- 此外 - 根据设计原则，Android标签栏应位于顶部/底部。那么也许有更好的构建块可以满足您的需求？

欢呼

Answer 2

我相信tabbar模仿了android tabbar的功能，遗憾的是，对于android来说，tabbar将出现在顶部，在ios上它将在底部。虽然该文档确实说它是Android的HTML元素，但是如果你能找到控制它的css，你可以覆盖它。

http://pic.dhe.ibm.com/infocenter/wrklight/v6r0m0/index.jsp?topic=%2Fcom.ibm.worklight.help.doc%2Fapiref%2Fr_wl_tabbar_additem.html

IBM Worklight - 在集成服务器生成的页面应用程序的标题下方放置选项卡栏

2 个答案: