下面的例子展示了如何在ProgressBar UI 小部件上通过JQuery设置value选项来设置它的value。
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// Set the progressbar's initial value to 76%.
$("#progressbar1").progressbar({value:76});
// Set the progressbar's value to 18%.
$("#button1").click(function() {
$("#progressbar1").progressbar("option", "value", 18);
});
// Increment the progressbar's current value by 10%.
$("#button2").click(function() {
var val = $("#progressbar1").progressbar("option", "value");
$("#progressbar1").progressbar("option", "value", val+10);
});
// Decrement the progressbar's current value by 10%.
$("#button3").click(function() {
var val = $("#progressbar1").progressbar("option", "value");
$("#progressbar1").progressbar("option", "value", val-10);
});
});
</script>
</head>
<body>
<div style="padding:20px;">
<input id="button1" type="button" value="value = 18" />
<input id="button2" type="button" value="value += 10" />
<input id="button3" type="button" value="value -= 10" />
</div>
<div id="progressbar1" style="width:300px; height:80px;" />
</body>
</html>
源码下载：
progressbar-event-ui-widget-in-jquery.zip
分享到：
相关推荐
1. **部件（Widgets）**：jQuery UI提供了多种UI部件，如日期选择器（Datepicker）、对话框（Dialog）、滑块（Slider）、进度条（Progressbar）、标签页（Tabs）和下拉菜单（Selectmenu）等。这些部件都封装了复杂的...
(2) jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。 (3) jQuery本身注重于后台，没有漂亮的界面，而jQuery UI则补充了前者...
在本文中，我们将深入探讨 jQuery UI 的核心功能、使用场景以及其自定义版本的特性。 ### jQuery UI 的核心组件 1. **Widget Factory**: jQuery UI 的基础是 Widget Factory，这是一个用于创建可重用组件的框架。...
1. **部件（Widgets）**：jQuery UI 包含了如日期选择器（DatePicker）、对话框（Dialog）、进度条（Progressbar）、滑块（Slider）等部件。每个部件都有其特定的API供开发者调用和配置。 2. **特效（Effects）**：...
7. **小部件(Widgets)**: 除了上述组件，jQuery UI还提供如Accordion（手风琴）、Tabs（选项卡）、Progressbar（进度条）等多种可复用的小部件。 **API手册** “jQuery API手册”详细介绍了每个jQuery方法、参数、...
jQuery 和 jQuery UI 是两个在Web开发中广泛使用的JavaScript库，它们极大地简化了DOM操作、事件处理、动画效果以及用户界面的构建。以下是关于这两个库的详细知识点： **jQuery** jQuery 是一个轻量级的JavaScript...
要使用 jQuery UI，首先需要在项目中引入 jQuery 和 jQuery UI 的库文件，例如 `jquery-ui-1.8.24` 包含的 `jquery-ui.min.js` 和相应的 CSS 文件。然后，通过 jQuery 选择器选择要应用组件的元素，调用对应的插件...
**jQuery UI 是一个基于 jQuery ...通过阅读和学习《jQuery UI 开发指南》，你将能够熟练掌握如何在项目中集成和使用jQuery UI，提升Web应用的用户体验。同时，结合实际项目进行练习，将有助于加深理解和提高开发技能。
1. **部件（Widgets）**：jQueryUI提供了许多预先封装好的UI部件，如日期选择器（Datepicker）、滑块（Slider）、对话框（Dialog）、进度条（Progressbar）、下拉菜单（Autocomplete）等。这些部件都具有高度可定制...
jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合，它提供了一系列可自定义的组件，包括交互控件、动画效果、小部件以及可重用的 UI 组件。这个压缩包 "Jquery-ui-demo.zip" 包含了官方的 jQuery UI 库...
6. **Widgets**：jQuery UI提供了一系列现成的UI小部件，如Accordion（手风琴）、Autocomplete（自动完成）、DatePicker（日期选择器）、Dialog（对话框）、Progressbar（进度条）等。这些组件极大地简化了开发过程...
必做要使用jQuery1.6+ 及以上 jQuery UI组件构成 jQuery UI 主要分为3个部分：交互、微件和效果库。 交互（Interactions） 交互部件是一些与鼠标交互相关的内容，包括缩放（Resizable） , 拖动（Draggable） , ...
在本文中，我们将深入探讨jQuery UI 1.12.1 自定义版本的核心特性和使用方法。 首先，让我们明确一下标题"jquery-ui-1.12.1.custom.zip"所代表的含义。这个文件是jQuery UI 1.12.1版本的一个自定义压缩包，其中包含...
在本篇文章中，我们将深入探讨 jQuery UI 1.10.3 版本的自定义特性，帮助开发者更好地理解和利用这一强大的工具。 首先，jQuery UI 1.10.3 是该框架的一个稳定版本，包含了众多经过优化和测试的组件。这些组件包括...
jQuery UI 包含了一系列预定义的小部件，例如日期选择器（Datepicker）、时间选择器（Timepicker）、对话框（Dialog）、滑块（Slider）、进度条（Progressbar）、自动完成（Autocomplete）等。这些小部件简化了常见...
**jQuery UI** 是一个基于 jQuery JavaScript 库的用户界面插件集合，它提供了一系列丰富的交互效果、可重用的UI小部件以及主题化的样式。这个压缩包文件包含了jQuery UI的完整文档，帮助开发者深入理解其功能和用法...
1. **Widgets（小部件）**：这是jQuery UI的基础，包括日期选择器（Datepicker）、对话框（Dialog）、下拉菜单（Autocomplete）、滑块（Slider）、进度条（Progressbar）、可排序列表（Sortable）、可拖放元素...
然而，值得注意的是，虽然jQuery UI功能强大，但在现代Web开发中，随着轻量级框架如React和Vue的崛起，jQuery UI的使用有所减少。但其在一些传统项目或者需要快速实现复杂交互的场景中，仍然是一个高效的选择。 ...
8. **小部件（Widgets）**：如菜单（Menu）、下拉选择（Selectmenu）、时间选择器（Timepicker）、自动完成（Autocomplete）等，这些都是常见但实现起来繁琐的组件，jQuery UI 提供了开箱即用的解决方案。...
带示例 Draggable Droppable Resizable Selectable ...部件 Accordion Datepicker Dialog Progressbar Slider Tabs 动画 AddClass RemoveClass Animate Effect Hide Show SwitchClass Toggle ToggleClass