在任何元素上添加加载覆盖的 jQuery 插件 - 加载

在任何元素上添加加载覆盖的 jQuery 插件 - 加载

版本:

浏览量:1270

最后更新:2021-09-12

应用标签:MAC 软件gitJquery插件

推荐指数:

详细信息

Loading 是一个小型的 jQuery 插件,它允许您创建一个覆盖任何 Html 元素的动画叠加层,以指示加载状态。非常适合通过 Ajax 加载的内容预加载器或动态内容。

基本用法:

1. 在 jQuery javascript 库之后包含 jQuery loading.js。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/loading.js"></script>

2. 为加载叠加创建一个元素。

<div id="demo" class="loading-div">
  This div is always loading
</div>

3. 加载覆盖内容的 CSS 样式。

.loading-overlay-content {
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-size: 1.15em;
  font-weight: bold;
}

4. 加载覆盖的可定制样式。您可以轻松地在 CSS 中添加您自己的主题,如下所示。

.loading-overlay.loading-theme-dark {
  background-color: #000;
  color: #fff;
}
 
.loading-overlay.loading-theme-light {
  background-color: #fff;
  color: #000;
}
 
.loading-overlay.loading-theme-green {
  background-color: #2ecc71;
  color: #fff;
}

4. 设置加载叠加层的高度和宽度。

.loading-div {
  height: 180px;
  padding: 15px 25px;
  color: #eee;
}

5. 用一个JS调用初始化插件。

$('#loading-always').loading();

6.所有的选项和回调函数。

/**
 * jQuery element to be used as overlay
 * If not defined, a default overlay will be created
 */
overlay: undefined,
 
/**
 * z-index to be used by the default overlay
 * If not defined, a z-index will be calculated based on the
 * target's z-index
 * Has no effect if a custom overlay is defined
 */
zIndex: undefined,
 
/**
 * Message to be rendered on the overlay content
 * Has no effect if a custom overlay is defined
 */
message: "Loading...",
 
/**
 * Theme to be applied on the loading element
 *
 * Some default themes are implemented on `jquery.loading.css`, but you can
 *  define your own. Just add a `.loading-theme-my_awesome_theme` selector
 *  somewhere with your custom styles and change this option
 *  to 'my_awesome_theme'. The class is applied to the parent overlay div
 *
 * Has no effect if a custom overlay is defined
 */
theme: "light",
 
/**
 * Class(es) to be applied to the overlay element when the loading state is started
 */
shownClass: "loading-shown",
 
/**
 * Class(es) to be applied to the overlay element when the loading state is stopped
 */
hiddenClass: "loading-hidden",
 
/**
 * Set to true to stop the loading state if the overlay is clicked
 * This options does NOT override the onClick event
 */
stoppable: false,
 
/**
 * Set to false to not start the loading state when initialized
 */
start: true,
 
/**
 * Function to be executed when the loading state is started
 * Receives the loading object as parameter
 *
 * The function is attached to the `loading.start` event
 */
onStart: function(loading) {
  loading.overlay.fadeIn(150);
},
 
/**
 * Function to be executed when the loading state is stopped
 * Receives the loading object as parameter
 *
 * The function is attached to the `loading.stop` event
 */
onStop: function(loading) {
  loading.overlay.fadeOut(150);
},
 
/**
 * Function to be executed when the overlay is clicked
 * Receives the loading object as parameter
 *
 * The function is attached to the `loading.click` event
 */
onClick: function() {}

7. API 方法。

  • 调整大小:根据目标元素的状态重新计算并将新的尺寸和位置应用于叠加层。如果叠加层未显示在正确的位置和/或尺寸上,则调用此方法。 

  • start:开启某个元素的加载状态。 

  • stop:关闭某个元素的加载状态。

  • 切换:根据当前状态打开或关闭某个元素的加载状态。

  • 选项:在运行时更改某些元素的加载选项。

  • $.Loading.setDefaults:扩展加载插件默认选项。

  • :loading 选择器:获取正在加载的元素或检查某个元素是否正在加载。

变更日志:

v2.0.0 rc2 (2019-08-13)

  • 截至日期

2017-12-09

  • v1.3.0:使用新设置调用时销毁旧覆盖实例

2016-11-02

  • v1.2.0

2015-10-18

  • 添加了“zIndex”选项

v1.1.0 (2015-08-23)

  • 后续调用的新配置选项

2014-07-05

  • 更新到 v1.0.3

2014-06-30

  • 添加了 'start' 选项来定义初始化时是否开始加载状态

联系我们
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。