编程 Javascript

jquery.ui.progressbar 中文文档

Posted in Javascript onNovember 26, 2009

<?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>

保存为xml格式文件。注意编码转换。

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基于jQuery判断两个元素是否有重叠部分的代码

Jul 25 Javascript

得到jQuery detach()后节点中的某个值实现代码

Feb 05 Javascript

鼠标经过显示二级菜单js特效

Aug 13 Javascript

JavaScript获取伪元素(Pseudo-Element)属性的方法技巧

Mar 13 Javascript

JavaScript获取css行间样式,内连样式和外链样式的简单方法

Jul 18 Javascript

Bootstrap和Angularjs配合自制弹框的实例代码

Aug 24 Javascript

Vue 实用分页paging实例代码

Apr 12 Javascript

vue init失败简单解决方法(终极版)

Dec 22 Javascript

微信小程序progress组件使用详解

Jan 31 Javascript

AngularJS上传文件的示例代码

Nov 10 Javascript

JavaScript实现轮播图效果代码实例

Sep 28 Javascript

js动态生成表格(节点操作)

Jan 12 Javascript

javascript 面向对象继承

Nov 26 #Javascript

javascript 获取元素位置的快速方法 getBoundingClientRect()

Nov 26 #Javascript

javascript或asp实现的判断身份证号码是否正确两种验证方法

Nov 26 #Javascript

Ext grid 添加右击菜单

Nov 26 #Javascript

JS 判断undefined的实现代码

Nov 26 #Javascript

为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能

Nov 24 #Javascript

为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能

Nov 24 #Javascript