jquery.ui.progressbar中文文档

 这个是最早做出来的, 现在也改成xml格式了, 呵呵.

 

CSDN的博客中发布xml代码的时候, 不知道是因为我粘的代码太大了, 还是因为它自身的原因, 会导致浏览器死掉.....所以, 只好发普通文本咯....

 

 

<?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="lgg860911@yahoo.com.cn" 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">&nbsp;</div>
 <div id="progressbar"></div>
 <br /><br />
 <input type="button" value="init" οnclick="progressbar_init();" />
 &nbsp;&nbsp;
 <input type="button" value="destroy" οnclick="progressbar_destroy();" />
 &nbsp;&nbsp;
 <input type="button" value="disable" οnclick="progressbar_disable();" />
 &nbsp;&nbsp;
 <input type="button" value="enable" οnclick="progressbar_enable();" />
 &nbsp;&nbsp;
 <input type="button" value="dynamic" οnclick="progressbar_dynamic();" />
 <br />
 <input type="button" value="option" οnclick="progressbar_option();" />
 选项名: <input type="text" id="option_name" />
 选项值: <input type="text" id="option_value" />
 <br />
 <input type="button" value="value" οnclick="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>