loading效果 加载中效果

loading效果 加载中效果

 点击test可以查看效果

演示

 

 

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