CODEWITHSUNDEEP
slidingmenuonsen-ui
Surya Wono
Surya Wono

Reputation: 79

disable onsen-ui sliding menu for login page

I just download onsen-ui 1.2.1 sliding menu template. I'm making login page, but i don't want sliding menu on that page. How could i do it?

<ons-sliding-menu
    menu-page="menu.html" main-page="login.html" side="left"
    var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>

<ons-template id="login.html">
    <ons-page>
        <ons-toolbar>
            <div class="left"></div>
            <div class="center">Log In</div>
            <div class="right"></div>
        </ons-toolbar>
        <div class="login-form">
            <img src="res/icon/android/icon-96.png"/>
            <input type="email" class="text-input--underbar" placeholder="Email" value="">
            <input type="password" class="text-input--underbar" placeholder="Kata Sandi" value="">
            <br><br>
            <ons-button modifier="large" class="login-button">Log In</ons-button>
            <br><br>
            <ons-button modifier="quiet" class="forgot-password">Lupa kata sandi?</ons-button>
            <ons-button modifier="quiet" class="forgot-password">Daftar</ons-button>
        </div>
    </ons-page>
    <ons-modal var="modal_loading_login">
        <ons-icon icon="ion-loading-c" spin="true" ></ons-icon>
    </ons-modal>
</ons-template>

Upvotes: 0

Views: 3039

Answers (3)

Alfarouq
Alfarouq

Reputation: 171

this works for me

$(document).on('init', function(event) {
page = event.target; 

 if (page.id === 'page1') {
    document.getElementById('menu').removeAttribute("swipeable")
 }else{
  document.getElementById('menu').setAttribute("swipeable","true")
    }
})

Upvotes: 1

Ranjith Varatharajan
Ranjith Varatharajan

Reputation: 1694

What i did is really simple, I placed the login form in index.html, which navigates (when the login button is clicked) to first.html which has the sliding configuration. You can add the login function in a controller and then navigates to the next page when the username and password are authenticated.

index.html

  <ons-navigator animation="lift" var="LoginNavi">
  <ons-page>
      <ons-toolbar>
        <div class="center">Log In</div>
      </ons-toolbar>

      <div class="login-form">

        <input type="email"  placeholder="Email" ng-model="email">
        <input type="password"  placeholder="Password" ng-model="password">
        <br><br>
        <ons-button modifier="large" ng-click="LoginNavi.pushPage('first.html')">Log In</ons-button>
        <br><br>
        <ons-button modifier="quiet" class="forgot-password">Forgot password?</ons-button>
      </div>

    </ons-page>

  </ons-navigator>

first.html

   <ons-template id="first.html">
     <ons-page>
       <ons-sliding-menu
                  main-page="page1.html"
                  menu-page="menu.html"       
                  side="left"
                  max-slide-distance="250px"
                  var="menu">
</ons-sliding-menu>
     </ons-page>
   </ons-template>

page1.html

<ons-template id="page1.html">
  <ons-page>
    ...
  </ons-page>
</ons-template>

page2.html 

<ons-template id="page2.html">
  <ons-page>
    ...
</ons-template>

menu.html

<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('page1.html', {closeMenu: true})">
      page1.html
    </ons-list-item>
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('page2.html', {closeMenu: true})">
      page2.html
    </ons-list-item>
  </ons-list>
</ons-template>


  </body>
</html>

Hope this helps, here is a working codepen

P.S Please ignore the unwanted styles and scripts, i used that codepen for learning.

Upvotes: 1

Andi Pavllo
Andi Pavllo

Reputation: 2506

Just use the method setSwipeable(swipeable), using it you can specify if the menu should be swipeable or not.

For example, supposing that this is your onsen-sliding-menu declaration

<ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px">
</ons-sliding-menu>

you can add block the scrolling using

app.slidingMenu.setSwipeable(false)

Just remember to make it again swipeable after the login.

Upvotes: 6

Related Questions