Framework7 修改模态框默认文字(标题、确认|取消按钮、登录框提示)
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);
});
相关文章
- 这篇文章主要为大家详细介绍了原生JS实现登录框邮箱提示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-18
Framework7 修改模态框默认文字(标题、确认|取消按钮、登录框提示)
下面我们来看一篇关于Framework7 修改模态框默认文字(标题、确认|取消按钮、登录框提示) 的例子,希望这篇文章能够帮助到大家的哦。 Framework7 提供了许多常用的模...2016-10-02Windows Server 2012 R2或2016无法安装.NET Framework 3.5.1的解决方法
这篇文章主要为大家详细介绍了Windows Server 2012 R2或2016无法安装.NET Framework 3.5.1,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-07-06Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
这篇文章主要介绍了Zend Framework动作助手(Zend_Controller_Action_Helper)用法,详细分析了动作助手Zend_Controller_Action_Helper功能,定义,使用方法与相关实现代码,需要的朋友可以参考下...2016-03-10- Bootstrap每天必学之模态框(Modal)插件,模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等,感兴趣的小伙伴们可以参考一下...2016-04-27
- 这篇文章主要介绍了C#修改IIS站点framework版本号的方法,涉及C#调用使用ASP.NET IIS注册工具Aspnet_regiis.exe进行IIS站点framework版本号修改的方法,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
Zend Framework动作助手Redirector用法实例详解
这篇文章主要介绍了Zend Framework动作助手Redirector用法,结合实例形式详细分析了转向器Redirector的功能,使用方法与相关注意事项,需要的朋友可以参考下...2016-03-10- 这篇文章主要介绍了如何使用vue slot创建一个模态框,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下...2020-05-25
- 这篇文章主要为大家详细介绍了JavaScript实现可拖动模态框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-11
无法启动.NET Framework NGEN v4.0.30319_X86服务的解决方法
这篇文章主要介绍了无法启动.NET Framework NGEN v4.0.30319_X86服务,需要的朋友可以参考下...2016-01-27在Framework 4.0中:找出新增的方法与新增的类(一)
经常看到有同学在讨论Framework 4 的新特性,新方法,于是想写个程序找出framework4.0中新增的方法和类...2020-06-25- 这篇文章主要介绍了Zend Framework动作助手Json用法,结合实例形式分析了Zend Framework动作助手Json的功能与相关使用技巧,需要的朋友可以参考下...2016-03-10
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
这篇文章主要介绍了Zend Framework教程之请求对象的封装Zend_Controller_Request用法,结合实例形式详细分析了请求对象封装的原理,使用方法与相关注意事项,需要的朋友可以参考下...2016-03-10Zend Framework教程之配置文件application.ini解析
这篇文章主要介绍了Zend Framework教程之配置文件application.ini用法,分析了配置文件application.ini中常见的配置项含义及用法,需要的朋友可以参考下...2016-03-12- 这篇文章主要为大家详细介绍了基于Entity Framework自定义分页效果,增删改的通用实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
Zend Framework教程之模型Model基本规则和使用方法
这篇文章主要介绍了Zend Framework教程之模型Model基本规则和使用方法,结合实例形式详细分析了Zend Framework中模型的原理与具体使用技巧,需要的朋友可以参考下...2016-03-07- 这篇文章主要介绍了YII Framework框架教程之国际化实现方法,较为详细的分析了YII Framework框架国际化的原理与相关实现技巧,需要的朋友可以参考下...2016-03-17
- 这篇文章主要介绍了Zend Framework数据库操作方法,结合实例形式总结分析了Zend Framework数据库操作相关函数使用技巧与注意事项,需要的朋友可以参考下...2017-01-08
Zend Framework入门教程之Zend_Session会话操作详解
这篇文章主要介绍了Zend Framework入门教程之Zend_Session会话操作,结合实例形式详细分析了Zend_Session会话操作的具体使用技巧,需要的朋友可以参考下...2017-01-08Zend Framework教程之模型Model用法简单实例
这篇文章主要介绍了Zend Framework教程之模型Model用法,结合实例形式简单分析了Zend Framework中模型Model的原理,文件组织结构及具体使用方法,需要的朋友可以参考下...2016-03-07