iT邦幫忙

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

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

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

  • 分享至 

  • xImage
  •  

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
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
thevid
iT邦新手 5 級 ‧ 2018-12-25 14:32:49

覺得沒這麼好用
定位滿容易跑版的

我要留言

立即登入留言