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

兼容多浏览器的字幕特效Marquee的通用js类

Jul 20 Javascript

javaScript 读取和设置文档元素的样式属性

Apr 14 Javascript

jQuery EasyUI API 中文文档可调整尺寸

Sep 29 Javascript

左右悬浮可分组的网站QQ在线客服代码(可谓经典)

Dec 21 Javascript

JavaScript插件化开发教程（四）

Jan 27 Javascript

程序员必知35个jQuery 代码片段

Nov 05 Javascript

jQuery添加删除DOM元素方法详解

Jan 18 Javascript

基于jquery实现最简单的选项卡切换效果

May 08 Javascript

浅谈JavaScript变量的自动转换和语句

Jun 12 Javascript

requirejs + vue 项目搭建详解

Jun 16 Javascript

在Vue组件化中利用axios处理ajax请求的使用方法

Aug 25 Javascript

mpvue微信小程序多列选择器用法之省份城市选择的实现

Mar 07 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