Modal 是从App的主要内容区域上弹出的一小块内容块. Modals经常被用来向用户询问信息,或通知或警告用户。 Modal和其他所有的遮罩图层一样,是所谓的“临时视图”的一部分。
Modals 可以只用JavaScript打开。所以让我们来看看使用modals的相关APP方法
预定义的 Modals
首先,让我们看看已经预定义的最常用的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元素。
- <body>
- ??...
-
??<div?class="page-content">
-
????<div?class="content-block">
-
??????<p><a?href="#"?class="alert-text">Alert?With?Text</a></p>
-
??????<p><a?href="#"?class="alert-text-title">Alert?With?Text?and?Title</a></p>
-
??????<p><a?href="#"?class="alert-text-title-callback">Alert?With?Text?and?Title?and?Callback</a></p>
-
??????<p><a?href="#"?class="alert-text-callback">Alert?With?Text?and?Callback</a></p>
-
????</div>
-
??</div>
- ??...
- </body>
复制
-
var?myApp?=?new?Framework7();
- ?
-
var?$$?=?Dom7;
- ?
-
$$(‘.alert-text‘).on(‘click‘,?function?()?{
-
????myApp.alert(‘Here?goes?alert?text‘);
- });
- ?
-
$$(‘.alert-text-title‘).on(‘click‘,?function?()?{
-
????myApp.alert(‘Here?goes?alert?text‘,?‘Custom?Title!‘);
- });
- ?
-
$$(‘.alert-text-title-callback‘).on(‘click‘,?function?()?{
-
????myApp.alert(‘Here?goes?alert?text‘,?‘Custom?Title!‘,?function?()?{
-
????????myApp.alert(‘Button?clicked!‘)
-
????});
- });
- ?
-
$$(‘.alert-text-callback‘).on(‘click‘,?function?()?{
-
????myApp.alert(‘Here?goes?alert?text‘,?function?()?{
-
????????myApp.alert(‘Button?clicked!‘)
-
????});
- });
复制
实例预览
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元素。
- <body>
- ??...
-
??<div?class="page-content">
-
????<div?class="content-block">
-
??????<p><a?href="#"?class="confirm-ok">Confirm?with?text?and?Ok?callback</a></p>
-
??????<p><a?href="#"?class="confirm-ok-cancel">Confirm?with?text,?Ok?and?Cancel?callbacks</a></p>
-
??????<p><a?href="#"?class="confirm-title-ok">Confirm?with?text,?title?and?Ok?callback</a></p>
-
??????<p><a?href="#"?class="confirm-title-ok-cancel">Confirm?with?text,?title,?Ok?and?Cancel?callback</a></p>
-
????</div>
-
??</div>
- ??...
- </body>
复制
-
$$(‘.confirm-ok‘).on(‘click‘,?function?()?{
-
????myApp.confirm(‘Are?you?sure?‘,?function?()?{
-
????????myApp.alert(‘You?clicked?Ok?button‘);
-
????});
- });
- ?
-
$$(‘.confirm-ok-cancel‘).on(‘click‘,?function?()?{
-
????myApp.confirm(‘Are?you?sure?‘,?
-
??????function?()?{
-
????????myApp.alert(‘You?clicked?Ok?button‘);
-
??????},
-
??????function?()?{
-
????????myApp.alert(‘You?clicked?Cancel?button‘);
-
??????}
-
????);
- });
-
$$(‘.confirm-title-ok‘).on(‘click‘,?function?()?{
-
????myApp.confirm(‘Are?you?sure?‘,?‘Custom?Title‘,?function?()?{
-
????????myApp.alert(‘You?clicked?Ok?button‘);
-
????});
- });
-
$$(‘.confirm-title-ok-cancel‘).on(‘click‘,?function?()?{
-
????myApp.confirm(‘Are?you?sure?‘,?‘Custom?Title‘,?
-
??????function?()?{
-
????????myApp.alert(‘You?clicked?Ok?button‘);
-
??????},
-
??????function?()?{
-
????????myApp.alert(‘You?clicked?Cancel?button‘);
-
??????}
-
????);
- });
复制
实例预览
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元素。
- <body>
- ??...
-
??<div?class="page-content">
-
????<div?class="content-block">
-
??????<p><a?href="#"?class="prompt-ok">Prompt?with?text?and?Ok?callback</a></p>
-
??????<p><a?href="#"?class="prompt-ok-cancel">Prompt?with?text,?Ok?and?Cancel?callbacks</a></p>
-
??????<p><a?href="#"?class="prompt-title-ok">Prompt?with?text,?title?and?Ok?callback</a></p>
-
??????<p><a?href="#"?class="prompt-title-ok-cancel">Prompt?with?text,?title,?Ok?and?Cancel?callback</a></p>
-
????</div>
-
??</div>
- ??...
- </body>
复制
-
?????????$$(‘.prompt-ok‘).on(‘click‘,?function?()?{
-
????myApp.prompt(‘What?is?your?name?‘,?function?(value)?{
-
????????myApp.alert(‘Your?name?is?"‘?+?value?+?‘".?You?clicked?Ok?button‘);
-
????});
- });
- ?
-
$$(‘.prompt-ok-cancel‘).on(‘click‘,?function?()?{
-
????myApp.prompt(‘What?is?your?name?‘,?
-
??????function?(value)?{
-
????????myApp.alert(‘Your?name?is?"‘?+?value?+?‘".?You?clicked?Ok?button‘);
-
??????},
-
??????function?(value)?{
-
????????myApp.alert(‘Your?name?is?"‘?+?value?+?‘".?You?clicked?Cancel?button‘);
-
??????}
-
????);
- });
-
$$(‘.prompt-title-ok‘).on(‘click‘,?function?()?{
-
????myApp.prompt(‘What?is?your?name?‘,?‘Custom?Title‘,?function?(value)?{
-
????????myApp.alert(‘Your?name?is?"‘?+?value?+?‘".?You?clicked?Ok?button‘);
-
????});
- });
-
$$(‘.prompt-title-ok-cancel‘).on(‘click‘,?function?()?{
-
????myApp.prompt(‘What?is?your?name?‘,?‘Custom?Title‘,?
-
??????function?(value)?{
-
????????myApp.alert(‘Your?name?is?"‘?+?value?+?‘".?You?clicked?Ok?button‘);
-
??????},
-
??????function?(value)?{
-
????????myApp.alert(‘Your?name?is?"‘?+?value?+?‘".?You?clicked?Cancel?button‘);
-
??????}
-
????);
- });
复制
实例预览
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. 当用户点击“取消”按钮时,回调函数将被执行。回调函数的参数是用户输入的密码
-
<div?class="page-content">
-
??<div?class="content-block">
-
????<p><a?href="#"?class="login-modal">Login?Modal</a></p>
-
????<p><a?href="#"?class="password-modal">Password?Modal</a></p>
-
??</div>
- </div>
复制
-
var?myApp?=?new?Framework7();
- ?
-
var?$$?=?Dom7;
- ?
-
$$(‘.login-modal‘).on(‘click‘,?function?()?{
-
????myApp.modalLogin(‘Authentication?required‘,?function?(username,?password)?{
-
????????myApp.alert(‘Thank?you!?Username:?‘?+?username?+?‘,?Password:?‘?+?password);
-
????});
- });
- ?
-
$$(‘.password-modal‘).on(‘click‘,?function?()?{
-
????myApp.modalPassword(‘You?password?please:‘,?function?(password)?{
-
????????myApp.alert(‘Thank?you!?Your?password?is:?‘?+?password);
-
????});
- });
复制
实例预览
嵌套Modals
当然,您可能已经注意到,你在任何其他modal回调函数中“嵌套“这个modals
- <body>
- ??...
-
??<div?class="page-content">
-
????<div?class="content-block">
-
??????<p><a?href="#"?class="name">What?is?your?name?</a></p>
-
????</div>
-
??</div>
- ??...
- </body>
复制
-
$$(‘.name‘).on(‘click‘,?function?()?{
-
????myApp.prompt(‘What?is?your?name?‘,?function?(value)?{
-
????????myApp.confirm(‘Are?you?sure?that?your?name?is?‘?+?value?+?‘?‘,?function?()?{
-
????????????myApp.alert(‘Ok,?your?name?is?"‘?+?value?+?‘"!‘);
-
????????});
-
????});
- });
复制
实例预览
预加载 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 来关闭
- <body>
- ??...
-
??<div?class="page-content">
-
????<div?class="content-block">
-
??????<p><a?href="#"?class="open-preloader">Open?Preloader</a></p>
-
??????<p><a?href="#"?class="open-preloader-title">Open?Preloader?with?custom?title</a></p>
-
????</div>
-
??</div>
- ??...
- </body>
复制
-
$$(‘.open-preloader‘).on(‘click‘,?function?()?{
-
????myApp.showPreloader();
-
????setTimeout(function?()?{
-
????????myApp.hidePreloader();
-
????},?2000);
- });
-
$$(‘.open-preloader-title‘).on(‘click‘,?function?()?{
-
????myApp.showPreloader(‘Custom?Title‘)
-
????setTimeout(function?()?{
-
????????myApp.hidePreloader();
-
????},?2000);
- });
复制
实例预览
指示器(indicator)
如果你不需要用像预加载Modal这样如此大的modal 窗口去指示活动, 你可以使用简单并且小的指示器modal:
myApp.showIndicator() - 显示指示器 modal
myApp.hideIndicator() - 隐藏/关闭指示器 modal. 因为指示器modal没有任何按钮, 它需要用JavaScript来关闭
- <body>
- ??...
-
??<div?class="page-content">
-
????<div?class="content-block">
-
??????<p><a?href="#"?class="open-indicator">Open?Indicator</a></p>
-
????</div>
-
??</div>
- ??...
- </body>
复制
-
$$(‘.open-indicator‘).on(‘click‘,?function?()?{
-
????myApp.showIndicator();
-
????setTimeout(function?()?{
-
????????myApp.hideIndicator();
-
????},?2000);
- });
复制
实例预览
移动端安卓和IOS开发框架Framework7教程-动态导航栏
原文:http://zaixianshouce.iteye.com/blog/2302314