首页>>Jquery文字>>jQuery 点击等待 点击显示loading(2014-01-04)

jQuery 点击等待 点击显示loading

jQuery 点击等待 点击显示loading
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="demo-basic">  
  2.   <button type="button" class="waiting">► start waiting</button>  
  3.   <button type="button" class="waiting-done">■ waiting done</button>  
  4.     <pre>  
  5. // Default behaviour is a loading spinner positioned absolute, centered and with an overlay.  
  6.   
  7. $('#demo-basic .content').waiting();  
  8.     </pre>  
  9.     <div class="content">  
  10.       这个内容会被覆盖  
  11.     </div>  
  12.   </div>  
  13.   <script type="text/javascript">  
  14.     $('#demo-basic button.waiting').on('click', function () {  
  15.       $(this).siblings('.content').waiting();  
  16.     });  
  17.   </script>  
  18.   
  19.   <div id="demo-position">  
  20.     <button type="button" class="waiting">► start waiting</button>  
  21.     <button type="button" class="waiting-done">■ waiting done</button>  
  22.     <pre>  
  23. // You can position the indicator/spinner by setting position to one of the following values:  
  24. // 'center',  
  25. // 'top left', 'top center', 'top right',  
  26. // 'center left', 'center right',  
  27. // 'bottom left', 'bottom center' or 'bottom right'  
  28. // If you don't want to use the predefined CSS classes you can set position to 'custom',  
  29. // in that case you have to take care of the CSS yourself.  
  30.   
  31. $('#demo-position .content').waiting({ position: 'top left' });  
  32.     </pre>  
  33.     <div class="content">  
  34.     <Br><Br>  
  35.       自定义位置  
  36.       <Br><Br><Br>  
  37.       顶部左侧<Br><Br>  
  38.     </div>  
  39.   </div>  
  40.   <script type="text/javascript">  
  41.     $('#demo-position button.waiting').on('click', function () {  
  42.       $(this).siblings('.content').waiting({ position: 'top left' });  
  43.     });  
  44.   </script>  
  45.   
  46.   
  47.   <div id="demo-overlay-false">  
  48.     <button type="button" class="waiting">► start waiting</button>  
  49.     <button type="button" class="waiting-done">■ waiting done</button>  
  50.     <pre>  
  51. // You can simply append the indicator by setting overlay to false  
  52.   
  53. $('#demo-overlay-false .content').waiting({ overlay: false });  
  54.     </pre>  
  55.     <div class="content">  
  56.       不覆盖本内容  
  57.     </div>  
  58.   </div>  
  59.   <script type="text/javascript">  
  60.     $('#demo-overlay-false button.waiting').on('click', function () {  
  61.       $(this).siblings('.content').waiting({ overlay: false });  
  62.     });  
  63.   </script>  
  64.   
  65.   
  66.   <div id="demo-fixed">  
  67.     <button type="button" class="waiting">► start waiting</button>  
  68.     <button type="button" class="waiting-done">■ waiting done</button>  
  69.     <pre>  
  70. // By setting fixed to true you can expand the overlay over the whole page  
  71.   
  72. $('#demo-overlay-false .content').waiting({ fixed: true });  
  73.     </pre>  
  74.     <div class="content">  
  75.       自动退出loading  
  76.     </div>  
  77.   </div>  
  78.   <script type="text/javascript">  
  79.     $('#demo-fixed button.waiting').on('click', function () {  
  80.       var that = this;  
  81.       $(this).siblings('.content').waiting({ fixed: true });  
  82.       setTimeout(function() {  
  83.         $(that).siblings('button').click();  
  84.       }, 3000);  
  85.     });  
  86.   </script>  

 


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