Loading加载指示器 - SUI 移动开发UI库

返回介绍

Loading加载指示器

发布于 2017-06-12 字数2480 浏览 1250 评论 0

预加载 Modal 用来提示一些后台活动(像Ajax请求)和阻止在这个活动期间的任何用户操作。 打开预加载 modal 我们也需要调用适当的App方法: $.show预加载([title])- 显示 预加载 modal

Loading加载指示器

  • title - string. Optional. 预加载 modal 标题. 默认(没有指定)的时候,它等同于 “Loading…”. 你可以在App初始化时通过 modal预加载Title 参数改变默认的 预加载 标题。

该方法返回动态创建的modal的HTML元素。

$.hide预加载() – 隐藏/关闭 预加载 modal. 因为 预加载 modal 没有任何按钮, 它应该用 JavaScript 来关闭

<header class="bar bar-nav">
<h1 class="title">预加载 Modal (Preloader Modal)</h1>
</header>
...
<div class="content">
<div class="content-block">
  <p><a href="#" class="open-preloader">Open Preloader</a></p>
  <p><a href="#" class="open-preloader-title">Open Preloader with custom title</a></p>
</div>
</div>
...
$(document).on('click', '.open-preloader', function () {
$.showPreloader();
setTimeout(function () {
    $.hidePreloader();
}, 2000);
});
$(document).on('click','.open-preloader-title', function () {
$.showPreloader('Custom Title')
setTimeout(function () {
    $.hidePreloader();
}, 2000);
});

迷你指示器

如果你不需要用像预加载Modal这样如此大的modal 窗口去指示活动, 你可以使用简单并且小的指示器modal:

  • $.showIndicator() – 显示指示器 modal
  • $.hideIndicator() – 隐藏/关闭指示器 modal. 因为指示器modal没有任何按钮, 它需要用JavaScript来关闭
<header class="bar bar-nav">
  <h1 class="title">指示器(indicator)</h1>
</header>
...
<div class="content">
<div class="content-block">
  <p><a href="#" class="open-indicator">Open Indicator</a></p>
</div>
</div>
...
$(document).on('click','.open-indicator', function () {
  $.showIndicator();
  setTimeout(function () {
      $.hideIndicator();
  }, 2000);
});

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!