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

时间：2016-06-12 04:07:07 阅读：323 评论：0 收藏：0 [点我收藏+]

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

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

原文：http://zaixianshouce.iteye.com/blog/2303449

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)