复制代码 代码如下:
该进度条是一个精确的精度条, 也就是说需要在系统能够保证精确改变当前完成状态时使用.如果不能计算到精确的完成百分比状态, 模糊的进度条(很快会加入)或spinner animation可以带来更好的用户体验
]]>
$("#progressbar").progressbar({ <br>change: function(event, ui) { <br>//this等价于event.target <br>alert('又完成了1%'); <br>} <br>}); <br>]]> $("#progressbar").bind('progressbarchange', function(event, ui) { <br>//this等价于event.target <br>alert('又完成了1%'); <br>}); <br>]]> 完全的自定义主题:ui.progressbar.css
ui-progressbar: 影响进度条容器样式
ui-progressbar-value: 影响进度条自身样式.
]]>
]]>
<br><br><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><br><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><br><br>]]> ]]>
保存为xml格式文件。注意编码转换。
