目录

前端UI方法

前端UI方法是指通过JS和CSS实现的简单界面交互的方法（API）

模态对话框

内部字段：

• 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为字符串格式。

UM.alert()

警告框

使用方法：

UM.alert(option)；

示例代码：

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

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

UM.confirm()

确认对话框

使用方法：
UM.confirm(option);

示例代码：

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

UM.prompt()

输入对话框
使用方法：

UM.prompt(option);

示例代码：

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

UM.login()

登录框

使用方法：

UM.login(option);

示例代码：

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

UM.toast()

提示框

使用方法：

UM.toast(option);

示例代码：

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

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

UM.showLoadingBar()

显示loadingBar

使用方法：

UM.showLoadingBar(option);

示例代码：

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

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

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

UM.hideLoadingBar()

隐藏loadingBar

使用方法：

UM.hideLoadingBar();

示例代码：

UM.hideLoadingBar();

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

单页应用页面切换

常用于单页应用页面切换动画

UM.page

*注意：该切换动画只针对同一个html的多个um-page间的跳转
可通过A标签上href=”#pageid”在各个um-page间相互跳转，a标签的href必须以#开头 每个um-page必须有id
在需要动画的地方添加如data-transition=”pop”

<a href="#item2" data-transition="pop">pop</a>

一、最简单的步骤如下

1. 插入一个id为page1的页面
   

2. 在第一个页面插入一个a便签，其href指向page1，如下
   

3. 以上简单的2步就实现了页面的跳转。

• 可以通过如下js设置默认默认动画

  UM.page.defaults.transition = "push_left";

• 反向动画
  导航栏的返回按钮.um-back类默认动画为反向,或者添加data-reverse=”true”即可,如下

  <a href="#item2" data-reverse="true">pop</a>

• js代码控制页面跳转
  使用UM.page类，该类对外接口有changePage,back方法 如：

  var settings =  {
    target: "#page1",
    isReverse: 0,
    transition: "um"
  }
  UM.page.changePage(settings);

target为下一个页面的id(带#),为必填项，必须为带.um-page类的单页面，其他设置均为可选值；
isReverse设置页面切换动画是否逆向进行，1表示是，0表示否；
transition设置动画效果，使用上面几种效果的一个即可，默认为“um”;
当要返回上一个页面时，可以调用UM.page.back();
以上js代码要在页面初始化完成后调用。

二、多个HTML的切换动画
以上均是针对一个html里面的单页面的跳转，多个html页面的切换动画可以使用如下3种方式实现切换

$view.changePage("xxx.html");//参数是相对路径

$view.changePage("xxx.html", {
     "isKeep" : "true",//打开新页面时，是否保留当前页面不关闭
     "animation-type" : "Fade",//动画类型, Fade|Push|suckEffect|oglFlip|MoveIn
     "animation-direction" : "left",//动画执行方向，例如left为从右向左...取值范围[left | right | top | bottom]
});

$view.changePage("xxx.html", {
     "isKeep" : "true",//保留当前页面不关闭
     "callback":"mycallback()"//回调的JS方法
});

在服务器环境可以在a标签上添加data-url=页面地址可以在多个页面进行切换， 对于ajax请求的html页面，可以在不刷新页面切换到新页面 (目前只对a便签有效，且新页面最外层元素为<div class="um-page"></div>)需要在a标签中使用data-url=”url”,如 <a href="#" data-url="pop.html">pop</a>其中pop.html内容必须为<div class="um-page"></div>类型的单页面，其中的样式和js等元素都必须在该um-page容器中才能被加载