jQWidgets jqxBarGauge refresh()方法

jQWidgets jqxBarGauge refresh()方法

jQWidgets是一个基于jQuery的UI组件库,提供了丰富的UI件和工具,包括表格、图表单、历、菜单等。jqBarGaugejQWidgets中的一个组件,可以用于水平或垂直的条形图。jqBarGauge提供了refresh()方法,用于刷新条形图。

refresh()方法的基本语法

refresh()方法用于刷新条形图。其基本语法如下:

$('#jqxBarGauge').jqxBarGauge('refresh');

refresh()方法中,不需要传递任何参数。

示例1:刷新条形图

以下是一个示例,演示如何刷新条形图:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQWidgets BarGauge Example</title>
  <link rel="stylesheet" href="https://cdn.jqwidgets.com/jquery.jqwidgets/4.5.3/jqwidgets/styles/jqx.base.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jqwidgets.com/jquery.jqwidgets/4.5.3/jqwidgets/jqxcore.js"></script>
  <script src="https://cdn.jqwidgets.com/jquery.jqwidgets/4.5.3/jqwidgets/jqxdata.js"></script>
  <script src="https://cdn.jqwidgets.com/jquery.jqwidgets/4.5.3/jqwidgets/jqxbuttons.js"></script>
  <script src="https://cdn.jqwidgets.com/jquery.jqwidgets/4.5.3/jqwidgets/jqxscrollbar.js"></script>
  <script src="https://cdn.jqwidgets.com/jquery.jqwidgets/4.5.3/jqwidgets/jqxgauge.js"></script>
  <script src="https://cdn.jqwidgets.com/jquery.jqwidgets/4.5.3/jqwidgets/jqxbargauge.js"></script>
</head>
<body>
  <div id="jqxBarGauge"></div>
  <button id="btnRefresh">刷新条形图</button>
  <script>
    $(document).ready(function () {
      $('#jqxBarGauge').jqxBarGauge({ max: 100, value: 50, min: 0 });
      $('#btnRefresh').click(function () {
        $('#jqxBarGauge').jqxBarGauge('refresh');
      });
    });
  </script>
</body>
</html>

在这个示例中,我们使用jqxBarGauge组件创建了一个条形图,并在按钮的点击事件中调用了refresh()方法,以刷新条形图。

示例2:动态更新条形图的值

以下是另一个示例,演示如何动态更新条形图的值:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQWidgets BarGauge Example</title>
  <link rel="stylesheet" href="https://cdn.jqwidgets.com/jquery.jqwidgets/4.5.3/jqwidgets/styles/jqx.base.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jqwidgets.com/jquery.jqwidgets/4.5.3/jqwidgets/jqxcore.js"></script>
  <script src="https://cdn.jqwidgets.com/jquery.jqwidgets/4.5.3/jqwidgets/jqxdata.js"></script>
  <script src="https://cdn.jqwidgets.com/jquery.jqwidgets/4.5.3/jqwidgets/jqxbuttons.js"></script>
  <script src="https://cdn.jqwidgets.com/jquery.jqwidgets/4.5.3/jqwidgets/jqxscrollbar.js"></script>
  <script src="https://cdn.jqwidgets.com/jquery.jqwidgets/4.5.3/jqwidgets/jqxgauge.js"></script>
  <script src="https://cdn.jqwidgets.com/jquery.jqwidgets/4.5.3/jqwidgets/jqxbargauge.js"></script>
</head>
<body>
  <div id="jqxBarGauge"></div>
  <button id="btnUpdateValue">更新值为75</button>
  <script>
    $(document).ready(function () {
      var barGauge = $('#jqxBarGauge').jqxBarGauge({ max: 100, value: 50, min: 0 });
      $('#btnUpdateValue').click(function () {
        barGauge.jqxBarGauge({ value: 75 });
        barGauge.jqxBarGauge('refresh');
      });
    });
  </script>
</body>
</html>

在这个示例中,我们使用jqxBarGauge组件创建了一个条形图,并在按钮的点击事件中动态更新了条形图的值,并调用了refresh()方法,以刷新条形图。

