登陆屏

优质

小牛编辑

126浏览

2023-12-01

Framework7支持登陆屏布局，它可以用在页面内部，或者用在弹出框中（嵌入），或者用作单独的遮罩。

登陆屏布局

首先，我们看一下单独的登录屏布局，它和弹出框很像：

<body>
  ...
  <!-- Should be a direct child of BODY -->
  <div class="login-screen">
      <!-- Default view-page layout -->
      <div class="view">
        <div class="page">
<!-- page-content has additional login-screen content -->
<div class="page-content login-screen-content">
  <div class="login-screen-title">My App</div>
  <!-- Login form -->
  <form>
    <div class="list-block">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title label">Username</div>
            <div class="item-input">
              <input type="text" name="username" placeholder="Username">
            </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title label">Password</div>
            <div class="item-input">
              <input type="password" name="password" placeholder="Password">
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-block">
      <ul>
        <li>
          <a href="#" class="item-link list-button">Sign In</a>
        </li>
      </ul>
      <div class="list-block-labe">Some text with login information.</div>
    </div>
  </form>
</div>
        </div>
      </div>
  </div>
</body>

注意，你在<div class="login-screen">内部看到的元素都是可选的，但是你可以把它们作为你登陆表单的样板

打开和关闭登录屏

使用HTML

可以通过在链接上添加特定的类来打开关闭登陆屏

为了打开登录屏，我们需要在HTML元素（最好是链接）上添加"open-login-screen"类
为了关闭登录屏，我们需要在HTML元素（最好是链接）上添加"close-login-screen"类

下面是示例：

<body>
  ...
    <div class="page-content">
      <div class="content-block">
        <p><a href="#" class="open-login-screen">Open Login Screen</a></p>
      </div>
    </div>
  ...
  <div class="login-screen">
    <div class="view">
      <div class="page">
        <div class="page-content login-screen-content">
<div class="login-screen-title">My App</div>
<form>
  <div class="list-block">
    <ul>
      <li class="item-content">
        <div class="item-inner">
          <div class="item-title label">Username</div>
          <div class="item-input">
            <input type="text" name="username" placeholder="Your username">
          </div>
        </div>
      </li>
      <li class="item-content">
        <div class="item-inner">
          <div class="item-title label">Password</div>
          <div class="item-input">
            <input type="password" name="password" placeholder="Your password">
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="list-block">
    <ul>
      <li><a href="#" class="item-link list-button">Sign In</a></li>
    </ul>
    <div class="list-block-label">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p><a href="#" class="close-login-screen">Close Login Screen</a></p>
    </div>
  </div>
</form>
        </div>
      </div>
    </div>
  </div>
  ...
</body>

使用JavaScript

我们可以通过JavaScript来打开关闭登陆屏，先来看一下相关的App方法：

myApp.loginScreen() - 打开登录屏

myApp.closeModal(loginScreen) - 关闭登录屏

loginScreen - HTML元素或是（含有CSS选择器的）字符串。可选。如果没有指定，任何打开的登陆屏/弹出框/模态框都会被关闭。

<body>
  ...
    <div class="page-content">
      <div class="content-block">
        <p><a href="#" class="open-login">Open Login Screen</a></p>
      </div>
    </div>
  ...
  <div class="login-screen">
    ... login screen content ...
  </div>
  ...
</body>

var myApp = new Framework7();
 
var $$ = Dom7;
 
$$('.open-login').on('click', function () {
  myApp.loginScreen();
});

登陆屏事件

登陆屏具有和Modal一样的事件，当你需要在登陆屏打开/关闭时执行操作的时候，它们会有用处。

事件	对象	描述
open	登陆屏元素<div class="login-screen">	当登陆屏开始弹出动画的时候，事件触发
opened	登陆屏元素<div class="login-screen">	当登陆屏完成弹出动画的时候，事件触发
close	登陆屏元素<div class="login-screen">	当登陆屏开始结束动画的时候，事件触发
closed	登陆屏元素<div class="login-screen">	当登陆屏完成结束动画的时候，事件触发

从登陆屏开启应用

很多时候，我们需要把登陆屏作为应用的第一个页面。为了使它在加载时可见，我们只需要对登陆屏遮罩添加"modal-in"类：

<body>
  ...
  <div class="login-screen modal-in">
    ... login screen content ...
  </div>
</body>

嵌入式登陆屏

也可以把登陆屏嵌入到页面或弹出框中。我们来看一下页面内登陆屏的示例：

index page:

<div data-page="home" class="page navbar-fixed">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left"></div>
      <div class="center">Embedded Login Screen</div>
      <div class="right"></div>
    </div>
  </div>
  <div class="page-content">
    <div class="content-block">
      <p><a href="login-screen-page.html" class="open-login-screen">Open page with Login Screen</a></p>
    </div>
  </div>
</div>

login-screen-page.html:

<div data-page="login-screen" class="page no-navbar no-toolbar no-swipeback">
  <div class="page-content login-screen-content">
    <div class="login-screen-title">My App</div>
    <form>
      <div class="list-block">
        <ul>
<li class="item-content">
  <div class="item-inner">
    <div class="item-title label">Username</div>
    <div class="item-input">
      <input type="text" name="username" placeholder="Your username"/>
    </div>
  </div>
</li>
<li class="item-content">
  <div class="item-inner">
    <div class="item-title label">Password</div>
    <div class="item-input">
      <input type="password" name="password" placeholder="Your password"/>
    </div>
  </div>
</li>
        </ul>
      </div>
      <div class="list-block">
        <ul>
<li><a href="#" class="item-link list-button">Sign In</a></li>
        </ul>
        <div class="list-block-label">
<p>Click Sign In to close Login Screen</p>
        </div>
      </div>
    </form>
  </div>
</div>

my-app.js

var myApp = new Framework7();
var $$ = Dom7;
 
var mainView = myApp.addView('.view-main');
 
myApp.onPageInit('login-screen', function (page) {
  var pageContainer = $$(page.container);
  pageContainer.find('.list-button').on('click', function () {
    var username = pageContainer.find('input[name="username"]').val();
    var password = pageContainer.find('input[name="password"]').val();
    // Handle username and password
    myApp.alert('Username: ' + username + ', Password: ' + password, function () {
      mainView.goBack();
    });
  });
});

注意，在登陆屏上我们有额外的"no-navbar"，"no-toolbar"和"no-swipeback"类，用来向用户隐藏导航元素。