下面的例子展示了如何在ProgressBar UI 小部件上监听完成事件。
<!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 progressBar_completeHandler(event, ui) {
alert(event.type);
}
$(function() {
// Set the progressbar's initial value to 76%, and define an event listener for the "complete" event.
$("#progressbar1").progressbar({value:76, complete:progressBar_completeHandler});
// 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-ui-widget-in-jquery.zip
分享到：
相关推荐
- **事件处理**：通过JavaScript代码绑定事件监听器，实现对jQuery UI组件的控制和扩展，如打开/关闭对话框、改变滑块值等。 - **兼容性和性能优化**：确保所使用的jQuery UI版本与目标浏览器兼容，并考虑使用CDN...
jQuery UI还包含了其他各种组件，如**对话框**（Dialog）用于创建弹出式窗口，**拖放**（Draggable）和**可排序**（Sortable）功能增强页面元素的互动性，**滑块**（Slider）用于数值选择，以及**进度条**...
在本文中，我们将深入探讨如何使用jQuery的progressbar插件来创建一个动态的进度条效果，并在用户鼠标滑过时展示进度的百分比数据。jQuery是一个轻量级的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果，...
jQuery Progressbar 是一款广泛使用的JavaScript库，用于在网页上创建美观且功能丰富的进度条组件。这个插件允许开发者轻松地创建动态变换的进度效果，并且支持彩色和自定义样式，以适应各种用户界面的需求。 首先...
1. **组件丰富**：jQuery UI 包含了大量的UI组件，如对话框（Dialog）、下拉菜单（Selectmenu）、滑块（Slider）、进度条（Progressbar）等，满足开发者在创建动态Web页面时的各种需求。 2. **主题样式**：jQuery ...
4. **事件绑定**: 利用jQuery的事件处理机制，可以监听用户与组件的交互，执行相应的逻辑。 **三、源码分析** 在`development-bundle`目录中，包含了jQuery UI的源码，开发者可以深入理解其内部实现，进行定制化...
5. **API 和事件**：每个小部件都有其特定的API和事件，开发者可以通过这些接口与小部件进行交互，如打开和关闭对话框，监听滑块值的变化等。 6. **自定义小部件**：jQuery UI 提供了构建自定义小部件的框架，...
然后，可以通过监听XMLHttpRequest的progress事件来获取上传进度，并更新progressbar的状态。 ```html <script src="jquery.js"> <script src="jquery-ui.min.js"> <link rel="stylesheet" href="jquery-ui.css"> ...
《jQuery Easy UI基础篇》是针对初学者及开发者的一份宝贵资源，包含了多个关于jQuery Easy UI基础组件的代码示例。这些示例旨在帮助用户快速理解并掌握如何使用这个强大的前端框架来创建交互式和响应式的网页应用。...
1. **组件丰富**：JQuery UI 1.9包含了多种UI组件，如对话框（Dialog）、日期选择器（Datepicker）、下拉菜单（Selectmenu）、滑块（Slider）、进度条（Progressbar）、拖放（Draggable）、可排序（Sortable）和可...
jQuery UI ProgressBar 提供了一些事件，如 `create`、`change` 和 `complete`，可以用来监听进度条的状态变化。例如，监听 `change` 事件来执行某些操作： ```javascript $("#progressbar").on("change", function...
4. **事件处理**：可以绑定事件监听器以响应用户的交互，如`$("#draggable").draggable({drag: function(event, ui) {...}})`监听拖动过程。 5. **主题引用**：在CSS中引用自定义的主题，如`@import ...
1. **组件丰富**：jQuery UI 包含了大量的可重用UI组件，如日期选择器（Datepicker）、对话框（Dialog）、滑块（Slider）、进度条（Progressbar）、拖放（Draggable）、可排序（Sortable）、可叠放（Stackable）和可...
- **触发事件**：利用 jQuery UI 提供的事件接口，可以监听并处理用户与组件的交互。 ### 3. 主要组件详解 #### 3.1 对话框（Dialog） 对话框组件用于弹出窗口，可以设置为模态或非模态，支持自定义标题、内容和...
4. **小部件**：包括日期选择器(Datepicker)、时间选择器(Timer)、对话框(Dialog)、进度条(Progressbar)、滑块(Slider)、下拉选择器(Tabs)等，这些都是网页中常用且功能强大的组件。 5. **可选插件**：除了核心组件...
此外，还可以通过事件监听来实现更复杂的逻辑，例如在用户选择日期后触发特定操作。 ### 2. 时间选择器 除了日历功能，jQuery UI 还提供了时间选择器（Timepicker）插件，这使得用户能够方便地选择或输入时间。...
4.1 自定义组件：通过jQuery UI的API，开发者可以轻松定制组件的行为，例如设置事件监听器、修改默认选项等，以满足特定项目的需求。 4.2 优化策略：针对性能考虑，可以按需加载组件，减少不必要的资源消耗；利用...
**jQuery Easy UI 中文帮助手册** 是一份详细指导开发者如何使用 jQuery Easy UI 框架的文档，旨在帮助用户更好地理解和应用这个强大的前端开发工具。jQuery Easy UI 是基于 jQuery 的一个轻量级、易于使用的组件库...
jQuery UI 与jQuery核心库紧密集成，同时也与其他库如Bootstrap、AngularJS等有良好的兼容性，可以在不同框架和库中无缝使用。 ### 六、jQuery UI 1.7的改进与更新 在1.7版本中，jQuery UI 对多个组件进行了优化，...
1. **组件（Widgets）**：jQuery UI 提供了一系列预定义的组件，如日期选择器（Datepicker）、时间选择器（Timepicker）、进度条（Progressbar）等。这些组件都封装了复杂的交互逻辑，只需简单的API调用即可使用。 ...