首页>>Jquery文字>>loading效果 加载中效果(2014-01-23)

loading效果 加载中效果

 点击test可以查看效果

loading效果 加载中效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container wrapper" style="position: relative;">  
  2.   
  3. <h3>Default options:</h3>  
  4.   
  5. <!-- BASIC -->  
  6. <div id="basic"> <a name="basic"></a>  
  7. <div class="demo well">  
  8. <p class="alert">container</p>  
  9. <span class="btn">Test</span> </div>  
  10. <pre class="example syntax javascript"></pre>  
  11. <script>  
  12. $(function() {  
  13.   
  14.     // Action on Click  
  15.     $( "#basic .btn" ).click(function() {  
  16.   
  17.         $( this ).isLoading();  
  18.   
  19.         // Load data or whatever  
  20.         $( "#basic .demo p" ).removeClass("alert-success");  
  21.   
  22.         // Data Loaded, re-enable event  
  23.         setTimeout( function(){  
  24.   
  25.             // Deactivate the loading plugin  
  26.             $( "#basic .btn" ).isLoading( "hide" );  
  27.   
  28.             $( "#basic .demo p" ).html( "Content Loaded" )  
  29.                            .addClass("alert-success");   
  30.         }, 1000 );  
  31.     });  
  32.   
  33. });  
  34. </script>   
  35. </div>  
  36. <!--// BASIC -->   
  37.   
  38. <!-- LOAD IN DOM -->  
  39. <div id="load-in-div"> <a name="in-tag"></a>  
  40. <h3>Load in Tag</h3>  
  41. <div id="load1" class="demo well">  
  42. <p class="alert">container</p>  
  43. <span class="btn">Test</span> </div>  
  44. <pre class="example syntax javascript"></pre>  
  45. <script>  
  46. $(function() {  
  47.   
  48.     // Action on Click  
  49.     $( "#load-in-div .btn" ).click(function() {  
  50.   
  51.         // Setup Loading plugin  
  52.         $( "#load-in-div .demo p" ).removeClass("alert-success").isLoading({  
  53.             text:       "Loading",   
  54.             position:   "inside",  
  55.             disableOthers: [  
  56.                 $( "#load-in-div .btn" )  
  57.             ]  
  58.         });  
  59.   
  60.         // Re-enabling event  
  61.         setTimeout( function(){   
  62.             $( "#load-in-div .demo p" ).isLoading( "hide" )  
  63.                                  .html( "Content Loaded" )  
  64.                                  .addClass("alert-success");   
  65.         }, 1000 );  
  66.   
  67.     });  
  68.   
  69. });  
  70. </script>   
  71. </div>  
  72. <!--// LOAD IN DOM -->   
  73.   
  74. <!-- OVERLAY -->  
  75. <div id="load-overlay"> <a name="overlay"></a>  
  76. <h3>Overlay</h3>  
  77. <div class="demo well">  
  78. <p class="alert">container</p>  
  79. <span class="btn">Test</span> </div>  
  80. <pre class="example syntax javascript"></pre>  
  81. <script>  
  82. $(function() {  
  83.   
  84.     // Action on Click  
  85.     $( "#load-overlay .btn" ).click(function() {  
  86.   
  87.         $.isLoading({ text: "Loading" });  
  88.           
  89.         // Setup Loading plugin  
  90.         $( "#load-overlay .demo p" ).removeClass("alert-success");  
  91.   
  92.         // Re-enabling event  
  93.         setTimeout( function(){   
  94.             $.isLoading( "hide" );  
  95.             $( "#load-overlay .demo p" ).html( "Content Loaded" )  
  96.                                         .addClass("alert-success");   
  97.         }, 2000 );  
  98.   
  99.     });  
  100.   
  101. });  
  102. </script>   
  103. </div>  
  104. <!--// OVERLAY -->   
  105.   
  106. <!-- OVERLAY AN ELEMENT -->  
  107. <div id="load-overlay-elt"> <a name="overlay-tag"></a>  
  108. <h3>Overlay on Tag</h3>  
  109. <div class="demo well">  
  110. <p class="alert">container</p>  
  111. <span class="btn">Test</span> </div>  
  112. <pre class="example syntax javascript"></pre>  
  113. <script>  
  114. $(function() {  
  115.   
  116.     // Action on Click  
  117.     $( "#load-overlay-elt .btn" ).click(function() {  
  118.           
  119.         $( "#load-overlay-elt .demo" ).isLoading({  
  120.                             text:       "Loading",  
  121.                             position:   "overlay"  
  122.                         });  
  123.           
  124.         // Setup Loading plugin  
  125.         $( "#load-overlay-elt .demo p" ).removeClass("alert-success");  
  126.   
  127.         // Re-enabling event  
  128.         setTimeout( function(){   
  129.             $( "#load-overlay-elt .demo" ).isLoading( "hide" );  
  130.             $( "#load-overlay-elt .demo p" ).html( "Content Loaded" )  
  131.                                         .addClass("alert-success");   
  132.         }, 2000 );  
  133.   
  134.     });  
  135.   
  136. });  
  137. </script>   
  138. </div>  
  139. <!--// OVERLAY AN ELEMENT -->   
  140.   
  141. </div>  
  142.   
  143. <!-- syntax highlighter -->   
  144. <script src="./jquery.isloading.js" type="text/javascript"></script>   
  145.   
  146. <script>  
  147.             $(function() {  
  148.                 $( ".container script" ).each( function( i, e ) {;  
  149.                     $( e ).siblings("pre.example").html( $( e ).html().trim() ).wrapInner( "<code />" );  
  150.                 });  
  151.                 $.syntax();  
  152.             });  
  153.         </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_239.html