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

loading加载

一、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动态呈现

  1. 容器的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方法是一致的,作用也是几乎一致。

  2. 按钮的loading效果触发

    给本组件体系的UI按钮使用loading()方法,可以产生加载效果。

    $(button).loading()

    unloading()方法则让按钮继续回复正常态。

    $(button).unloading()

    在最新的peak主题下,只要是<a><label><input><button>元素,调用loading()方法,都会给自身添加类名.loading

  3. 判断是否是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演示

Fork Me 返回顶部