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

版本:

浏览量:1232

最后更新：2021-09-12

应用标签：Jquery插件 MAC 软件 git

推荐指数:

查看演示点击下载

详细信息

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 方法。