`

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

Framework7 
阅读更多

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

登陆屏布局

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

  1. <body>
  2.   ...
  3.   <!-- Should be a direct child of BODY -->
  4.   <div class="login-screen">
  5.       <!-- Default view-page layout -->
  6.       <div class="view">
  7.         <div class="page">
  8.           <!-- page-content has additional login-screen content -->
  9.           <div class="page-content login-screen-content">
  10.             <div class="login-screen-title">My App</div>
  11.             <!-- Login form -->
  12.             <form>
  13.               <div class="list-block">
  14.                 <ul>
  15.                   <li class="item-content">
  16.                     <div class="item-inner">
  17.                       <div class="item-title label">Username</div>
  18.                       <div class="item-input">
  19.                         <input type="text" name="username" placeholder="Username">
  20.                       </div>
  21.                     </div>
  22.                   </li>
  23.                   <li class="item-content">
  24.                     <div class="item-inner">
  25.                       <div class="item-title label">Password</div>
  26.                       <div class="item-input">
  27.                         <input type="password" name="password" placeholder="Password">
  28.                       </div>
  29.                     </div>
  30.                   </li>
  31.                 </ul>
  32.               </div>
  33.               <div class="list-block">
  34.                 <ul>
  35.                   <li>
  36.                     <a href="#" class="item-link list-button">Sign In</a>
  37.                   </li>
  38.                 </ul>
  39.                 <div class="list-block-labe">Some text with login information.</div>
  40.               </div>
  41.             </form>
  42.           </div>
  43.         </div>
  44.       </div>
  45.   </div>
  46. </body>
复制

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

打开和关闭登录屏

使用HTML

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

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

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

下面是示例：

  1. <body>
  2.   ...
  3.     <div class="page-content">
  4.       <div class="content-block">
  5.         <p><a href="#" class="open-login-screen">Open Login Screen</a></p>
  6.       </div>
  7.     </div>
  8.   ...
  9.   <div class="login-screen">
  10.     <div class="view">
  11.       <div class="page">
  12.         <div class="page-content login-screen-content">
  13.           <div class="login-screen-title">My App</div>
  14.           <form>
  15.             <div class="list-block">
  16.               <ul>
  17.                 <li class="item-content">
  18.                   <div class="item-inner">
  19.                     <div class="item-title label">Username</div>
  20.                     <div class="item-input">
  21.                       <input type="text" name="username" placeholder="Your username">
  22.                     </div>
  23.                   </div>
  24.                 </li>
  25.                 <li class="item-content">
  26.                   <div class="item-inner">
  27.                     <div class="item-title label">Password</div>
  28.                     <div class="item-input">
  29.                       <input type="password" name="password" placeholder="Your password">
  30.                     </div>
  31.                   </div>
  32.                 </li>
  33.               </ul>
  34.             </div>
  35.             <div class="list-block">
  36.               <ul>
  37.                 <li><a href="#" class="item-link list-button">Sign In</a></li>
  38.               </ul>
  39.               <div class="list-block-label">
  40.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  41.                 <p><a href="#" class="close-login-screen">Close Login Screen</a></p>
  42.               </div>
  43.             </div>
  44.           </form>
  45.         </div>
  46.       </div>
  47.     </div>
  48.   </div>
  49.   ...
  50. </body>
复制

实例预览

使用JavaScript

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

myApp.loginScreen() - 打开登录屏

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

  • loginScreen - HTML元素或是（含有CSS选择器的）字符串。可选。如果没有指定，任何打开的登陆屏/弹出框/模态框都会被关闭。
  1. <body>
  2.   ...
  3.     <div class="page-content">
  4.       <div class="content-block">
  5.         <p><a href="#" class="open-login">Open Login Screen</a></p>
  6.       </div>
  7.     </div>
  8.   ...
  9.   <div class="login-screen">
  10.     ... login screen content ...
  11.   </div>
  12.   ...
  13. </body>
复制
  1. var myApp = new Framework7();
  2.  
  3. var $$ = Dom7;
  4.  
  5. $$('.open-login').on('click', function () {
  6.   myApp.loginScreen();
  7. });
复制

实例预览

登陆屏事件

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

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

从登陆屏开启应用

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

  1. <body>
  2.   ...
  3.   <div class="login-screen modal-in">
  4.     ... login screen content ...
  5.   </div>
  6. </body>
复制

实例预览

嵌入式登陆屏

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

index page:

  1. <div data-page="home" class="page navbar-fixed">
  2.   <div class="navbar">
  3.     <div class="navbar-inner">
  4.       <div class="left"></div>
  5.       <div class="center">Embedded Login Screen</div>
  6.       <div class="right"></div>
  7.     </div>
  8.   </div>
  9.   <div class="page-content">
  10.     <div class="content-block">
  11.       <p><a href="login-screen-page.html" class="open-login-screen">Open page with Login Screen</a></p>
  12.     </div>
  13.   </div>
  14. </div>
复制

login-screen-page.html:

  1. <div data-page="login-screen" class="page no-navbar no-toolbar no-swipeback">
  2.   <div class="page-content login-screen-content">
  3.     <div class="login-screen-title">My App</div>
  4.     <form>
  5.       <div class="list-block">
  6.         <ul>
  7.           <li class="item-content">
  8.             <div class="item-inner">
  9.               <div class="item-title label">Username</div>
  10.               <div class="item-input">
  11.                 <input type="text" name="username" placeholder="Your username"/>
  12.               </div>
  13.             </div>
  14.           </li>
  15.           <li class="item-content">
  16.             <div class="item-inner">
  17.               <div class="item-title label">Password</div>
  18.               <div class="item-input">
  19.                 <input type="password" name="password" placeholder="Your password"/>
  20.               </div>
  21.             </div>
  22.           </li>
  23.         </ul>
  24.       </div>
  25.       <div class="list-block">
  26.         <ul>
  27.           <li><a href="#" class="item-link list-button">Sign In</a></li>
  28.         </ul>
  29.         <div class="list-block-label">
  30.           <p>Click Sign In to close Login Screen</p>
  31.         </div>
  32.       </div>
  33.     </form>
  34.   </div>
  35. </div>
复制

my-app.js      

  1. var myApp = new Framework7();
  2. var $$ = Dom7;
  3.  
  4. var mainView = myApp.addView('.view-main');
  5.  
  6. myApp.onPageInit('login-screen', function (page) {
  7.   var pageContainer = $$(page.container);
  8.   pageContainer.find('.list-button').on('click', function () {
  9.     var username = pageContainer.find('input[name="username"]').val();
  10.     var password = pageContainer.find('input[name="password"]').val();
  11.     // Handle username and password
  12.     myApp.alert('Username: ' + username + ', Password: ' + password, function () {
  13.       mainView.goBack();
  14.     });
  15.   });
  16. });
复制

实例预览

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

2
顶
0
踩
分享到：
| 移动端安卓和IOS开发框架Framework7教程-P ...
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

    Framework7是一个用于构建iOS和Android应用的全功能HTML框架

    Framework7 是免费开源的 HTML 移动端框架，用来开发混合移动端应用或者 iOS 7 的 Web 应用，并且带有 iOS 7 的原生外观和感觉。Framework7 也是独立的原型应用工具。

    vue-framework7-master.zip

    Vue.js 是一个轻量级的前端JavaScript框架，以其易学易用、高效和灵活性著称，而Framework7则是一个模仿iOS和Android原生界面的Web App框架。 在这个"vue-framework7-master"项目中，我们可以看到以下关键组成部分...

    Mobile Security Framework

    MobSF是Mobile Security Framework的缩写，是一个移动端应用安全问题检出的框架和工具，它适用于Android/iOS/Windows，能够执行动态和静态的恶意软件的分析和检测。支持Android和iOS以及Windows移动应用，无论是二...

    HTML移动端框架Framework7 1.6.4.zip

    Framework7是一款强大的HTML5移动应用框架，专为构建原生感觉的iOS和Android应用而设计。这个1.6.4版本的压缩包包含了用于开发移动端Web应用的所有必要资源和文件，使得开发者能够利用HTML、CSS和JavaScript技术创建...

    参考HiApp搭建的一款基于Framework7Vue和H5Plus的商城模板

    其中，`Framework7`是一个流行的开源移动应用框架，它模仿了原生iOS和Android的UI设计，提供了丰富的组件和交互效果，使得开发者能够构建出与原生应用相似的体验。`Vue.js`是一个轻量级的前端MVVM（Model-View-...

    Robot Framework 源代码阅读笔记 之 一 - CSDN博客

    Appium是一个用于移动端UI自动化测试的工具，它支持iOS和Android平台上的原生、移动Web和混合应用。 除了测试工具，文章还提及了性能测试相关的工具。Locust是一个基于事件的性能测试工具，它使用Python的协程来...

    完整.net服务端Android、IOS客户端

    这个项目采用的技术栈是ASP.NET MVC和WebAPI作为后端开发框架，用于提供服务和数据接口，而Android Studio则用于构建Android客户端，iOS端虽然没有详细描述，但通常也会使用Swift或Objective-C进行开发。 描述中...

    移动端：手把手带你入门跨平台UI开发框架Flutter，看完这篇-flutter框架

    **Flutter** 是一款由Google推出的跨平台移动应用开发框架，旨在通过一套代码库就能开发出高质量的iOS和Android应用。该框架的核心优势在于其高效的开发速度、优秀的性能表现以及强大的跨平台能力。 #### 二、关键...

    移动端WebUI框架CMUI.zip

    一个简单粗暴的移动端 Web UI 框架。CMUI 是一个专攻移动网页的 UI 框架，它提供了丰富的组件和简洁的接口，开箱即用。CMUI 帮助开发者摆脱样式细节和兼容性困扰，从而腾出更多精力投入到业务开发中。兼容性浏览器...

    常用的移动端和前端的资源

    React Native是由Facebook开发的开源框架，它允许开发者用JavaScript和React语法构建原生的iOS和Android应用。通过React的声明式编程模型和组件化思想，开发者可以实现高效且可复用的代码，大大简化了移动应用的开发...

    HTML移动端框架Framework7 1.6.4

    Framework7是一个开源免费的HTML移动端框架，可以用来开发混合移动应用(原生和HTML混合)或者开发iOS&Android风格的WEB APP，也可以用来作为原型开发工具，可以迅速创建一个应用的原型。Framework7 1.6.4 更新日志：...

    移动端渗透测试框架MSF

    移动安全框架MSF（Mobile Security Framework - MobSF）是一个全面的、开源的渗透测试和安全分析平台，专门针对移动应用，如Android和iOS应用程序。它为安全专家提供了自动化静态和动态分析工具，帮助他们在开发周期...

    framework7-recipes:Framework7概念证明模板，布局和脚本

    Framework7 是由Ilya Krasheninnikov开发的，它支持HTML5、CSS3和JavaScript技术，可以构建iOS和Android风格的应用。框架的核心特性包括页面路由、组件库、交互动画以及可定制的主题。 二、项目结构 在"framework7...

    xamarin +Prism 进行移动端开发

    在移动应用开发领域，Xamarin 和 Prism 是两个强大的工具，它们结合使用可以为开发者提供一套高效、跨平台的解决方案，支持构建高质量的Android、iOS和Windows应用程序。让我们深入探讨一下如何利用Xamarin和Prism...

    AureliaFramework7一个轻量级的移动应用平台

    Framework7则是一款流行的移动应用UI框架，它提供了一套完整的iOS和Android风格的组件，包括导航栏、侧滑菜单、表单元素等，使得开发者可以快速构建出原生感观的应用界面。当Aurelia与Framework7结合时，开发者可以...

    meteor-framework7:framework7整合

    Framework7 是一款强大的移动端 UI 框架，提供了丰富的组件和布局选项，可帮助开发者构建出高度仿原生的 iOS 和 Android 应用界面。其组件库包括滑动导航、侧滑菜单、下拉刷新、上拉加载更多等，能够满足多种应用...

    meteor-framework7

    Framework7 是一款强大的HTML5移动应用框架，模仿原生iOS和Android的界面风格，提供了丰富的组件和API，使得开发者能够用HTML、CSS和JavaScript构建出与原生应用体验相近的Web应用。它特别适合构建单页应用（SPA）和...

    透视C#核心技术：系统架构及移动端开发源码

    7. **移动端开发**：在移动端，C#通过Xamarin或Unity3D支持iOS和Android应用开发。学习如何使用这些工具和技术，结合C#编写跨平台的移动应用，是现代开发者的必备技能。 8. **单元测试与持续集成**：TDD（Test-...

    rexxar-ios:移动混合框架Rexxar iOS容器

    Rexxar 是一个针对移动端的混合开发框架。现在支持 Android 和 iOS 平台。Rexxar-iOS 是 Rexxar 在 iOS 系统上的客户端实现。 通过 Rexxar，你可以使用包括 javascript，css，html 在内的传统前端技术开发移动应用。...

    移动端APP女性化妆品超市商城模板.zip

    Framework7是一款开源的HTML5移动应用框架，它允许开发者使用Web技术（HTML, CSS, JavaScript）来构建原生iOS和Android应用，其设计灵感来源于苹果的Swift和Objective-C。该框架提供了丰富的组件和交互效果，使得...

Magicbox
Global site tag (gtag.js) - Google Analytics