编程 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 相关文章推荐

js split 的用法和定义 js split分割字符串成数组的实例代码

May 13 Javascript

控制文字内容的显示与隐藏示例

Jun 11 Javascript

coffeescript使用的方式汇总

Aug 05 Javascript

jQuery 1.9.1源码分析系列（十）事件系统之主动触发事件和模拟冒泡处理

Nov 24 Javascript

JS组件Bootstrap Select2使用方法详解

Apr 17 Javascript

JavaScript中split与join函数的进阶使用技巧

May 03 Javascript

JavaScript实现星星等级评价功能

Mar 22 Javascript

详解Vue路由开启keep-alive时的注意点

Jun 20 Javascript

React Native使用Modal自定义分享界面的示例代码

Oct 31 Javascript

微信小程序实现的点击按钮弹出底部上拉菜单功能示例

Dec 20 Javascript

vue实现动态按钮功能

May 13 Javascript

layui在form表单页面通过Validform加入简单验证的方法

Sep 06 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