EasyUI jQuery progressbar widget

在这篇文章中，我们将学习如何使用jQuery Easy UI进度条来设计一个进度条小部件。该组件可以通过HTML标记或编程方式创建。EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。

EasyUI for jQuery的下载：

https://www.jeasyui.com/download/index.php

语法:

var a = $(".selector").progressbar({
});

属性:

height : 组件的高度
width : 组件的宽度
value：百分比值
text。要显示的文本模板。

方法:

resize : 调整进度条的大小。
getValue。返回当前的搜索类型名称。
setValue。设置当前的搜索类型名称。
options :返回选项对象

事件:

onChange:当值发生变化时启动

CDN Links:

首先，添加你的项目所需的jQuery Easy UI脚本。

<script type=”text/javascript” src=”jquery.min.js”>
</script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”>
</script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”>
</script>

示例:

<!doctype html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="initial-scale=1.0, 
          maximum-scale=1.0, user-scalable=no"> 
              
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css"
          href="themes/metro/easyui.css"> 
  
    <link rel="stylesheet" type="text/css"
          href="themes/mobile.css"> 
  
    <link rel="stylesheet" type="text/css"
          href="themes/icon.css"> 
  
    <!--jQuery library -->
    <script type="text/javascript" src="jquery.min.js"> 
    </script> 
  
    <!--jQuery libraries of EasyUI -->
    <script type="text/javascript"
            src="jquery.easyui.min.js"> 
    </script> 
      
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript"
            src="jquery.easyui.mobile.js"> 
    </script> 
</head> 
  
<body>     
    <h1>GeeksforGeeks</h1>
    <h3>EasyUI Progressbar Widget</h3>
    <div id="p" class="easyui-progressbar" 
                data-options="value:60" 
                style="width:400px;">
    </div>
</body>
</html>

输出:

EasyUI jQuery progressbar widget