IBM工作灯 - 无法修复的TabBar到屏幕底部 [英] IBM Worklight - Unable to fix tabbar to the bottom of the screen

问题描述

我想开发一个简单的应用程序，它有一个标题和页脚（标签栏），它由两个标签。

I am trying to develop a simple application that has a header and a footer (tab bar) which consist of two labels.

HTML：

<div data-dojo-type="dojox.mobile.View" id="Img1">
    <ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom">
    <li data-dojo-type="dojox.mobile.TabBarButton" icon="images/Arrow-turn-right-icon.png" data-dojo-props="transition:'flip',dir:'-1',moveTo:Home">Label</li>
    </ul>
</div>

当我尝试这样做，标签栏仍显示在屏幕的顶部。
我该如何解决，在屏幕的底部？

When I tried this, the tab bar still appears at the top of the screen. How can i fix that at the bottom of the screen?

推荐答案

您需要把的TabBar 部件在 scrollableView 而非查看。

• 例code：在基于工作灯，Dojo的应用程序固定头和TabBar


• 文档参考

• Example code: Fixed Header and TabBar in a Worklight-based Dojo app
• Documentation reference

Howto：如何

1. 创建一个新的工作灯6.1.0项目和应用程序，并选择通过向导添加到它的道场Mobile框架。添加环境进行测试。<一个href=\"http://public.dhe.ibm.com/software/mobile-solutions/worklight/docs/v610/03_03_Working_with_UI_frameworks.pdf\"相对=nofollow>阅读这个培训模块。

使用富页面编辑器，<一个href=\"http://pic.dhe.ibm.com/infocenter/wrklight/v6r0m0/index.jsp?topic=/com.ibm.worklight.help.doc/wl_studio_tools/topics/cdojolibprjsetupwl.html\"相对=nofollow>从Dojo面板中拖动查看标题部件和一个的TabBar 部件成自动生成的 scrollableView DIV 在HTML文件中。

Using the Rich Page Editor, drag from the Dojo Palette view a Heading widget and a TabBar widget into the auto-generated scrollableView div in the HTML file.

• 您当然可以添加图标...


• 我还设置 =固定顶的头因此这将是固定的。搜索结果

• You can of course add icons...
• I've also set fixed="top" for the Header so it'll be fixed as well.
  
  

运行方式>工作灯开发服务器上运行。

Run As > Run on Worklight Development Server.

由于我没有Android设备，我还增加了iPhone的环境和使用的 MBS QR code功能。

Because I don't have an Android device, I also added the iPhone environment and loaded the app web resources in my device using the MBS QR code feature.

在iPhone和工作灯控制台preVIEW我能够看到和滚动的应用程序内容，但页眉和TabBar在顶部和底部分别固定。

In both iPhone and Worklight Console preview I was able to see and scroll the app contents while the Header and TabBar are fixed at the top and bottom respectively.

全尺寸

Full size

这篇关于IBM工作灯 - 无法修复的TabBar到屏幕底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！