选项卡在 Dojo 应用程序中不起作用

Question

我正在尝试使用 Dojo 工具包在 IBM MobileFirst Platform 上的 eclipse juno 上的混合应用程序中创建多个页面。

在设计视图中：主页以外的页面中的文字不会出现。

在运行和部署所有环境之后，我在浏览器上预览 (chrome)，但选项卡不起作用

<!DOCTYPE HTML>
<html>
<head>
        <meta charset="UTF-8">
        <title>MoodApp</title>
        <meta name="viewport"
         content="width=device-width, initial-scale=1, maximum-scale=1, user- scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="stylesheet" href="css/main.css">
        <script>window.$ = window.jQuery = WLJQ;</script>
        <script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
        <script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
    </head>


    <body style="display: none;">

<div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:false">
    <div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
    </div>
    <ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom">
        <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:loginPage,transition:'slide',icon:'images/done.png'">Log in</li><li
            data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:signupPage,icon:'images/comments16.png',transition:'slide'">Sign up</li>
    </ul>

    <div data-dojo-type="dojox.mobile.View" id="loginPage" data-dojo-props="selected:true">Enter username and password</div>
    <div data-dojo-type="dojox.mobile.View" id="signupPage" data-dojo-props="selected:false">sign up now</div>


</div>




<script src="js/initOptions.js"></script>
        <script src="js/main.js"></script>
        <script src="js/messages.js"></script>
    </body>

Answer 1

Eclipse Juno 不是 IBM MobileFirst Platform 中支持的 Eclipse 版本 - 升级到 Eclipse JavaEE Kepler 或 Luna。
在设计模式下，您只会看到活动选项卡，因此根据您的代码，您只会看到视图 0。在 data-dojo-props="selected 的 true/false 值之间交换以进行切换在您的页面之间...但更好的是，请参阅下面更完整的示例。

您的选项卡不起作用，因为您没有将 moveTo 值放在单引号中：

<ul data-dojo-type="dojox.mobile.TabBar">
    <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'loginPage',transition:'slide',icon:'images/done.png'">Login</li>
    <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'signupPage',icon:'images/comments16.png',transition:'slide'">Signup</li>
</ul>

更完整的例子：

<div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:false">
    <div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
    </div>

    <p>
        This is view 0.<br/>
        This is view 0.<br/>
        This is view 0.<br/>
    </p>

    <ul data-dojo-type="dojox.mobile.TabBar">
        <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'loginPage',transition:'slide',icon:'images/done.png'">Login</li>
        <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'signupPage',icon:'images/comments16.png',transition:'slide'">Signup</li>
    </ul>
</div>

<div data-dojo-type="dojox.mobile.View" id="loginPage" data-dojo-props="selected:false">
    <div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
    </div>
    Enter username and password
</div>

<div data-dojo-type="dojox.mobile.View" id="signupPage" data-dojo-props="selected:false">
    <div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
    </div>

    sign up now
</div>

选项卡在 Dojo 应用程序中不起作用

Tabs not working in a Dojo app

eclipse

dojo

android

ibm-mobilefirst