jQuery按钮内置进度条

进度条最近变得很受欢迎,并且有大量的插件可以帮助你添加一个到您的网站。在本教程中,我们将代码不同的东西——建在进度条的按钮。　　他们将适合显示进展而通过AJAX提交表单或加载内容。他们还将使用CSS3风格和转换使其容易定制。assets/js/script.js$(document).ready(function(){ // Convert all the links with the progress-button class to // actual buttons with progress meters. // You need to call this function once the page is loaded. // If you add buttons later, you will need to call the function only for them. $('.progress-button').progressInitialize(); // Listen for clicks on the first three buttons, and start // the progress animations $('#submitButton').click(function(e){ e.preventDefault(); // This function will show a progress meter for // the specified amount of time $(this).progressTimed(2); }); $('#actionButton').click(function(e){ e.preventDefault(); $(this).progressTimed(2); }); $('#generateButton').one('click', function(e){ e.preventDefault(); // It can take a callback var button = $(this); button.progressTimed(3, function(){ // In this callback, you can set the href attribute of the button // to the URL of the generated file. For the demo, we will only // set up a new event listener that alerts a message. button.click(function(){ alert('Showing how a callback works!'); }); }); }); // Custom progress handling var controlButton = $('#controlButton'); controlButton.click(function(e){ e.preventDefault(); // You can optionally call the progressStart function. // It will simulate activity every 2 seconds if the // progress meter has not been incremented. controlButton.progressStart(); }); $('.command.increment').click(function(){ // Increment the progress bar with 10%. Pass a number // as an argument to increment with a different amount. controlButton.progressIncrement(); }); $('.command.set-to-1').click(function(){ // Set the progress meter to the specified percentage controlButton.progressSet(1); }); $('.command.set-to-50').click(function(){ controlButton.progressSet(50); }); $('.command.finish').click(function(){ // Set the progress meter to 100% and show the done text. controlButton.progressFinish(); });});// The progress meter functionality is available as a series of plugins.// You can put this code in a separate file if you wish to keep things tidy.(function($){ // Creating a number of jQuery plugins that you can use to // initialize and control the progress meters. $.fn.progressInitialize = function(){ // This function s the necessary markup for the progress meter // and sets up a few event listeners. // Loop through all the buttons: return this.each(function(){ var button = $(this), progress = 0; // Extract the data attributes into the options object. // If they are missing, they will receive default values. var options = $.extend({ type:'background-horizontal', loading: 'Loading..', finished: 'Done!' }, button.data()); // Add the data attributes if they are missing from the element. // They are used by our CSS code to show the messages button.attr({'data-loading': options.loading, 'data-finished': options.finished}); // Add the needed markup for the progress bar to the button var bar = $('').appendTo(button); // The progress event tells the button to update the progress bar button.on('progress', function(e, val, absolute, finish){ if(!button.hasClass('in-progress')){ // This is the first progress event for the button (or the // first after it has finished in a previous run). Re-initialize // the progress and remove some classes that may be left. bar.show(); progress = 0; button.removeClass('finished').addClass('in-progress') } // val, absolute and finish are event data passed by the progressIncrement // and progressSet methods that you can see near the end of this file. if(absolute){ progress = val; } else{ progress += val; } if(progress >= 100){ progress = 100; } if(finish){ button.removeClass('in-progress').addClass('finished'); bar.delay(500).fadeOut(function(){ // Trigger the custom progress-finish event button.trigger('progress-finish'); setProgress(0); }); } setProgress(progress); }); function setProgress(percentage){ bar.filter('.background-horizontal,.background-bar').width(percentage+'%'); bar.filter('.background-vertical').height(percentage+'%'); } }); }; // progressStart simulates activity on the progress meter. Call it first, // if the progress is going to take a long time to finish. $.fn.progressStart = function(){ var button = this.first(), last_progress = new Date().getTime(); if(button.hasClass('in-progress')){ // Don't start it a second time! return this; } button.on('progress', function(){ last_progress = new Date().getTime(); }); // Every half a second check whether the progress // has been incremented in the last two seconds var interval = window.setInterval(function(){ if( new Date().getTime() > 2000+last_progress){ // There has been no activity for two seconds. Increment the progress // bar a little bit to show that something is happening button.progressIncrement(5); } }, 500); button.on('progress-finish',function(){ window.clearInterval(interval); }); return button.progressIncrement(10); }; $.fn.progressFinish = function(){ return this.first().progressSet(100); }; $.fn.progressIncrement = function(val){ val = val || 10; var button = this.first(); button.trigger('progress',[val]) return this; }; $.fn.progressSet = function(val){ val = val || 10; var finish = false; if(val >= 100){ finish = true; } return this.first().trigger('progress',[val, true, finish]); }; // This function s a progress meter that // finishes in a specified amount of time. $.fn.progressTimed = function(seconds, cb){ var button = this.first(), bar = button.find('.tz-bar'); if(button.is('.in-progress')){ return this; } // Set a transition declaration for the duration of the meter. // CSS will do the job of animating the progress bar for us. bar.css('transition', seconds+'s linear'); button.progressSet(99); window.setTimeout(function(){ bar.css('transition',''); button.progressFinish(); if($.isFunction(cb)){ cb(); } }, seconds*1000); };})(jQuery);

在线演示        积分下载        6毛下载        砍两刀下载