jQuery动画进度条插件
admin 13年前
Query widget: Progressbar这个控件默认是没有任何动画。下面这个教程将扩展这个插件，加动画变换进度。 <h3>Step 1. HTML</h3> <p>Here are all html of my demo</p> <h4>index.html</h4> <pre class="brush:html; toolbar: true; auto-links: false;"><!DOCTYPE html> <html lang="en"> <head> <link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"/> <link href="css/main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript" src="js/script.js"></script> <title>Animated jQuery progressbar | Script tutorials</title> </head> <body> <div class="example"> <h3><a href="http://www.script-tutorials.com/animated-jquery-progressbar/">Animated jQuery progressbar | Script Tutorials</a></h3> <div id="progress1"> <div class="percent"></div> <div class="pbar"></div> <div class="elapsed"></div> </div> <hr /> <div id="progress2"> <div class="percent"></div> <div class="pbar"></div> <div class="elapsed"></div> </div> <hr /> <div id="progress3"> <div class="percent"></div> <div class="pbar"></div> <div class="elapsed"></div> </div> </div> </body> </html></pre> <p>As you can see – I prepared 3 progressbars. Each progressbar will have own behaviour (using own properties).</p> <p>Also, make attention to linked jQuery libraries and styles. How I prepared this? Very easy, goto <a href="/misc/goto?guid=4958188268415976866" rel="nofollow">here</a>, select UI Core and single widget – Progressbar, then – just Download result. You will get package with all necessary libraries (jquery-1.6.2.min.js + jquery-ui-1.8.16.custom.min.js + jquery-ui-1.8.16.custom.css + related images).</p> <h3>Step 2. CSS</h3> <p>Here are our CSS styles.</p> css/main.css <pre class="brush:css; toolbar: true; auto-links: false;">body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0} .example{background:#FFF;width:650px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius: 3px;-webkit-border-radius: 3px} h3 {text-align:center} .pbar .ui-progressbar-value {display:block !important} .pbar {overflow: hidden} .percent {position:relative;text-align: right;} .elapsed {position:relative;text-align: right;}</pre> <h4></h4> <h3>Step 3. JS</h3> <p>In this JS we will write expanded plugin for jQuery with our new progressbar.</p> js/script.js <pre class="brush:javascript; toolbar: true; auto-links: false;">$(document).ready(function(){ jQuery.fn.anim_progressbar = function (aOptions) { // def values var iCms = 1000; var iMms = 60 * iCms; var iHms = 3600 * iCms; var iDms = 24 * 3600 * iCms; // def options var aDefOpts = { start: new Date(), // now finish: new Date().setTime(new Date().getTime() + 60 * iCms), // now + 60 sec interval: 100 } var aOpts = jQuery.extend(aDefOpts, aOptions); var vPb = this; // each progress bar return this.each( function() { var iDuration = aOpts.finish - aOpts.start; // calling original progressbar $(vPb).children('.pbar').progressbar(); // looping process var vInterval = setInterval( function(){ var iLeftMs = aOpts.finish - new Date(); // left time in MS var iElapsedMs = new Date() - aOpts.start, // elapsed time in MS iDays = parseInt(iLeftMs / iDms), // elapsed days iHours = parseInt((iLeftMs - (iDays * iDms)) / iHms), // elapsed hours iMin = parseInt((iLeftMs - (iDays * iDms) - (iHours * iHms)) / iMms), // elapsed minutes iSec = parseInt((iLeftMs - (iDays * iDms) - (iMin * iMms) - (iHours * iHms)) / iCms), // elapsed seconds iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0; // percentages // display current positions and progress $(vPb).children('.percent').html('<b>'+iPerc.toFixed(1)+'%</b>'); $(vPb).children('.elapsed').html(iDays+' days '+iHours+'h:'+iMin+'m:'+iSec+'s</b>'); $(vPb).children('.pbar').children('.ui-progressbar-value').css('width', iPerc+'%'); // in case of Finish if (iPerc >= 100) { clearInterval(vInterval); $(vPb).children('.percent').html('<b>100%</b>'); $(vPb).children('.elapsed').html('Finished'); } } ,aOpts.interval ); } ); } // default mode $('#progress1').anim_progressbar(); // from second #5 till 15 var iNow = new Date().setTime(new Date().getTime() + 5 * 1000); // now plus 5 secs var iEnd = new Date().setTime(new Date().getTime() + 15 * 1000); // now plus 15 secs $('#progress2').anim_progressbar({start: iNow, finish: iEnd, interval: 100}); // we will just set interval of updating to 1 sec $('#progress3').anim_progressbar({interval: 1000}); });</pre> <br /> <p>下载：<a href="/misc/goto?guid=4958188269152176427">http://www.script-tutorials.com/demos/129/source.zip</a></p> <p>在线示例：<a href="/misc/goto?guid=4958188269887273960">http://www.script-tutorials.com/demos/129/index.html</a></p>