jQuery UI进度栏 jQueryUI进度栏|jQueryUI

本文概述

第一种方法
jQueryUI Progressbar()方法的示例

进度栏指定操作或进度的完成百分比。
进度栏可以分为两种类型：

确定进度条
不确定进度条

【jQuery UI进度栏】确定进度栏：
确定进度栏仅在系统可以准确更新当前状态的情况下使用。确定的进度条从不应该从左到右填充, 然后对于单个进程, 请循环回到空白。
不确定进度条：
不确定进度条用于提供用户反馈。
句法：
你可以以两种形式使用progressbar()方法：

$(selector, context).progressbar (options) Method

$(selector, context).progressbar ("action", params) Method

第一种方法progressbar（选项）方法指定可以以进度条的形式管理HTML元素。这里的“选项”参数是一个对象, 用于指定进度条的外观和行为。
句法：

$(selector, context).progressbar (options);

你可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项, 则必须使用逗号将它们分开, 如下所示：

$(selector, context).progressbar({option1: value1, option2: value2..... });

以下是可与该方法一起使用的不同选项的列表。

选项	描述
disabled	如果将此选项设置为true, 则它将禁用进度条。默认情况下, 其值为false。
max	此选项用于设置进度条的最大值。默认情况下, 其值为100。
value	此选项指定进度条的初始值。默认情况下, 其值为0。

jQueryUI Progressbar()方法的示例让我们以一个简单的示例来演示进度条的功能, 该功能不向Progressbar()方法传递任何参数。

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI ProgressBar functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/00502Q1a-0.jpg"> < /script> < script src="http://img.readke.com/220430/00502U195-1.jpg"> < /script> < style> .ui-widget-header { background: blue; border: 1px solid #DDDDDD; color: #333333; font-weight: bold; } < /style> < script> $(function() { $( "#progressbar-1" ).progressbar({ value: 30 }); }); < /script> < /head> < body> < div id="progressbar-1"> < /div> < /body> < /html>

立即测试