`

移动端安卓和IOS开发框架Framework7教程-动态导航栏

Framework7 
阅读更多

Modal 是从App的主要内容区域上弹出的一小块内容块. Modals经常被用来向用户询问信息，或通知或警告用户。 Modal和其他所有的遮罩图层一样，是所谓的“临时视图”的一部分。

Modals 可以只用JavaScript打开。所以让我们来看看使用modals的相关APP方法

预定义的 Modals

  • 注意，如果你没有指定预定义的modal标题，它讲使用默认的标题("Framework7")，这个可以在App 初始化时，通过传递modalTitle 参数改变。

  • 预定义modals的按钮文本(如 "Ok" 和 "Cancel") 也可以在 App 初始化时，通过传递 modalButtonOk 和 modalButtonCancel 参数改变。

首先，让我们看看已经预定义的最常用的modal:

Alert

我们需要调用以下任一一种App方法来打开Alert modal ：myApp.alert(text, [title, callbackOk])
or 
myApp.alert(text, [callbackOk])

  • text - string. Alert文本
  • title - string. Optional. Alert modal 标题
  • callbackOk - function. Optional.在Alert modal下，当用户点击“Ok”按钮时，回调函数将被执行。
  • 该方法返回动态创建的modal的HTML元素。
  1. <body>
  2.   ...
  3.   <div class="page-content">
  4.     <div class="content-block">
  5.       <p><a href="#" class="alert-text">Alert With Text</a></p>
  6.       <p><a href="#" class="alert-text-title">Alert With Text and Title</a></p>
  7.       <p><a href="#" class="alert-text-title-callback">Alert With Text and Title and Callback</a></p>
  8.       <p><a href="#" class="alert-text-callback">Alert With Text and Callback</a></p>
  9.     </div>
  10.   </div>
  11.   ...
  12. </body>
复制
  1. var myApp = new Framework7();
  2.  
  3. var $$ = Dom7;
  4.  
  5. $$('.alert-text').on('click', function () {
  6.     myApp.alert('Here goes alert text');
  7. });
  8.  
  9. $$('.alert-text-title').on('click', function () {
  10.     myApp.alert('Here goes alert text', 'Custom Title!');
  11. });
  12.  
  13. $$('.alert-text-title-callback').on('click', function () {
  14.     myApp.alert('Here goes alert text', 'Custom Title!', function () {
  15.         myApp.alert('Button clicked!')
  16.     });
  17. });
  18.  
  19. $$('.alert-text-callback').on('click', function () {
  20.     myApp.alert('Here goes alert text', function () {
  21.         myApp.alert('Button clicked!')
  22.     });
  23. });
复制

实例预览

Confirm

Confirm modal 经常在需要确认一些行为时被使用. 打开Alert modal同样也需要调用以下任一一种App方法：

myApp.confirm(text, [title, callbackOk, callbackCancel])
or 
myApp.confirm(text, [callbackOk, callbackCancel])

  • text - string. Confirm 文本
  • title - string. Optional. Confirm modal 标题
  • callbackOk - function. Optional. 在 Confirm modal下，当用户点击“Ok”按钮时，回调函数将被执行。(当用户确认操作）
  • callbackCancel - function. Optional. 在 Confirm modal下，当用户点击“Cancel”按钮时，回调函数将被执行。(当用户不想进行操作)
  • 该方法返回动态创建的modal的HTML元素。
  1. <body>
  2.   ...
  3.   <div class="page-content">
  4.     <div class="content-block">
  5.       <p><a href="#" class="confirm-ok">Confirm with text and Ok callback</a></p>
  6.       <p><a href="#" class="confirm-ok-cancel">Confirm with text, Ok and Cancel callbacks</a></p>
  7.       <p><a href="#" class="confirm-title-ok">Confirm with text, title and Ok callback</a></p>
  8.       <p><a href="#" class="confirm-title-ok-cancel">Confirm with text, title, Ok and Cancel callback</a></p>
  9.     </div>
  10.   </div>
  11.   ...
  12. </body>
复制
  1. $$('.confirm-ok').on('click', function () {
  2.     myApp.confirm('Are you sure?', function () {
  3.         myApp.alert('You clicked Ok button');
  4.     });
  5. });
  6.  
  7. $$('.confirm-ok-cancel').on('click', function () {
  8.     myApp.confirm('Are you sure?', 
  9.       function () {
  10.         myApp.alert('You clicked Ok button');
  11.       },
  12.       function () {
  13.         myApp.alert('You clicked Cancel button');
  14.       }
  15.     );
  16. });
  17. $$('.confirm-title-ok').on('click', function () {
  18.     myApp.confirm('Are you sure?', 'Custom Title', function () {
  19.         myApp.alert('You clicked Ok button');
  20.     });
  21. });
  22. $$('.confirm-title-ok-cancel').on('click', function () {
  23.     myApp.confirm('Are you sure?', 'Custom Title', 
  24.       function () {
  25.         myApp.alert('You clicked Ok button');
  26.       },
  27.       function () {
  28.         myApp.alert('You clicked Cancel button');
  29.       }
  30.     );
  31. });
复制

实例预览

Prompt

Prompt modal 经常在需要从用户那里得到一些数据/答案时使用。打开 Prompt modal同样也需要调用以下任一一种App方法：

myApp.prompt(text, [title, callbackOk, callbackCancel])
or 
myApp.prompt(text, [callbackOk, callbackCancel])

  • text - string. Prompt 文本/问题
  • title - string. Optional. Prompt modal 标题
  • callbackOk - function. Optional. 在 Prompt modal下，当用户点击“Ok”按钮时，回调函数将被执行。回调函数的参数是输入框的值
  • callbackCancel - function. Optional. 在 Prompt modal下，当用户点击“Cancel”按钮时，回调函数将被执行。回调函数的参数是输入框的值
  • 该方法返回动态创建的modal的HTML元素。
  1. <body>
  2.   ...
  3.   <div class="page-content">
  4.     <div class="content-block">
  5.       <p><a href="#" class="prompt-ok">Prompt with text and Ok callback</a></p>
  6.       <p><a href="#" class="prompt-ok-cancel">Prompt with text, Ok and Cancel callbacks</a></p>
  7.       <p><a href="#" class="prompt-title-ok">Prompt with text, title and Ok callback</a></p>
  8.       <p><a href="#" class="prompt-title-ok-cancel">Prompt with text, title, Ok and Cancel callback</a></p>
  9.     </div>
  10.   </div>
  11.   ...
  12. </body>
复制
  1.          $$('.prompt-ok').on('click', function () {
  2.     myApp.prompt('What is your name?', function (value) {
  3.         myApp.alert('Your name is "' + value + '". You clicked Ok button');
  4.     });
  5. });
  6.  
  7. $$('.prompt-ok-cancel').on('click', function () {
  8.     myApp.prompt('What is your name?', 
  9.       function (value) {
  10.         myApp.alert('Your name is "' + value + '". You clicked Ok button');
  11.       },
  12.       function (value) {
  13.         myApp.alert('Your name is "' + value + '". You clicked Cancel button');
  14.       }
  15.     );
  16. });
  17. $$('.prompt-title-ok').on('click', function () {
  18.     myApp.prompt('What is your name?', 'Custom Title', function (value) {
  19.         myApp.alert('Your name is "' + value + '". You clicked Ok button');
  20.     });
  21. });
  22. $$('.prompt-title-ok-cancel').on('click', function () {
  23.     myApp.prompt('What is your name?', 'Custom Title', 
  24.       function (value) {
  25.         myApp.alert('Your name is "' + value + '". You clicked Ok button');
  26.       },
  27.       function (value) {
  28.         myApp.alert('Your name is "' + value + '". You clicked Cancel button');
  29.       }
  30.     );
  31. });
复制

实例预览

Login and Password

有两个用来验证的特殊modals :

myApp.modalLogin(text, [title, callbackOk, callbackCancel])
or 
myApp.modalLogin(text, [callbackOk, callbackCancel])

  • text - string. Modal 文本
  • title - string. 可选. Modal 标题
  • callbackOk - function. 可选. 用户点击“确定”按钮时，回调函数将被执行。 回调函数的参数是用户名和密码
  • callbackCancel - function. 可选. 当用户点击“取消”按钮时，回调函数将被执行。 回调函数的参数是用户名和密码
  • 该方法返回动态创建的modal的HTML元素。

myApp.modalPassword(text, [title, callbackOk, callbackCancel])
or 
myApp.modalPassword(text, [callbackOk, callbackCancel])

  • text - string. Modal 文本
  • title - string. Optional. Modal 标题
  • callbackOk - function. Optional. 用户点击“确定”按钮时，回调函数将被执行。 回调函数的参数是用户输入的密码
  • callbackCancel - function. Optional. 当用户点击“取消”按钮时，回调函数将被执行。回调函数的参数是用户输入的密码
  1. <div class="page-content">
  2.   <div class="content-block">
  3.     <p><a href="#" class="login-modal">Login Modal</a></p>
  4.     <p><a href="#" class="password-modal">Password Modal</a></p>
  5.   </div>
  6. </div>
复制
  1. var myApp = new Framework7();
  2.  
  3. var $$ = Dom7;
  4.  
  5. $$('.login-modal').on('click', function () {
  6.     myApp.modalLogin('Authentication required', function (username, password) {
  7.         myApp.alert('Thank you! Username: ' + username + ', Password: ' + password);
  8.     });
  9. });
  10.  
  11. $$('.password-modal').on('click', function () {
  12.     myApp.modalPassword('You password please:', function (password) {
  13.         myApp.alert('Thank you! Your password is: ' + password);
  14.     });
  15. });
复制

实例预览

嵌套Modals

当然,您可能已经注意到,你在任何其他modal回调函数中“嵌套“这个modals

  1. <body>
  2.   ...
  3.   <div class="page-content">
  4.     <div class="content-block">
  5.       <p><a href="#" class="name">What is your name?</a></p>
  6.     </div>
  7.   </div>
  8.   ...
  9. </body>
复制
  1. $$('.name').on('click', function () {
  2.     myApp.prompt('What is your name?', function (value) {
  3.         myApp.confirm('Are you sure that your name is ' + value + '?', function () {
  4.             myApp.alert('Ok, your name is "' + value + '"!');
  5.         });
  6.     });
  7. });
复制

实例预览

预加载 Modal (Preloader Modal)

预加载 Modal 用来提示一些后台活动（像Ajax请求）和阻止在这个活动期间的任何用户操作。 打开预加载 modal 我们也需要调用适当的App方法:

myApp.show预加载([title]) - 显示 预加载 modal

  • title - string. Optional. 预加载 modal 标题. 默认（没有指定）的时候，它等同于 "Loading...". 你可以在App初始化时通过  modal预加载Title 参数改变默认的 预加载 标题。
  • 该方法返回动态创建的modal的HTML元素。

myApp.hide预加载() - 隐藏/关闭 预加载 modal. 因为 预加载 modal 没有任何按钮, 它应该用 JavaScript 来关闭

  1. <body>
  2.   ...
  3.   <div class="page-content">
  4.     <div class="content-block">
  5.       <p><a href="#" class="open-preloader">Open Preloader</a></p>
  6.       <p><a href="#" class="open-preloader-title">Open Preloader with custom title</a></p>
  7.     </div>
  8.   </div>
  9.   ...
  10. </body>
复制
  1. $$('.open-preloader').on('click', function () {
  2.     myApp.showPreloader();
  3.     setTimeout(function () {
  4.         myApp.hidePreloader();
  5.     }, 2000);
  6. });
  7. $$('.open-preloader-title').on('click', function () {
  8.     myApp.showPreloader('Custom Title')
  9.     setTimeout(function () {
  10.         myApp.hidePreloader();
  11.     }, 2000);
  12. });
复制

实例预览

指示器(indicator)

如果你不需要用像预加载Modal这样如此大的modal 窗口去指示活动, 你可以使用简单并且小的指示器modal:

myApp.showIndicator() - 显示指示器 modal

myApp.hideIndicator() - 隐藏/关闭指示器 modal. 因为指示器modal没有任何按钮, 它需要用JavaScript来关闭

  1. <body>
  2.   ...
  3.   <div class="page-content">
  4.     <div class="content-block">
  5.       <p><a href="#" class="open-indicator">Open Indicator</a></p>
  6.     </div>
  7.   </div>
  8.   ...
  9. </body>
复制
  1. $$('.open-indicator').on('click', function () {
  2.     myApp.showIndicator();
  3.     setTimeout(function () {
  4.         myApp.hideIndicator();
  5.     }, 2000);
  6. });
复制

实例预览

自定义Modals

Ok, 所有的预定义modals都只是一些适用于特定的场景的方法. 让我们看看如何创建自定义的 modals:

myApp.modal(parameters) - 显示 custom modal

  • parameters - object. Modal 的 parameters/options对象
  • 该方法返回动态创建的modal的HTML元素。

这里有 Modal 的参数列表:

Parameter（参数） Type（类型） Default（默认值） Description（描述）
title 字符串   可选. Modal 标题 (可以是html字符串)
text 字符串   可选. Modal 文本 (可以是html字符串)
afterText 字符串   可选. 将被放在"text"后的文本 (可以是html字符串)
buttons 数组   可选. 按钮数组. 每个按钮应该被表示为带按钮参数的对象 (看下面)
verticalButtons boolean false Optional. Set to true to enable vertical buttons layout
onClick 函数   可选. 回调函数将在用户点击任何Modal按钮后被触发执行. 它接收 modal (Modal的 HTML元素) 和 index作为参数 (被点击按钮的索引号)

让我们一起来看看按钮参数:

Parameter（参数） Type（类型） Default（默认值） Description（描述）
text 字符串   按钮文本 (可以是 HTML 字符串)
bold 布尔值 false 可选. 设置为true会加粗按钮文本
close 布尔值 true 可选. 如果是“true”，点击这个按钮后modal会被关闭
onClick 函数   可选. 用户点击这个按钮后，回调函数会被执行

这样的配置选项允许我们创建灵活的modals。让我们来看一些例子：

  1. <body>
  2.   ...
  3.   <div class="page-content">
  4.     <div class="content-block">
  5.       <p><a href="#" class="open-3-modal">Modal With 3 Buttons</a></p>
  6.       <p><a href="#" class="open-slider-modal">Modal With Slider</a></p>
  7.       <p><a href="#" class="open-tabs-modal">Modal With Tabs</a></p>
  8.       <p><a href="#" class="open-vertical-modal">Modal With Vertical Buttons</a></p>
  9.     </div>
  10.   </div>
  11.   ...
  12. </body>
复制
  1. $$('.open-3-modal').on('click', function () {
  2.   myApp.modal({
  3.     title:  'Modal with 3 buttons',
  4.     text: 'Vivamus feugiat diam velit. Maecenas aliquet egestas lacus, eget pretium massa mattis non. Donec volutpat euismod nisl in posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae',
  5.     buttons: [
  6.       {
  7.         text: 'B1',
  8.         onClick: function() {
  9.           myApp.alert('You clicked first button!')
  10.         }
  11.       },
  12.       {
  13.         text: 'B2',
  14.         onClick: function() {
  15.           myApp.alert('You clicked second button!')
  16.         }
  17.       },
  18.       {
  19.         text: 'B3',
  20.         bold: true,
  21.         onClick: function() {
  22.           myApp.alert('You clicked third button!')
  23.         }
  24.       },
  25.     ]
  26.   })
  27. });
  28. $$('.open-slider-modal').on('click', function () {
  29.   var modal = myApp.modal({
  30.     title: 'Awesome Photos?',
  31.     text: 'What do you think about my photos?',
  32.     afterText:  '<div class="swiper-container" style="width: auto; margin:5px -15px -15px">'+
  33.                   '<div class="swiper-pagination"></div>'+
  34.                   '<div class="swiper-wrapper">'+
  35.                     '<div class="swiper-slide"><img src="..." height="150" style="display:block"></div>' +
  36.                     '<div class="swiper-slide"><img src="..." height="150" style="display:block"></div>'+
  37.                   '</div>'+
  38.                 '</div>',
  39.     buttons: [
  40.       {
  41.         text: 'Bad :('
  42.       },
  43.       {
  44.         text: 'Awesome!',
  45.         bold: true,
  46.         onClick: function () {
  47.           myApp.alert('Thanks! I know you like it!')
  48.         }
  49.       },
  50.     ]
  51.   })
  52.   myApp.swiper($$(modal).find('.swiper-container'), {pagination: '.swiper-pagination'});
  53. });
  54.  
  55. $$('.open-tabs-modal').on('click', function () {
  56.   myApp.modal({
  57.     title:  '<div class="buttons-row">'+
  58.               '<a href="#tab1" class="button active tab-link">Tab 1</a>'+
  59.               '<a href="#tab2" class="button tab-link">Tab 2</a>'+
  60.             '</div>',
  61.     text: '<div class="tabs">'+
  62.             '<div class="tab active" id="tab1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis nunc non dolor euismod feugiat. Sed at sapien nisl. Ut et tincidunt metus. Suspendisse nec risus vel sapien placerat tincidunt. Nunc pulvinar urna tortor.</div>'+
  63.             '<div class="tab" id="tab2">Vivamus feugiat diam velit. Maecenas aliquet egestas lacus, eget pretium massa mattis non. Donec volutpat euismod nisl in posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</div>'+
  64.           '</div>',
  65.     buttons: [
  66.       {
  67.         text: 'Ok, got it',
  68.         bold: true
  69.       },
  70.     ]
  71.   })
  72. });
  73.  
  74. $$('.open-vertical-modal').on('click', function () {
  75.   myApp.modal({
  76.     title:  'Vertical Buttons Layout',
  77.     text: 'Vivamus feugiat diam velit. Maecenas aliquet egestas lacus, eget pretium massa mattis non. Donec volutpat euismod nisl in posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae',
  78.     verticalButtons: true,
  79.     buttons: [
  80.       {
  81.         text: 'Button 1',
  82.         onClick: function() {
  83.           myApp.alert('You clicked first button!')
  84.         }
  85.       },
  86.       {
  87.         text: 'Button 2',
  88.         onClick: function() {
  89.           myApp.alert('You clicked second button!')
  90.         }
  91.       },
  92.       {
  93.         text: 'Button 3',
  94.         onClick: function() {
  95.           myApp.alert('You clicked third button!')
  96.         }
  97.       },
  98.     ]
  99.   })
  100. });
复制

实例预览

用 JavaScript 关闭 Modals

任何 Modal 可以用 JavaScript 来关闭，不仅仅是通过点击按钮。因此我们需要看看相关App方法：

myApp.closeModal(modal) - 关闭任意 modal

  • modal - HTMLElement or string ( CSS 选择器). 可选. 除了指定的，任何被打开modal都将被关闭。

Modal 事件

当你在 Modal 打开/关闭时，需要用JavaScript做一些操作时，Modal 事件非常有用

Event（事件） Target（目标） Description（描述）
open Modal Element<div class="modal"> 当 Modal 开始打开动画时，事件将被触发。
opened Modal Element<div class="modal"> 当 Modal 完成打开动画时，事件将被触发。
close Modal Element<div class="modal"> 当 Modal 开始结束动画时，事件将被触发。
closed Modal Element<div class="modal"> 当 Modal 完成结束动画后，事件将被触发。

Modal 模板

如果你希望能自定义 modal 模板，你可在 初始化APP 的时候传入一个 modalTemplate 参数。这个参数的值是一个 Template7 模板，当编译该模板的时候会传入一个 groups 参数。

这个模板可能是这样的：

  1. <div class="modal {{#unless buttons}}modal-no-buttons{{/unless}}">
  2.   <div class="modal-inner">
  3.     {{#if title}}
  4.       <div class="modal-title">{{title}}</div>
  5.     {{/if}}
  6.     {{#if text}}
  7.        <div class="modal-text">{{text}}</div>
  8.     {{/if}}
  9.     {{#if afterText}}
  10.       {{afterText}}
  11.     {{/if}}
  12.   </div>
  13.   {{#if buttons}}
  14.     <div class="modal-buttons">
  15.       {{#each buttons}}
  16.         <span class="modal-button {{#if bold}}modal-button-bold{{/if}}">{{text}}</span>
  17.       {{/each}}
  18.     </div>
  19.   {{/if}}
  20. </div>
复制
 
1
顶
1
踩
分享到：
| 移动端安卓和IOS开发框架Framework7教程- ...
评论
发表评论

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

相关推荐

    vue-framework7-master.zip

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

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

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

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

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

    Weex AppFramework架构设计和独立App构建实战 宁栗.pdf

    12. **页面导航**: Weex使用URL Router实现页面间的跳转，通过组件如wxc-navbar、wxc-navpage、wxc-tabbar和wxc-tabitem来构建导航栏和底部Tab。 13. **多实例管理**: Weex的JS Framework可以管理多个实例...

    Gurra：QML ui框架

    Gurra是一个基于QML的UI框架，专为开发跨平台的移动应用程序设计，支持Android和iOS操作系统。QML（Qt Meta Language）是Qt库的一部分，它允许开发者以声明式的方式来构建用户界面，使得UI设计变得更为直观和高效。...

    左右滑动菜单

    左右滑动菜单是一种常见的用户界面设计元素，常用于移动应用和网页设计中，为用户提供便捷的导航选项。这种设计模式允许用户通过在屏幕左侧或右侧滑动来展示隐藏的菜单栏，增强了用户体验，使得操作更加直观和流畅。...

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