📅 最后修改于: 2023-12-03 15:32:18.643000 🧑 作者: Mango
jQWidgets jqxLoader 是一款用于页面预加载的插件，常用于大型页面的加载过程中，通过 jqxLoader 可以在页面加载过程中增加 loading 效果，用户体验得到很大的提升。创建 jqxLoader 时可以创建一个有用的事件 - onCreated，当创建loader完成时会触发该事件。本文将介绍如何使用 jqxLoader 创建事件。
要使用 jqxLoader，您需要先引入所需的 js 和 css 文件。您可以从官方网站或 npm 安装 jqxLoader。我们这里给出引入 jqxLoader 的方式：
<!-- 引入css文件 -->
<link rel="stylesheet" href="jqx.base.css">
<!-- 引入js文件 -->
<script src="jqxcore.js"></script>
<script src="jqxloader.js"></script>
要使用 jqxLoader，您需要先创建 jqxLoader 的实例对象。您可以使用以下代码创建一个简单的 jqxLoader：
// 创建一个jqxLoader实例
var loader = jqxLoader('#loader', { width: 100, height: 60 });
此处，我们创建了一个 ID 为“loader”的 div 元素，并将其传递给 jqxLoader，同时传入 loader 的宽度和高度。此时我们就成功创建了一个 jqxLoader。
当 jqxLoader 创建完成后，会触发 onCreated 事件。您可以通过如下代码实现：
// 给jqxLoader添加onCreated事件监听器
loader.on('onCreated', function() {
console.log('jqxLoader was created');
});
当您将页面加载的 jqxLoader 创建完成后，就可以绑定 onCreated 事件的监听器。在该监听器函数中，您可以执行一些其他的动作，如修改页面的样式，或者启动某些相关操作等。
以下是一个完整的示例，您可以将代码直接复制到一个 HTML 文件中运行：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jqxLoader onCreated 示例</title>
<!-- 引入必要的脚本和样式文件 -->
<link rel="stylesheet" href="jqx.base.css">
<script src="jqwidgets/jqxcore.js"></script>
<script src="jqwidgets/jqxloader.js"></script>
</head>
<body>
<h2>jqxLoader onCreated 示例</h2>
<div id="loader"></div>
<!-- js代码 -->
<script>
var loader = jqxLoader('#loader', { width: 100, height: 60 });
// 添加onCreated事件监听器
loader.on('onCreated', function () {
console.log('jqxLoader was created')
});
</script>
</body>
</html>
当您运行该 HTML 文件时，可以在控制台看到 'jqxLoader was created'，这就是 onCreated 事件的触发结果。
在本文中，我们介绍了如何使用 jQWidgets jqxLoader 创建事件。当创建完成后，我们可以调用 onCreated 监听器对 jqxLoader 进行一些自定义操作。希望本文对您有所帮助！