JqueryUI-进度栏(1) - 芒果文档

📌 相关文章

📜 JqueryUI-进度栏(1)

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

JqueryUI 进度栏

JqueryUI 进度栏是一种用于显示当前进度的 UI 控件。它可以通过设置进度百分比和样式来自定义显示。

引入 JqueryUI 库

要使用 JqueryUI 进度栏，需要先在网页中引入 Jquery 和 JqueryUI 库。

<!-- 引入 Jquery 和 JqueryUI 库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>

创建进度栏

通过以下代码可以创建一个进度栏：

<div id="progressbar"></div>

然后通过以下 JavaScript 代码进行初始化：

$("#progressbar").progressbar({
  value: 50
});

这里的 value 属性设置为 50，表示当前进度为 50%。

自定义样式

JqueryUI 进度栏可以通过自定义 CSS 样式来美化。以下是一些可以自定义的 CSS 属性：

background-color：设置进度条的背景颜色；
border-color：设置进度条的边框颜色；
border-radius：设置进度条的圆角半径；
height：设置进度条的高度；
margin：设置进度条的外边距；
padding：设置进度条的内边距；
width：设置进度条的宽度。

以下是一个自定义的进度条样式：

/* 自定义进度条样式 */
#progressbar {
  background-color: #ccc;
  border: none;
  border-radius: 5px;
  height: 10px;
  margin: 10px 0;
  overflow: hidden;
  padding: 1px;
  width: 200px;
}

#progressbar .ui-progressbar-value {
  background-color: #f90;
  height: 100%;
}

然后通过以下代码进行初始化：

$("#progressbar").progressbar({
  value: 75
});

这里的 value 属性设置为 75，表示当前进度为 75%。同时，进度条的样式也被修改为自定义样式。

修改进度

要修改进度，可以使用 value 方法。以下是修改进度到 90% 的代码：

$("#progressbar").progressbar("value", 90);

完整示例

以下是一个完整的 JqueryUI 进度栏示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JqueryUI 进度栏示例</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <style>
    /* 自定义进度条样式 */
    #progressbar {
      background-color: #ccc;
      border: none;
      border-radius: 5px;
      height: 10px;
      margin: 10px 0;
      overflow: hidden;
      padding: 1px;
      width: 200px;
    }
  
    #progressbar .ui-progressbar-value {
      background-color: #f90;
      height: 100%;
    }
  </style>
</head>
<body>
  <!-- 进度条容器 -->
  <div id="progressbar"></div>
  
  <!-- 引入 Jquery 和 JqueryUI 库 -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  
  <script>
    $(function() {
      // 初始化进度条
      $("#progressbar").progressbar({
        value: 50
      });
      
      // 点击按钮修改进度
      $("#increase").click(function() {
        var value = $("#progressbar").progressbar("value");
        if (value < 100) {
          $("#progressbar").progressbar("value", value + 10);
        }
      });
    });
  </script>
  
  <!-- 修改进度按钮 -->
  <button id="increase">增加进度</button>
</body>
</html>

效果如下：

JqueryUI 进度栏示例