使用 jQuery 隐藏 ons-tabbar答案

【问题标题】：ons-tabbar hide with jQuery使用 jQuery 隐藏 ons-tabbar
【发布时间】：2015-05-12 17:03:11
【问题描述】：

我正在使用带有 ons-tabbar 的温泉，并希望使用 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>

但是当我按下“Ingresar”按钮时没有任何反应，我该怎么办？

【问题讨论】：

为什么不先放一个带有登录名的然后移动到标签栏？
嗨！你能给我一个例子吗？谢谢！

标签： onsen-ui

【解决方案1】：

我认为在您的情况下没有必要隐藏标签栏。正如我在上一条评论中所说，一个简单的解决方案是首先显示一个带有登录名的普通页面，然后在登录成功时转到主应用程序（带有标签栏）：

<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

【讨论】：