📌  相关文章
📜  jQWidgets jqxLoader height 属性(1)

📅  最后修改于: 2023-12-03 15:32:18.617000             🧑  作者: Mango

jQWidgets jqxLoader height 属性介绍

jQWidgets jqxLoader 是一个用于展示加载时状态的组件。它提供了一个 height 属性，用于设置组件的高度。

height 属性的作用

height 属性用于设置 jqxLoader 组件的高度。它可以是一个具体的像素值，也可以是一个百分比值，或者是一个字符串。

设置 height 属性可以让开发者自定义 jqxLoader 的大小，以适应不同的页面布局和需求。

如何使用 height 属性

height 属性可以通过配置对象或 HTML 属性进行设置。

通过配置对象设置 height 属性
$("#loader").jqxLoader({
    width: "100px",
    height: "100px"
});
通过 HTML 属性设置 height 属性
<div id="loader" data-height="100px"></div>
height 属性的取值范围

height 属性可以取任意合法的 CSS 高度值，包括像素值、百分比值和字符串。

示例代码
配置对象方式设置 height 属性
<!DOCTYPE html>
<html>
<head>
    <title>jQWidgets jqxLoader height 属性介绍</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqxwidgets/4.4.4/jqx.base.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqxwidgets/4.4.4/jqxcore.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqxwidgets/4.4.4/jqxloader.js"></script>
</head>
<body>
    <div id="loader"></div>
    <script type="text/javascript">
        $("#loader").jqxLoader({
            width: "100px",
            height: "100px"
        });
    </script>
</body>
</html>
HTML 属性方式设置 height 属性
<!DOCTYPE html>
<html>
<head>
    <title>jQWidgets jqxLoader height 属性介绍</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqxwidgets/4.4.4/jqx.base.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqxwidgets/4.4.4/jqxcore.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqxwidgets/4.4.4/jqxloader.js"></script>
</head>
<body>
    <div id="loader" data-height="100px"></div>
    <script type="text/javascript">
        $("#loader").jqxLoader();
    </script>
</body>
</html>