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 颜色选择器(兼容firefox)
Mar 05 Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
Yarn的安装与使用详细介绍
Oct 25 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
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
You might like
PHP一些有意思的小区别
2006/12/06 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
PHP实现文件上传与下载
2020/08/28 PHP
图片onload事件触发问题解决方法
2011/07/31 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
python中黄金分割法实现方法
2015/05/06 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
python写入已存在的excel数据实例
2018/05/03 Python
python保存数据到本地文件的方法
2018/06/23 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
简单的项目建议书模板
2014/03/12 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
世界环境日活动总结
2015/02/11 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers
java实现web实时消息推送的七种方案
2022/07/23 Java/Android