search

Home >Web Front-end >JS Tutorial >jquery.ui.progressbar Chinese documentation_jquery

jquery.ui.progressbar Chinese documentation_jquery

WBOY
WBOYOriginal
2016-05-16 18:40:571126browse
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
]]>







< 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格式文件。注意编码转换。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js mouse movement to display the effect code of the picture in the title_image special effectsNext article：js mouse movement to display the effect code of the picture in the title_image special effects

Related articles

See more