LuLu UI中文文档和演示

一、HTML静态loading呈现

跟随文本(大 - span标签)：
```
<span class="ui-loading-icon"></span>
```
跟随文本(小 - s标签)：
```
<s class="ui-loading-icon"></s>
```

大尺寸loading(span标签)

<div class="ui-loading" style="height:100px;"><span class="ui-loading-icon"></span></div>

小尺寸loading(s标签)

<div class="ui-loading" style="height:100px;"><s class="ui-loading-icon"></s></div>

蓝底大尺寸loading(span标签)

<div class="ui-loading ui-loading-primary" style="height:100px;"><span class="ui-loading-icon"></span></div>

蓝底小尺寸loading(s标签)

<div class="ui-loading ui-loading-primary" style="height:100px;"><s class="ui-loading-icon"></s></div>

二、JS动态呈现

容器的loading效果

语法如下：

new Loading(el, options);

也可以使用jQuery包装器方法（推荐）：

$().loading(options);

其中options为可选参数，包括：

{
    // 是否是蓝色背景
    primary: false,
    // 是否是小尺寸旋转图标
    small: false,
    // 是否重新生成旋转图标元素（会append在当前容器中）
    create: false
}

实例对象暴露的元素和方法包括：

{
    el: {
        container: container,
        loading: loading,
        icon: icon
    },
    display: true/false,
    // 显示
    show: function() {},
    // 隐藏
    hide: function() {},
    // 移除
    remove: function() {},
    // 结束后的容器slide&fadeIn效果
    end: function(time) {}
}

end()方法支持一个参数time，表示slide动画的时间，高度slide是使用CSS3 transition触发的，因此，动画仅IE10+可以看到，IE9-浏览器是直来直往的效果。参数不同类型值作用不一样，具体参见下表：

值	释义
缺省	也就是参数为`undefined`时候，使用默认值`200`作为一次`transition`过渡时间，单位是`ms`毫秒。
0	如果`time`设置为0，则认为是不使用`transition`或者动画，效果和IE9等低版本IE浏览器一致，直来直往。
false	如果`time`参数为`false`，则认为按照默认的`200ms`进行`transition`，但是不添加类名`ui-loading-animation`，也就是只有CSS3 `transition`过渡效果，没有CSS3 animation效果（如果有设置）。
其他正常数值	例如`300`，则认为过渡的时间的`300ms`

如果time参数缺省，也就是为undefined，则按照默认的200处理(单位ms毫秒)；如果是数值，则

下面是hide(), remove(), show(), end()方法测试：

hide() remove() show() end()

// loading测试
var myloading = new Loading($('#loadingTest'));
$('#loadingBtn a').click(function () {
    var method = this.innerHTML.replace('()', '');
    if (method == 'end') {
        myloading.el.container.html('<img src="xxx.jpg" height="' + (100 + 300 * Math.random()) + '">');
    }
    myloading[method]();
});

上面实例对象的end方法实际上代码内部是调用的包装器的unloading()方法，换句话说，如果我们没有使用new来构造我们的loading效果，同时又想实现高度过渡效果，则可以试试：

$(container).unloading(time);

这里unloading方法中的参数time和上面的实例对象的end方法是一致的，作用也是几乎一致。

按钮的loading效果触发

给本组件体系的UI按钮使用loading()方法，可以产生加载效果。
```
$(button).loading()
```
unloading()方法则让按钮继续回复正常态。
```
$(button).unloading()
```
在最新的peak主题下，只要是<a>，<label>，<input>，<button>元素，调用loading()方法，都会给自身添加类名.loading
判断是否是loading态
```
$().isLoading()
```
可以是按钮元素，也可以是里面有加载图标的普通容器元素。在Ajax防止多次点击时候有用。

三、单独使用loading

loading效果支持以插件形式单独使用，引入下面CSS即可：

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Loading.css">
<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/animate.css">

如果想要单独使用$().loading()等方法和动效，可以引入JS（jquery地址略）：

<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Loading.js"></script>

单独使用Demo演示

LuLu UI组件中文文档 » loading加载

loading加载

一、HTML静态loading呈现

二、JS动态呈现

容器的loading效果

按钮的loading效果触发

判断是否是loading态

三、单独使用loading