JQuery EasyUI(8)

最新推荐文章于 2025-07-01 23:42:13 发布

翻译最新推荐文章于 2025-07-01 23:42:13 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://study.163.com/course/courseMain.htm?courseId=943002

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了JQuery EasyUI中ProgressBar组件的使用方法，包括加载方式、属性、事件及方法列表，适合初学者快速掌握进度条组件的应用。

第八章：ProgressBar（进度条）组件

学习要点：

加载方式
属性列表
事件列表
方法列表

一、加载方式：

1.class加载方式

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body style="margin:100px;">      
       <div class="easyui-progressbar" style="width:400px" data-options="value"></div>
  </body>
</html>

2.JS调用

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body style="margin:100px;">
       <!--
         <div class="easyui-progressbar" style="width:400px" data-options="value"></div>
       -->
         <div id="box"></div>
  </body>
</html>

$(function(){

   $('#box').progressbar({
         width:400,
  });
});

二、属性列表：

ProgressBar属性
属性名	值	说明
width	string	设置进度条宽度。默认为auto
height	string	设置进度条高度。默认为22
value	number	设置进度条值。默认为0
text	string	设置进度条百分比模板：默认{value}%

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body style="margin:100px;">
       <div id="box"></div>
  </body>
</html>

$(function(){

   $('#box').progressbar({
         width:400,
         height:30,
         value:.30,
         text:'{value}%',
  });
});

三、事件列表：

ProgressBar事件
事件名	传参	说明
onChange	newValue,oldValue	在值更改的时候触发

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body style="margin:100px;">
       <div id="box"></div>
  </body>
</html>

$(function(){

   $('#box').progressbar({
         width:400,
         height:30,
         value:.30,
         text:'{value}%',

         onChange:function(newValue,oldValue){
            console.log('新：' + newValue + '，旧：' + oldValue);
    },
  });

    /*
    setTimeout(function(){
         $('#box').progressbar('setValue',70);
   },1000);
   */

    setInterval(function(){
         $('#box').progressbar('setValue',$('#box').progressbar('getValue')+5);
   },200);
});

四、方法列表：

ProgressBar方法
方法名	传参	说明
options	none	返回属相对象
resize	width	组件大小
getValue	none	返回当前进度值
setValue	value	设置一个新的进度值

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body style="margin:100px;">
       <div id="box"></div>
  </body>
</html>

$(function(){

   //$.fn.progressbar.defaults.value = 30;

   $('#box').progressbar({
         width:400,
         height:30,
         value:.30,
         text:'{value}%',

         onChange:function(newValue,oldValue){
            console.log('新：' + newValue + '，旧：' + oldValue);
    },
  });

    /*
    setTimeout(function(){
         $('#box').progressbar('setValue',70);
   },1000);

    setInterval(function(){
         $('#box').progressbar('setValue',$('#box').progressbar('getValue')+5);
   },200);

   */

   //console.log($('#box').progressbar('options'));
   //$('#box').progressbar('resize',600);
});

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/102840647

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载