📅 最后修改于: 2023-12-03 15:02:19.741000 🧑 作者: Mango
jQWidgets是一个开源的JavaScript UI框架，提供了丰富的UI组件和工具，可以帮助开发人员快速构建Web应用程序。jqxLoader是jQWidgets中的一个加载器组件，可以让开发人员在页面加载期间显示一个加载动画以增强用户体验。imagePosition是jqxLoader组件的一个属性，用于指定加载动画的位置。
可以使用的属性值有：
首先需要在页面引入jqxLoader组件的相关文件：
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<script src="jqwidgets/jqxcore.js"></script>
<script src="jqwidgets/jqxloader.js"></script>
然后可以在页面中使用jqxLoader组件，并为其指定imagePosition属性来改变加载动画的位置：
<div id="jqxLoader"></div>
<script type="text/javascript">
$("#jqxLoader").jqxLoader({
height: 60,
width: 60,
imagePosition: "center"
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>jqxLoader imagePosition属性示例</title>
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<script src="jqwidgets/jqxcore.js"></script>
<script src="jqwidgets/jqxloader.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#jqxLoaderTop").jqxLoader({
height: 60,
width: 60,
imagePosition: "top"
});
$("#jqxLoaderCenter").jqxLoader({
height: 60,
width: 60,
imagePosition: "center"
});
$("#jqxLoaderBottom").jqxLoader({
height: 60,
width: 60,
imagePosition: "bottom"
});
});
</script>
</head>
<body>
<div id="jqxLoaderTop"></div>
<div id="jqxLoaderCenter"></div>
<div id="jqxLoaderBottom"></div>
</body>
</html>