【 tulaoshi.com - Web开发 】
代码如下:
？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
titlejQuery 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
保存为xml格式文件。注意编码转换。
