jquery.ui.progressbar 中文文档

156 阅读 0 评论 103 点赞

我是靠谱客的博主个性大侠，最近开发中收集的这篇文章主要介绍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="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"> </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> 