1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>jQuery showLoading example</title> <link href="css/showLoading.css" rel="stylesheet" media="screen" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery.showLoading.js"></script> <style type="text/css"> a { color: blue; cursor: pointer; text-decoration: underline; } div.instructions_container { float: left; width: 350px; margin-right: 50px; } div#activity_pane { float: left; width: 350px; height: 200px; border: 1px solid #CCCCCC; background-color: #EEEEEE; padding-top: 200px; text-align: center; } div.example_links .link_category { margin-bottom: 15px; } .loading-indicator-bars { background-image: url('images/loading-bars.gif'); width: 150px; } </style> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('a.loading-ajax').click( function() { /* $('#activity_pane').showLoading({ 'afterShow' : function() { setTimeout("jQuery('#activity_pane').hideLoading()", 1000); } }); */ $('#activity_pane').showLoading(); } ); } ); </script> </head> <body> <div class="link_category"> <div class="link"> <a class="loading-ajax">simulate 1-second Ajax load</a> </div> </div> <div id="activity_pane"> Here is where we will load something via ajax. <br /> This container <b>must</b> have an id attribute </div> <div style="clear: both;"></div> </body> </html>
很好理解的
下载的插件路径在
http://download.csdn.net/detail/li53957105/4489460