скрыть панель вкладок с помощью jQuery

Я использую onsen с 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
person mneu    schedule 12.05.2015    source источник
comment
Почему бы вам просто не поставить сначала ‹на странице› с логином, а затем перейти на панель вкладок?   -  person Fran Dios    schedule 13.05.2015
comment
Привет!, можешь привести пример?, спасибо!   -  person mneu    schedule 15.05.2015

Ответы (1)


arrow_upward
2
arrow_downward

Я думаю, что в вашей ситуации скрывать таббар не обязательно. Как я сказал в предыдущем комментарии, простое решение — показать сначала обычную страницу с логином, а затем перейти к основному приложению (с вкладкой) при успешном входе:

<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

person Fran Dios    schedule 18.05.2015