jQuery 点击等待 点击显示loading

jQuery 点击等待 点击显示loading

 

演示

 

 

XML/HTML Code

<div id="demo-basic">
  <button type="button" class="waiting">► start waiting</button>
  <button type="button" class="waiting-done">■ waiting done</button>
    <pre>
// Default behaviour is a loading spinner positioned absolute, centered and with an overlay.

$('#demo-basic .content').waiting();
    </pre>
    <div class="content">
      这个内容会被覆盖
    </div>
  </div>
  <script type="text/javascript">
    $('#demo-basic button.waiting').on('click', function () {
      $(this).siblings('.content').waiting();
    });
  </script>

  <div id="demo-position">
    <button type="button" class="waiting">► start waiting</button>
    <button type="button" class="waiting-done">■ waiting done</button>
    <pre>
// You can position the indicator/spinner by setting position to one of the following values:
// 'center',
// 'top left', 'top center', 'top right',
// 'center left', 'center right',
// 'bottom left', 'bottom center' or 'bottom right'
// If you don't want to use the predefined CSS classes you can set position to 'custom',
// in that case you have to take care of the CSS yourself.

$('#demo-position .content').waiting({ position: 'top left' });
    </pre>
    <div class="content">
    <Br><Br>
      自定义位置
      <Br><Br><Br>
      顶部左侧<Br><Br>
    </div>
  </div>
  <script type="text/javascript">
    $('#demo-position button.waiting').on('click', function () {
      $(this).siblings('.content').waiting({ position: 'top left' });
    });
  </script>


  <div id="demo-overlay-false">
    <button type="button" class="waiting">► start waiting</button>
    <button type="button" class="waiting-done">■ waiting done</button>
    <pre>
// You can simply append the indicator by setting overlay to false

$('#demo-overlay-false .content').waiting({ overlay: false });
    </pre>
    <div class="content">
      不覆盖本内容
    </div>
  </div>
  <script type="text/javascript">
    $('#demo-overlay-false button.waiting').on('click', function () {
      $(this).siblings('.content').waiting({ overlay: false });
    });
  </script>


  <div id="demo-fixed">
    <button type="button" class="waiting">► start waiting</button>
    <button type="button" class="waiting-done">■ waiting done</button>
    <pre>
// By setting fixed to true you can expand the overlay over the whole page

$('#demo-overlay-false .content').waiting({ fixed: true });
    </pre>
    <div class="content">
      自动退出loading
    </div>
  </div>
  <script type="text/javascript">
    $('#demo-fixed button.waiting').on('click', function () {
      var that = this;
      $(this).siblings('.content').waiting({ fixed: true });
      setTimeout(function() {
        $(that).siblings('button').click();
      }, 3000);
    });
  </script>

 

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