首页 > 移动平台 > 详细

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

时间:2016-06-03 02:12:12      阅读:306      评论:0      收藏:0      [点我收藏+]

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>
复制
?

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

原文:http://zaixianshouce.iteye.com/blog/2302314

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!