<?xml version="1.0" encoding="UTF-8" ?>
<!--
注意事項(xiàng):
1. 以下格式為既定的格式, 為了統(tǒng)一性, 需要修改時(shí), 大家商議
2. 格式中的所有項(xiàng)都是選填, 如果沒(méi)有, 不寫就是了.
3. 由于是XML格式的, 所以, 所有標(biāo)簽中間填寫文本的地方(最重要是代碼, 一定要加, 不然以后解析有困難), 都需要加上<![CDATA[這中間寫內(nèi)容]]>
4. 翻譯過(guò)程中, 一塊對(duì)應(yīng)的是一個(gè)<translate />標(biāo)簽.
5. 希望大家工作愉快.
-->
<project>
<translate item="progressbar" version="7.1">
<translators>
<translator nickname="selfimpr" name="雷果國(guó)" 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的核心庫(kù)]]></description>
<url><![CDATA[http://docs.jquery.com]]></url>
</depend>
<depend isitem="false">
<name><![CDATA[jquery.ui.core]]></name>
<description><![CDATA[jquery.ui的核心庫(kù)]]></description>
<url><![CDATA[http://jqueryui.com/demos]]></url>
</depend>
</relatives>
<overview>
<original><![CDATA[
進(jìn)度條用來(lái)設(shè)計(jì)展現(xiàn)當(dāng)前一個(gè)進(jìn)度的完成百分比. 進(jìn)度條的長(zhǎng)度在滿足默認(rèn)父容器情況下可以通過(guò)CSS靈活改變.
該進(jìn)度條是一個(gè)精確的精度條, 也就是說(shuō)需要在系統(tǒng)能夠保證精確改變當(dāng)前完成狀態(tài)時(shí)使用.如果不能計(jì)算到精確的完成百分比狀態(tài), 模糊的進(jìn)度條(很快會(huì)加入)或spinner animation可以帶來(lái)更好的用戶體驗(yàn)
]]></original>
</overview>
<options>
<option name="value" default="0">
<types>
<type name="數(shù)字">
</type>
</types>
<description><![CDATA[用來(lái)設(shè)置進(jìn)度條初始化時(shí)候的完成比.]]></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[設(shè)置屬性值]]></comment>
<code><![CDATA[$('.selector').progressbar('option', 'value', 37);]]></code>
</demo>
</demos>
</option>
</options>
<events>
<event name="change">
<trigger><![CDATA[processbar的value發(fā)生改變]]></trigger>
<arguments>
<argument name="event">
<![CDATA[原生的瀏覽器事件.]]>
</argument>
<argument name="ui">
<![CDATA[JQuery的ui對(duì)象]]>
</argument>
</arguments>
<description><![CDATA[類型: progressbarchange]]></description>
<demos>
<demo>
<comment><![CDATA[初始化時(shí)設(shè)置事件]]></comment>
<code><![CDATA[
$("#progressbar").progressbar({
change: function(event, ui) {
//this等價(jià)于event.target
alert('又完成了1%');
}
});
]]></code>
</demo>
<demo>
<comment><![CDATA[動(dòng)態(tài)的綁定事件. 動(dòng)態(tài)綁定時(shí)候, 使用的事件名就是事件的類型.]]></comment>
<code><![CDATA[
$("#progressbar").bind('progressbarchange', function(event, ui) {
//this等價(jià)于event.target
alert('又完成了1%');
});
]]></code>
</demo>
</demos>
</event>
</events>
<methods>
<method name="destroy">
<description><![CDATA[完全移除一個(gè)進(jìn)度條控件, 使其回退到該元素被初始化成進(jìn)度條控件之前的狀態(tài).]]></description>
<demos>
<demo>
<code><![CDATA[$("#progressbar").progressbar('destroy');]]></code>
</demo>
</demos>
</method>
<method name="disable">
<description><![CDATA[將可進(jìn)度條控件樣式改變成為失效, 與enable對(duì)應(yīng).]]></description>
<demos>
<demo>
<code><![CDATA[$(".selector").progressbar('disable');]]></code>
</demo>
</demos>
</method>
<method name="enable">
<description><![CDATA[將進(jìn)度條控件樣式改變?yōu)樵试S, 與disable對(duì)應(yīng).]]></description>
<demos>
<demo>
<code><![CDATA[$(".selector").progressbar('enable');]]></code>
</demo>
</demos>
</method>
<method name="option">
<arguments>
<argument name="optionName " type="字符串"><![CDATA[選項(xiàng)一節(jié)中列舉的所有選項(xiàng)名都可用]]></argument>
<argument name="value" type="任意"><![CDATA[該選項(xiàng)可以接受的任意數(shù)據(jù)值.]]></argument>
</arguments>
<description><![CDATA[獲取或設(shè)置進(jìn)度條控件的選項(xiàng), 第二個(gè)參數(shù)是選項(xiàng)名, 第三個(gè)參數(shù)是值. 如果不指定值, 就是獲取, 指定值, 就是設(shè)置. ]]></description>
<demos>
<demo>
<code><![CDATA[$(".selector").progressbar('option', optionName[, value]);]]></code>
</demo>
</demos>
</method>
<method name="value">
<description><![CDATA[獲取或設(shè)置進(jìn)度條控件的當(dāng)前value值]]></description>
<demos>
<demo>
<code><![CDATA[$(".selector").progressbar('value'[, value]);]]></code>
</demo>
</demos>
</method>
</methods>
<theme><![CDATA[
普通的主題更改可以通過(guò)JQuery的在線主題定制方便的選定.
完全的自定義主題:ui.progressbar.css
ui-progressbar: 影響進(jìn)度條容器樣式
ui-progressbar-value: 影響進(jìn)度條自身樣式.
]]></theme>
<demos>
<demo>
<description><![CDATA[
譯者注: 將下面的代碼直接作為一個(gè)HTML文檔運(yùn)行, 就可以明白它是怎么工作的了.
]]></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" onclick="progressbar_init();" />
&nbsp;&nbsp;
<input type="button" value="destroy" onclick="progressbar_destroy();" />
&nbsp;&nbsp;
<input type="button" value="disable" onclick="progressbar_disable();" />
&nbsp;&nbsp;
<input type="button" value="enable" onclick="progressbar_enable();" />
&nbsp;&nbsp;
<input type="button" value="dynamic" onclick="progressbar_dynamic();" />
<br />
<input type="button" value="option" onclick="progressbar_option();" />
選項(xiàng)名: <input type="text" id="option_name" />
選項(xiàng)值: <input type="text" id="option_value" />
<br />
<input type="button" value="value" onclick="progressbar_value();" />
完成度: <input type="text" id="value_value" />
<br />
<hr />
init: 初始化一個(gè)進(jìn)度條
destroy: 銷毀進(jìn)度條
disable: 失效
enable: 有效
dynamic: 一個(gè)模擬的動(dòng)態(tài)加載效果
option: 測(cè)試option方法
value: 測(cè)試value方法
</body>
</html>
]]></code>
</demo>
</demos>
<summarize><![CDATA[
progressbar是一個(gè)用value來(lái)控制顯示進(jìn)度條的插件, 最關(guān)鍵的地方在于value屬性和value方法. 用自己的程序控制改變value以顯示當(dāng)前進(jìn)度..
]]></summarize>
</translate>
</project>