Framework7 提供了许多常用的模态框(Modal)如:告警框(Alert)、确认框(Confirm)、需要用户输入的提示框(Prompt)等等。默认情况下,这些弹出框的标题是“Framework7”,而确认按钮、取消按钮、登录框的提示文字等都是英文的。
比如:我在页面上弹出一个确认框。
myApp.confirm('是否开始查询?', function () {
//开始查询
});
默认效果图如下:
1,修改默认文字
在 Framework7 初始化的时候传入相关的配置对象即可。
// 初始化 app
var myApp = new Framework7({
modalTitle: "hangge.com提示",
modalButtonOk: "确定",
modalButtonCancel: "取消",
modalPreloaderTitle: "加载中...",
modalUsernamePlaceholder: "用户名",
modalPasswordPlaceholder: "密码"
});
2,参数说明
(1)modalTitle:模态框默认标题(默认值:Framework7)
(2)modalButtonOk:确认按钮文字(默认值:OK)
(3)modalButtonCancel:取消按钮文字(默认值:Cancel)
(4)modalPreloaderTitle:预加载模态框文字(默认值:Loading...)
(5)modalUsernamePlaceholder:登录模态框里用户名占位提示文字(默认值:Username)
(6)modalPasswordPlaceholder:登录模态框里密码占位提示文字(默认值:Password)
3,修改后效果图
下面我们来看一篇关于Framework7 加载指示符(Preloader)使用说明,希望这篇文章能够帮助到各位理解到Framework7 加载指示符哦。
Framework 7 提供了一个好用的加载指示符(Preloader),一个不断旋转的菊花状环形进度条。当我们页面需要加载数据,或者执行比较费时的操作时可以使用。
而且这个加载指示符是使用 SVG 绘制,并使用 CSS 来进行动画,所以可以很方便的改变它的大小。
1,加载指示符的使用
<span class="preloader"></span>
2,修改加载指示符的大小和颜色
(1)加载指示符有2个颜色供选择:其中一个颜色是配合亮色背景(默认样式),另一个颜色配合暗色背景。
(2)要改变大小,只要直接设置 width、height 样式属性即可。
<body>
...
<div class="page-content">
<div class="content-block row">
<!-- 默认样式的加载指示符 -->
<div class="col-25">
Default<br>
<span class="preloader"></span>
</div>
<!-- 白色的加载指示符(适用于深色背景) -->
<div class="col-25 col-dark">
White<br>
<span class="preloader preloader-white"></span>
</div>
<!-- 修改加载指示符尺寸(改成42px*42px) -->
<div class="col-25">
Big<br>
<span style="width:42px; height:42px" class="preloader"></span>
</div>
<!-- 修改尺寸以及颜色(适用于深色背景) -->
<div class="col-25 col-dark">
White<br>
<span style="width:42px; height:42px" class="preloader preloader-white"></span>
</div>
</div>
</div>
...
<style>
.col-25 {
padding:5px;
text-align:center;
}
.col-dark {
background:#222;
}
</style>
</body>
3,使用模态的方式显示加载指示符
上面的样例是直接将加载指示符放置在页面上。我们也可以通过 js 将其通过模态的方式自动显示在页面上。(既然是模态的,说明在加载指示符显示的时候我们是不可以进行任何操作的。)
比如我们可以在加载数据的时候将其弹出显示,告知用户当前正在加载。当加载完毕后自动将其关闭。
(1)样例效果图
点击链接后,在页面中央显示加载指示符。过个两秒,加载指示符自动消失。
原文:Framework7 - 加载指示符(Preloader)使用说明
(2)html页面代码
<body>
...
<div class="page-content">
<div class="content-block">
<p><a href="#" class="open-indicator">显示Indicator</a></p>
</div>
</div>
...
</body>
(3)js代码
$$('.open-indicator').on('click', function () {
myApp.showIndicator();
setTimeout(function () {
myApp.hideIndicator();
}, 2000);
});
4,Ajax请求时自动显示加载提示符
App 中如果有很多页面都有数据请求,要是每个请求都像上面一样都要手动添加代码显示、隐藏加载提示符。会略显麻烦。
我们可以在 Framework7 初始化的时候对 Ajax 请求进行拦截,进行统一处理。即发起请求时显示加载提示符,请求完毕后隐藏加载提示符。
// 初始化 app
var myApp = new Framework7({
// ajax请求开始
onAjaxStart: function (xhr) {
myApp.showIndicator();
},
// ajax请求完毕
onAjaxComplete: function (xhr) {
myApp.hideIndicator();
}
});
1,Framework7中三大类弹出框
(1)模态框(modal):默认点击外部区域不会关闭弹出框
模态框包括:告警框(Alert)、确认框(Confirm)、需要用户输入的提示框(Prompt)
(2)操作表(Action Sheet):默认点击外部区会自动关闭
(3)弹出层(Popup):默认点击外部区域会自动关闭
2,修改默认的关闭方式
如果想要点击模态框(modal)外部区域也会关闭模态框。或者不允许点击操作表(Action Sheet)、弹出层(Popup)外部区域时会自动关闭。
我们可以在 Framework7 初始化的时候可以进行如下修改。
// 初始化 app
var myApp = new Framework7({
modalCloseByOutside: true,
actionsCloseByOutside: false,
popupCloseByOutside: false
});
3,参数说明
(1)modalCloseByOutside:模态框(modal)是否允许通过点击外部关闭(默认值:false)
(2)actionsCloseByOutside:操作表(Action Sheet)是否允许通过点击外部关闭(默认值:true)
(3)popupCloseByOutside:弹出层(Popup)是否允许通过点击外部关闭(默认值:true)
1,预加载Modal介绍
(1)预加载Modal 可以看作是里面包含有加载指示符(Preloader),以及相关 title 的模态框。
(2)其作用一是用来提示一些后台活动(像 Ajax 请求)。二来阻止在这个活动期间的任何用户操作。
2,预加载Modal的使用(默认标题)
如果使用使不指定 title,则会显示默认标题。默认标题为“Loading”,可以在 App 初始化的时候修改设置。参考我之前的文章:Framework7 - 修改模态框默认文字(标题、确认|取消按钮、登录框提示)
$$('.open-preloader').on('click', function () {
myApp.showPreloader();
setTimeout(function () {
myApp.hidePreloader();
}, 2000);
});
3,预加载Modal的使用(自定义标题)
除了在 Framework7 初始化的时候统一修改标题文字外,我也可以在每次使用预加载Modal时单独设置标题。
$$('.open-preloader-title').on('click', function () {
myApp.showPreloader('正在上传照片...')
setTimeout(function () {
myApp.hidePreloader();
}, 2000);
});