Question

我在ons-tabbar上使用onsen并希望用jquery隐藏/显示标签。我想在登录页面中隐藏选项卡并在登录后显示。这是我的代码：

<head>
    <meta charset="utf-8">

    <script src="http://debug-software.intel.com/target/target-script-min.js#h2kN-2HmemNy-2C0zFMFsSdJyBtr__GRx6CB-TI6nsA"></script>
    <link rel="stylesheet" href="css/onsenui.css">
    <link rel="stylesheet" href="css/onsen-css-components-blue-basic-theme.css">
    <link rel="stylesheet" href="css/login.css">

    <script src="js/SQLitePlugin.js"></script>
    <script src="js/angular/angular.js"></script>
    <script src="js/onsenui.js"></script>
    <script src="js/jquery-1.11.3.min.js"></script>

    <script>
        ons.bootstrap();
        //tabMenu.hideTabs = true;

        function OnIngresar() {
            tabMenu.hideTabs = false;
        }
    </script>
</head>

<body>
    <ons-tabbar var="tabMenu" id="tabMenu">
        <ons-tab page="pagIngreso" active="true">
            <ons-icon icon="star"></ons-icon>
        </ons-tab>

        <ons-tab page="pagNovedades">
            <ons-icon icon="comment"></ons-icon>
        </ons-tab>

        <ons-tab>
            <ons-icon icon="circle"></ons-icon>
        </ons-tab>

    </ons-tabbar>

    <ons-template id="pagIngreso">
        <ons-page id="pagLogin">
            <ons-toolbar fixed-style>
                <div class="center">Ingreso</div>
            </ons-toolbar>

            <div class="login-form">
                <input type="email" class="text-input--underbar" placeholder="Email" value="">
                <br>
                <br>
                <ons-button modifier="large" class="login-button" onclick="OnIngresar();">Ingresar</ons-button>
            </div>
        </ons-page>

    </ons-template> 

    <ons-template id="pagNovedades">
        <ons-page>
            <ons-toolbar fixed-style>
                <div class="center">Novedades</div>
            </ons-toolbar>
        </ons-page>
    </ons-template>

</body>

</html>

但是当我按下按钮＆＃34; Ingresar＆＃34;没有什么事情发生，我该怎么办？

Answer 1

我认为没有必要在你的情况下隐藏tabbar。正如我在之前的评论中所说，一个简单的解决方案是首先显示一个包含登录的普通页面，然后在登录成功时转到主应用程序（使用tabbar）：

<ons-navigator var="nav" page="login.html"></ons-navigator>

<ons-template id="login.html">
    <ons-page>
    <ons-toolbar> <div class="center">Login page</div></ons-toolbar>
    Login form here...
    <ons-button onclick="doLogin();">Login</ons-button>
    </ons-page>
</ons-template>

<ons-template id="app.html">
    <ons-page>
        <ons-toolbar> <div class="center">My app</div></ons-toolbar>
        <ons-tabbar>
            tabs here...
        </ons-tabbar>
    </ons-page>
</ons-template>

然后登录并转到主应用程序：

function doLogin() {
  console.log('login...');

  // On success
  nav.resetToPage('app.html');
}

此处示例：http://codepen.io/frankdiox/pen/eNmNoz

ons-tabbar用jQuery隐藏

1 个答案: