iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 11
1
Modern Web

30天學習30套前端技術(2018年)系列 第 11

[十分鐘學習] jquery-loading - 讀取中提示

example1

起源於為了在讀取或運作中,鎖住特定物件,並同時保持讓瀏覽者可以操作頁面其他部分

GitHub Star: 131
Javascripting Overall: -
瀏覽器: ChromeFirefoxIE8+
RWD: 支援
License: MIT


《安裝》

  • CDN

    <!-- jQuery v1.9.1 -->
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- jquery-loading v1.3.0 -->
    <link href="https://cdn.jsdelivr.net/npm/jquery-easy-loading@1.3.0/dist/jquery.loading.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/jquery-easy-loading@1.3.0/dist/jquery.loading.min.js"></script>
    
  • npm

    $ npm install --save jquery-easy-loading
    
  • Bower

    $ bower install jquery-loading
    

《範例》

  • 網頁讀取中

    <script>
    	$( "body" ).loading(); // 開始
    	$( "body" ).loading( "stop" ) // 停止
    </script>
    

《延伸》

  1. jquery-loading
  2. CarlosBonetti/jquery-loading: Easily add and manipulate loading states of any element on the page.

上一篇
[十分鐘學習] highlight.js - 程式碼上色外掛
下一篇
[十分鐘學習] jQuery Validation - 表單驗證工具
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言