综上所述,jqxBarGauge提供了refresh()方法,可以刷新条形图。本文详细介绍了refresh()方法的使用方法和示例。

参考链接

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQWidgets jqxBarGauge refresh()方法 - Python技术站

(0)
上一篇 2023年5月9日
下一篇 2023年5月9日

相关文章

  • 浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法

    下面我来详细讲解“浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法”的完整攻略。 背景知识 在介绍 JSOPN 跨域请求原理及 CORS(跨域资源共享)解决方法前,我们需要先了解一些相关的背景知识。 什么是跨域? 跨域指的是浏览器不能执行其他网站的脚本。这里的“其他网站”是指,和当前网页有不同协议、域名或端口的网站。 什么是跨域请求? 跨域…

    jquery 2023年5月28日
    00
  • 详解JavaScript异步编程中jQuery的promise对象的作用

    详解JavaScript异步编程中jQuery的promise对象的作用 异步编程与回调函数的问题 在JavaScript中,异步编程是常见的一种编写方式,它可以使程序不会因为等待I/O等操作而被阻塞。多数异步回调函数根据I/O的准备情况来激活。然而,当多个异步操作需要协同完成时,使用回调函数的方式会导致回调嵌套的层数加深,同时代码的可读性大大降低。 Pro…

    jquery 2023年5月27日
    00
  • jQuery unwrap()的例子

    jQuery的unwrap()方法可以将匹配的元素的父元素从DOM中删除,使匹配的元素直接成为其祖先元素的子元素。 以下是unwrap()的一些使用示例: 示例1: <div class="container"> <div class="box"> <p>这是一个段落</p&g…

    jquery 2023年5月13日
    00
  • jQuery Validation Engine验证控件调用外部函数验证的方法

    jQuery Validation Engine 是一个强大的表单验证插件,可以非常简单地验证表单的合法性。它不但支持多种验证规则,并且还允许我们为每个表单元素应用多个验证规则。 需要调用外部函数进行验证时,可以使用以下方法: 自定义验证规则方法validate[funcName]。 我们可以定义一个函数名为funcName的方法,方法接受两个参数:fiel…

    jquery 2023年5月27日
    00
  • ASP.NET实现二维码(QRCode)的创建和读取实例

    ASP.NET实现二维码(QRCode)的创建和读取实例 二维码(QRCode)是一种矩阵条码,常见于移动支付、票务系统、物流和仓储管理等领域。ASP.NET作为一种优秀的动态Web开发框架,提供了多种创建和读取二维码的方式。 一、创建二维码 1.1 使用ZXing.NET库创建二维码 ZXing.NET是一个开源且功能丰富的二维码处理库,可以用于生成和解码…

    jquery 2023年5月27日
    00
  • jQWidgets jqxTreeGrid columnsHeight属性

    jqxTreeGrid 是 jQWidgets 提供的一个树形表格组件,它可以展示层级结构的数据。jqxTreeGrid 组件有一个 columnsHeight 属性,用于设置表格列的高度。下面是 columnsHeight 属性的详细讲解和示例说明: columnsHeight 属性 columnsHeight 属性用于设置表格列的高度。它可以接受一个数字…

    jquery 2023年5月11日
    00
  • 如何在jQuery中获取文本框的值

    获取文本框的值是 jQuery 中非常常见的操作之一,下面是具体的攻略过程: 1. 确定文本框的选择器 首先需要确定要获取哪一个文本框的值,需要知道该文本框的选择器是什么。选择器可以是 HTML 元素 ID,class 名称或者其他属性等。 假设网页中的一个文本框的 ID 为 “myTextbox”,那么选择器可写成 #myTextbox。 2. 获取和设置…

    jquery 2023年5月12日
    00
  • jQuery UI Autocomplete select 事件

    jQuery UI 的 Autocomplete 组件提供了一个 select 事件,该事件在用户选择 Autocomplete 中的选项时触发。在本教程中,我们将详细介绍 Autocomplete 的 select 事件的使用方法。 select 事件基本语法如: $( ".selector" ).autocomplete({ sele…

    jquery 2023年5月11日
    00
合作推广
合作推广
分享本页
返回顶部