您的位置：首页 > 编程技术 > android  >  Framework7 修改模态框默认文字（标题、确认|取消按钮、登录框提示）

Framework7 修改模态框默认文字（标题、确认|取消按钮、登录框提示）

 更新时间：2016年10月2日 16:23  点击：2635
下面我们来看一篇关于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();
          }
});

下面我们来看一篇关于 Framework7 设置是否允许点击弹出框外部区域，关闭弹出层的使用例子，具体的细节步骤如下文介绍。

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）

Preloader Modal就是一个提醒加载的功能，我们这里来看Framewrok7 预加载提示模态框(Preloader Modal)用法吧，具体细节如下所示。

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);
});

[!--infotagslink--]

相关文章