jquery.ui.progressbar Chinese documentation

jquery.ui.progressbar Chinese documentation_jquery
WBOY
Release： 2016-05-16 18:40:57
Original
1125 people have browsed it
Copy code The code is as follows:
 
< ![CDATA[jquery.ui.core]]> 
 
< ;url> 
 
The progress bar is designed to show the completion percentage of the current progress. The length of the progress bar can be flexibly changed through CSS as long as it meets the default parent container. 
The The progress bar is a precise precision bar, which means it needs to be used when the system can ensure that the current completion status is accurately changed. If the precise completion percentage status cannot be calculated, a fuzzy progress bar (will be added soon) or spinner animation can be used. For a better user experience
]]> 
 
<![CDATA[$('.selector').progressbar({value: 37});]]> 
< ;/demo> 
 
<![CDATA[var value = $('.selector').progressbar('option', 'value'); <BR>]]> 
 
<![CDATA[$('.selector').progressbar('option', 'value', 37);]]> 
 
< arguments> 
 
< /comment> 
<![CDATA[ <BR>$("#progressbar").progressbar({ <BR>change: function(event, ui) { <BR>//This is equivalent at event.target <BR>alert('Another 1% completed'); <BR>} <BR>}); <BR>]]> 
 
 <![CDATA[ <BR>$("#progressbar").bind('progressbarchange', function(event, ui) { <BR>//This is equivalent to event.target <BR>alert ('Another 1% completed'); <BR>}); <BR>]]> 
 
 ;methods> 
 
<![CDATA[$("#progressbar").progressbar( 'destroy');]]> 
 
<![CDATA[$(".selector").progressbar('disable');]]> 
 
< ;/demos> 
 
<![CDATA[$(".selector").progressbar('enable' );]]> 
 
<![CDATA[$(".selector").progressbar('option' , optionName[, value]);]]> 
 
<![CDATA[$(".selector").progressbar('value'[, value]);]]> 
 
Ordinary theme changes can be customized through JQuery’s online theme Convenient selection. 
Completely customized theme: ui.progressbar.css 
ui-progressbar: affects the style of the progress bar container 
ui-progressbar-value: affects the style of the progress bar itself. 
] > Run the document and you can understand how it works. 
]]> 
<![CDATA[ <BR><!doctype html> <br> <html lang="en"> <br><head> <br><title>jQuery UI Progressbar - Default functionality</title> <br><link type="text/css" href=" ../../themes/base/ui.all.css" rel="stylesheet" /> <br><script type="text/javascript" src="../../jquery-1.3. 2.js"></script> <br><script type="text/javascript" src="../../ui/ui.core.js"></script> <br><script type="text/javascript" src="../../ui/ui.progressbar.js"></script> <br><link type="text/css" href= "../demos.css" rel="stylesheet" /> <br><script type="text/javascript"> <br>$(function() { <br>var current_value = 0; <br>change = function() { <br>$("#progressbar").progressbar('option', 'value', current_value); <br>current_value ; <br>if(current_value <= 100) { <br>setTimeout('change()', 200); <br>} <br>}; <br>progressbar_dynamic = function() { <br>progressbar_init(); <br>change(); <br>}; <br>progressbar_init = function() { <br>$("#progressbar").progressbar({ <br>value: current_value, <br>change: function(event, ui) { <br>$('#number' ).text($(this).progressbar('option', 'value')); <br>document.getElementById('number').style.position = 'relative'; <br>document.getElementById('number ').style.left = $(this).progressbar('option', 'value') * ($('.ui-progressbar').width() / 100) - 5; <br>} <br> }); <br>}; <br>progressbar_destroy = function() { <br>$("#progressbar").progressbar('destroy'); <br>}; <br>progressbar_disable = function() { <br>$("#progressbar").progressbar('disable'); <br>}; <br>progressbar_enable = function() { <br>$("#progressbar").progressbar('enable'); <br>}; <br>progressbar_option = function() { <br>var option_name = $('#option_name').val(); <br>var option_value = $('#option_value').val(); <br>if(option_value) { <br>$("#progressbar").progressbar('option', option_name, option_value); <br>} else { <br>$('#option_value').val($("#progressbar").progressbar('option', option_name)); <br>} <br>}; <br>progressbar_value = function() { <br>var value_value = $('#value_value').val(); <br>if(value_value) { <br>$("#progressbar").progressbar('value', value_value); <br>} else { <br>$('#value_value').val($("#progressbar").progressbar('option', 'value')); <br>} <br>}; <br>}); <br></script> <br><style type="text/css"> <br>input{height: 22px; margin: 1px 2px;} <br>input[type=button]{border: none; width: 80px;} <br>input[type=text]{border: 1px solid #BBBBBB; line-height: 20px;} <br>#number{width: 5px;} <br></style> <br></head> <br><body> <br><br /><br /> <br><div id="number"> </div> <br><div id="progressbar"></div> <br><br /><br /> <br><input type="button" value="init" onclick="progressbar_init();" /> <br>   <br><input type="button" value="destroy" onclick="progressbar_destroy();" /> <br>   <br><input type="button" value="disable" onclick="progressbar_disable();" /> <br>   <br><input type="button" value="enable" onclick="progressbar_enable();" /> <br>   <br><input type="button" value="dynamic" onclick="progressbar_dynamic();" /> <br><br /> <br><input type="button" value="option" onclick="progressbar_option();" /> <br>选项名: <input type="text" id="option_name" /> <br>选项值: <input type="text" id="option_value" /> <br><br /> <br><input type="button" value="value" onclick="progressbar_value();" /> <br>完成度: <input type="text" id="value_value" /> <br><br /> <br><hr /> <br>init: 初始化一个进度条 <br>destroy: 销毁进度条 <br>disable: 失效 <br>enable: 有效 <br>dynamic: 一个模拟的动态加载效果 <br>option: 测试option方法 <br>value: 测试value方法 <br></body> <br></html> <br>]]> 
 
progressbar是一个用value来控制显示进度条的插件, 最关键的地方在于value属性和value方法. 用自己的程序控制改变value以显示当前进度.. 
]]>
保存为xml格式文件。注意编码转换。