移动端安卓和IOS开发框架Framework7教程-登陆屏

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

登陆屏布局

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

<body>
...
<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="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"类，用来向用户隐藏导航元素。