jquery.ui.progressbar 中文文档

　　<?xml version="1.0" encoding="UTF-8" ?>

　　<!--

　　注意事项:

　　1. 以下格式为既定的格式, 为了统一性, 需要修改时, 大家商议

　　2. 格式中的所有项都是选填, 如果没有, 不写就是了.

　　3. 由于是XML格式的, 所以, 所有标签中间填写文本的地方(最重要是代码, 一定要加, 不然以后解析有困难), 都需要加上<![CDATA[这中间写内容]]>

　　4. 翻译过程中, 一块对应的是一个<translate />标签.

　　5. 希望大家工作愉快.

　　-->

　　<project>

　　<translate item="progressbar" version="7.1">

　　<translators>

　　<translator nickname="selfimpr" name="雷果国" mail="[email protected]" homepage="http://blog.csdn.net/lgg201" qq="285821471" />

　　</translators>

　　<relatives>

　　<depend isitem="false">

　　<name><![CDATA[jquery]]></name>

　　<description><![CDATA[jquery的核心库]]></description>

　　<url><![CDATA[http://docs.jquery.com]]></url>

　　</depend>

　　<depend isitem="false">

　　<name><![CDATA[jquery.ui.core]]></name>

　　<description><![CDATA[jquery.ui的核心库]]></description>

　　<url><![CDATA[http://jqueryui.com/demos]]></url>

　　</depend>

　　</relatives>

　　<overview>

　　<original><![CDATA[

　　进度条用来设计展现当前一个进度的完成百分比. 进度条的长度在满足默认父容器情况下可以通过CSS灵活改变.

　　该进度条是一个精确的精度条, 也就是说需要在系统能够保证精确改变当前完成状态时使用.如果不能计算到精确的完成百分比状态, 模糊的进度条(很快会加入)或spinner animation可以带来更好的用户体验

　　]]></original>

　　</overview>

　　<options>

　　<option name="value" default="0">

　　<types>

　　<type name="数字">

　　</type>

　　</types>

　　<description><![CDATA[用来设置进度条初始化时候的完成比.]]></description>

　　<demos>

　　<demo>

　　<comment><![CDATA[初始化]]></comment>

　　<code><![CDATA[$('.selector').progressbar({value: 37});]]></code>

　　</demo>

　　<demo>

　　<comment><![CDATA[获取属性值]]></comment>

　　<code><![CDATA[var value = $('.selector').progressbar('option', 'value');

　　]]></code>

　　</demo>

　　<demo>

　　<comment><![CDATA[设置属性值]]></comment>

　　<code><![CDATA[$('.selector').progressbar('option', 'value', 37);]]></code>

　　</demo>

　　</demos>

　　</option>

　　</options>

　　<events>

　　<event name="change">

　　<trigger><![CDATA[processbar的value发生改变]]></trigger>

　　<arguments>

　　<argument name="event">

　　<![CDATA[原生的浏览器事件.]]>

　　</argument>

　　<argument name="ui">

　　<![CDATA[JQuery的ui对象]]>

　　</argument>

　　</arguments>

　　<description><![CDATA[类型: progressbarchange]]></description>

　　<demos>

　　<demo>

　　<comment><![CDATA[初始化时设置事件]]></comment>

　　<code><![CDATA[

　　$("#progressbar").progressbar({

　　change: function(event, ui) {

　　//this等价于event.target

　　alert('又完成了1%');

　　}

　　});

　　]]></code>

　　</demo>

　　<demo>

　　<comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment>

　　<code><![CDATA[

　　$("#progressbar").bind('progressbarchange', function(event, ui) {

　　//this等价于event.target

　　alert('又完成了1%');

　　});

　　]]></code>

　　</demo>

　　</demos>

　　</event>

　　</events>

　　<methods>

　　<method name="destroy">

　　<description><![CDATA[完全移除一个进度条控件, 使其回退到该元素被初始化成进度条控件之前的状态.]]></description>

　　<demos>

　　<demo>

　　<code><![CDATA[$("#progressbar").progressbar('destroy');]]></code>

　　</demo>

　　</demos>

　　</method>

　　<method name="disable">

　　<description><![CDATA[将可进度条控件样式改变成为失效, 与enable对应.]]></description>

　　<demos>

　　<demo>

　　<code><![CDATA[$(".selector").progressbar('disable');]]></code>

　　</demo>

　　</demos>

　　</method>

　　<method name="enable">

　　<description><![CDATA[将进度条控件样式改变为允许, 与disable对应.]]></description>

　　<demos>

　　<demo>

　　<code><![CDATA[$(".selector").progressbar('enable');]]></code>

　　</demo>

　　</demos>

　　</method>

　　<method name="option">

　　<arguments>

　　<argument name="optionName " type="字符串"><![CDATA[选项一节中列举的所有选项名都可用]]></argument>

　　<argument name="value" type="任意"><![CDATA[该选项可以接受的任意数据值.]]></argument>

　　</arguments>

　　<description><![CDATA[获取或设置进度条控件的选项, 第二个参数是选项名, 第三个参数是值. 如果不指定值, 就是获取, 指定值, 就是设置. ]]></description>

　　<demos>

　　<demo>

　　<code><![CDATA[$(".selector").progressbar('option', optionName[, value]);]]></code>

　　</demo>

　　</demos>

　　</method>

　　<method name="value">

　　<description><![CDATA[获取或设置进度条控件的当前value值]]></description>

　　<demos>

　　<demo>

　　<code><![CDATA[$(".selector").progressbar('value'[, value]);]]></code>

　　</demo>

　　</demos>

　　</method>

　　</methods>

　　<theme><![CDATA[

　　普通的主题更改可以通过JQuery的在线主题定制方便的选定.

　　完全的自定义主题:ui.progressbar.css

　　ui-progressbar: 影响进度条容器样式

　　ui-progressbar-value: 影响进度条自身样式.

　　]]></theme>

　　<demos>

　　<demo>

　　<description><![CDATA[

　　译者注: 将下面的代码直接作为一个HTML文档运行, 就可以明白它是怎么工作的了.

　　]]></description>

　　<code><![CDATA[

　　<!doctype html>

　　<html lang="en">

　　<head>

　　<title>jQuery UI Progressbar - Default functionality</title>

　　<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />

　　<script type="text/javascript" src="../../jquery-1.3.2.js"></script>

　　<script type="text/javascript" src="../../ui/ui.core.js"></script>

　　<script type="text/javascript" src="../../ui/ui.progressbar.js"></script>

　　<link type="text/css" href="../demos.css" rel="stylesheet" />

　　<script type="text/javascript">

　　$(function() {

　　var current_value = 0;

　　change = function() {

　　$("#progressbar").progressbar('option', 'value', current_value);

　　current_value ++;

　　if(current_value <= 100) {

　　setTimeout('change()', 200);

　　}

　　};

　　progressbar_dynamic = function() {

　　progressbar_init();

　　change();

　　};

　　progressbar_init = function() {

　　$("#progressbar").progressbar({

　　value: current_value,

　　change: function(event, ui) {

　　$('#number').text($(this).progressbar('option', 'value'));

　　document.getElementById('number').style.position = 'relative';

　　document.getElementById('number').style.left = $(this).progressbar('option', 'value') * ($('.ui-progressbar').width() / 100) - 5;

　　}

　　});

　　};

　　progressbar_destroy = function() {

　　$("#progressbar").progressbar('destroy');

　　};

　　progressbar_disable = function() {

　　$("#progressbar").progressbar('disable');

　　};

　　progressbar_enable = function() {

　　$("#progressbar").progressbar('enable');

　　};

　　progressbar_option = function() {

　　var option_name = $('#option_name').val();

　　var option_value = $('#option_value').val();

　　if(option_value) {

　　$("#progressbar").progressbar('option', option_name, option_value);

　　} else {

　　$('#option_value').val($("#progressbar").progressbar('option', option_name));

　　}

　　};

　　progressbar_value = function() {

　　var value_value = $('#value_value').val();

　　if(value_value) {

　　$("#progressbar").progressbar('value', value_value);

　　} else {

　　$('#value_value').val($("#progressbar").progressbar('option', 'value'));

　　}

　　};

　　});

　　</script>

　　<style type="text/css">

　　input{height: 22px; margin: 1px 2px;}

　　input[type=button]{border: none; width: 80px;}

　　input[type=text]{border: 1px solid #BBBBBB; line-height: 20px;}

　　#number{width: 5px;}

　　</style>

　　</head>

　　<body>

　　<br /><br />

　　<div id="number"> </div>

　　<div id="progressbar"></div>

　　<br /><br />

　　<input type="button" value="init" onclick="progressbar_init();" />

　　<input type="button" value="destroy" onclick="progressbar_destroy();" />

　　<input type="button" value="disable" onclick="progressbar_disable();" />

　　<input type="button" value="enable" onclick="progressbar_enable();" />

　　<input type="button" value="dynamic" onclick="progressbar_dynamic();" />

　　<br />

　　<input type="button" value="option" onclick="progressbar_option();" />

　　选项名: <input type="text" id="option_name" />

　　选项值: <input type="text" id="option_value" />

　　<br />

　　<input type="button" value="value" onclick="progressbar_value();" />

　　完成度: <input type="text" id="value_value" />

　　<br />

　　<hr />

　　init: 初始化一个进度条

　　destroy: 销毁进度条

　　disable: 失效

　　enable: 有效

　　dynamic: 一个模拟的动态加载效果

　　option: 测试option方法

　　value: 测试value方法

　　</body>

　　</html>

　　]]></code>

　　</demo>

　　</demos>

　　<summarize><![CDATA[

　　progressbar是一个用value来控制显示进度条的插件, 最关键的地方在于value属性和value方法. 用自己的程序控制改变value以显示当前进度..

　　]]></summarize>

　　</translate>

　　</project>