dev_modal

模态框的介绍及使用方法

介绍

模态框封装到ui.js框架中，它们是UM对象的方法，包括alert(警告框)，confirm(确认对话框)，prompt(输入对话框)，login(登录框)，toast（提示框）,showLoadingBar(加载提示)，hideLoadingBar(隐藏提示);其API形式为UM.xxx(option),具体如下：

• UM.alert(option);
• UM.confirm(option);
• UM.prompt(option);
• UM.login(option);
• UM.toast(option);
• UM.showLoadingBar(option);
• UM.hideLoadingBar(option);

param

option

框架中option默认为一个json对象其值设置为：

   {
      title: window.location.host || "",
      text: "",
      btnText: ["取消", "确定"],
      overlay: true,
      duration：2000，
      cancle: function() {},
      ok: function(data) {}
   }

• title: string 摸态框的标题；
• text: string 摸态框的内；
• btnText: array 按钮名称，成对出现；
• overlay: bealoon 是否显示遮罩层，true 为显示；false 不显示，默认为true；
• duration: number 提示框持续的时间，默认为2000（ms）；
• cancle: function 点击取消按钮执行的回调函数；
• ok: function 点击确定按钮执行的回调函数；

option为必填值，可以为字符串，也可以是个json对象。当为字符串的时候，默认字符串为摸态框的title属性值；为json对象的时候，需要根据不同的摸态框传如不同的值。 在使用中不介绍option为字符串格式。

使用方法：

1.警告框

使用方法：

UM.alert(option)；

示例代码：

  UM.alert({
       title: '您点击了警示框按钮',
       btnText: ["取消", "确定"],
       overlay: true,
       ok: function () {
         $this.parent().next().children('.form-control').val('已点击');
       }
   });

title与text均可为警示内容，两者最少出现一个值。

2.确认对话框：

使用方法：

UM.confirm(option);

示例代码：

 UM.confirm({
          title: '友情提示：',
          text: '您确定要更改按钮颜色吗？',
          btnText: ["cancle", "ok"],
          overlay: true,
          ok: function () {
              $this.css('backgroundColor', 'red');
          },
          cancle: function () {
              $this.css('backgroundColor', '#007aff');
          }
 });

3.输入对话框：

使用方法：

UM.prompt(option);

示例代码：

 UM.prompt({
           title: '请输入信息',
           btnText: ["取消", "确定"],
           overlay: true,
           ok: function (data) {
           alert(data);
           },
           cancle: function (data) {
              alert(data);
           }
 })

4.登录框：

使用方法：

UM.login(option);

示例代码：

   UM.login({
            title: '请输入登录信息',
            btnText: ["取消", "确定"],
            overlay: true,
            ok: function (data) {
                    alert(data);
            },
            cancle: function (data) {
                $this.parent().next().children('.form-control').val('未登录');
            }
   });

5.提示框：

使用方法：

UM.toast(option);

示例代码：

   UM.toast({
          title: '友情提示：',
          text: '3秒后消失',
          duration: 3000
   });

提示框的参数比较特殊，需要传入持续时间参数duration，不传值默认为2秒。

6.显示loadingBar：

使用方法：

UM.showLoadingBar(option);

示例代码：

   UM.showLoadingBar({
         text: "加载中",
         icons: 'ti-loading',
   })

显示loadingBar示传入的参数有两个：

• text 提示内容，默认值“正在加载”；
• icons 提示图标，设置不同的图标，可定制统一加载样式，默认值“ti-reload”；

7.隐藏loadingBar：

使用方法：

UM.showLoadingBar();

示例代码：

   UM.hideLoadingBar();

隐藏loadingBar不需要传递参数，当代码执行到特定位置时，使用该方法可隐藏loadingBar。

摸态框用例demo的github 地址。