отключить скользящее меню onsen-ui для страницы входа

Я только что скачал шаблон скользящего меню onsen-ui 1.2.1. Я делаю страницу входа, но мне не нужно скользящее меню на этой странице. Как я мог это сделать?

<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>

onsen-ui slidingmenu
person Surya Wono    schedule 07.01.2015    source источник
comment
Смотрите мой ответ здесь: [stackoverflow.com/questions/26487885/ [1]: stackoverflow.com/questions/26487885/   -  person AZRUL HARIS    schedule 19.03.2015

Ответы (3)


arrow_upward
6
arrow_downward

Просто используйте метод setSwipeable(swipeable), с его помощью вы можете указать, должно ли меню быть пролистываемым или нет.

Например, предположим, что это ваша декларация onsen-sliding-menu.

<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>

вы можете добавить блокировку прокрутки, используя

app.slidingMenu.setSwipeable(false)

Просто не забудьте сделать его снова пролистываемым после входа в систему.

person Andi Pavllo    schedule 20.01.2015

arrow_upward
1
arrow_downward

То, что я сделал, очень просто: я поместил форму входа в index.html, которая переходит (при нажатии кнопки входа) в файл first.html со скользящей конфигурацией. Вы можете добавить функцию входа в контроллер, а затем перейти на следующую страницу после проверки подлинности имени пользователя и пароля.

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>

страница1.html

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

страница2.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>

Надеюсь, это поможет, вот рабочий codepen

P.S. Пожалуйста, не обращайте внимания на нежелательные стили и скрипты, я использовал этот codepen для обучения.

person Ranjith Varatharajan    schedule 20.01.2015

arrow_upward
1
arrow_downward

это работает для меня

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

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