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

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

jQWidgets jqxLoader 主题属性

概述

jqxLoader 是一款基于 jQuery 和 jQWidgets 的加载器组件。它可以让用户在等待数据加载完成时展示一个动态的加载图标。通过设置 theme 属性，用户可以选择不同的主题来改变加载器的外观。

主题属性

jqxLoader 提供了以下主题属性：

theme
  • 类型：string
  • 默认值：'energyblue'
  • 可选值：'energyblue', 'orange', 'darkblue', 'black', 'metro', 'light', 'material', 'shinyblack', 'classic', 'bootstrap', 'frozen', 'highcontrast', 'orange_dark', 'darkblue_dark', 'black_dark', 'metro_dark', 'light_dark', 'material_dark', 'shinyblack_dark', 'classic_dark', 'bootstrap_dark', 'frozen_dark', 'highcontrast_dark'

该属性用于设置加载器的主题。jqxLoader 提供了多种主题供用户选择，包括 'energyblue'、'orange'、'darkblue'、'black'、'metro' 等等，用户可以根据自己的需求进行选择。以下是一些主题样例：

jqxLoader themes

示例代码

以下是一个简单的使用 jqxLoader 加载器并设置不同主题的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.orange.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.darkblue.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.black.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.metro.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.light.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.material.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.shinyblack.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.classic.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.bootstrap.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.frozen.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.highcontrast.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.orange_dark.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.darkblue_dark.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.black_dark.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.metro_dark.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.light_dark.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.material_dark.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.shinyblack_dark.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.classic_dark.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.bootstrap_dark.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.frozen_dark.css">
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.highcontrast_dark.css">
    <script src="https://jqwidgets.com/public/jqwidgets/jquery-3.6.0.min.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxloader.js"></script>
    <script>
        $(document).ready(function () {
            $('#loader').jqxLoader({ theme: 'energyblue' });
            $('#energyblue').on('click', function () {
                $('#loader').jqxLoader({ theme: 'energyblue' });
            });
            $('#orange').on('click', function () {
                $('#loader').jqxLoader({ theme: 'orange' });
            });
            $('#darkblue').on('click', function () {
                $('#loader').jqxLoader({ theme: 'darkblue' });
            });
            $('#black').on('click', function () {
                $('#loader').jqxLoader({ theme: 'black' });
            });
            $('#metro').on('click', function () {
                $('#loader').jqxLoader({ theme: 'metro' });
            });
            $('#light').on('click', function () {
                $('#loader').jqxLoader({ theme: 'light' });
            });
        });
    </script>
</head>
<body>
    <div id="loader"></div>
    <button id="energyblue">Energy Blue</button>
    <button id="orange">Orange</button>
    <button id="darkblue">Dark Blue</button>
    <button id="black">Black</button>
    <button id="metro">Metro</button>
    <button id="light">Light</button>
</body>
</html>

用户可以点击不同的按钮来更改加载器的主题。上面的代码片段中使用了多个 link 标签来加载不同主题的样式文件。

参考链接