jQuery Loading Overlay

簡介

這篇介紹一個 jQuery 的插件 (plugin)，功能是在下載文件或資料時，在螢幕或區塊中顯示遮罩 (overlay)；遮罩中可以有動畫或訊息，告訴使用者流覽器正在進行下載，電腦沒有掛掉，也沒有在偷懶。網路上有很多類似功能的插件，個人覺得這個最簡單，用起來也方便；但這個插件只能用在有支援 CSS3 的流覽器上。插件的下載點和詳細說明可以在 gasparesganga.com/labs/jquery-loading-overlay/ 網址中找到。這個插件的遮罩可以遮蔽整個流覽器的螢幕，或只遮蔽指定的元件；在遮蔽元件時，螢幕上可以有多個遮罩同時存在。當遮蔽的元件改變尺寸時，遮罩也會跟著改變尺寸。顯示的動畫可以替換或自訂，或使用 Font Awesome 裡的圖像，如果要使用 Font Awesome 裡的圖像，要記得在網頁中包含 Font Awesome 的樣式表。插件只有三個函式，但函式名稱並沒有遵照一般的命名規範，第一個字母小寫，後繼再用駝峰式 (camel case)，這點要留意：

$.LoadingOverlaySetup(options): 這個函式用來設定遮罩整體的各項屬性，透過這個函式設定的屬性會適用於所有後繼產生的遮罩。在隨後有各項屬性作用的介紹。
$.LoadingOverlay(action [,options]): 設定全螢幕遮罩。action 參數有兩個字串值： "show" 顯示全螢幕的遮罩，"hide" 則取消全螢幕遮罩。options 屬性為選項參數，設定的屬性只會適用於這次函式所產生的遮罩。
$(selector).LoadingOverlay(action [,options]): 設定指定元件的遮罩。selector 的語法和 CSS3 的選取器相容。action 和 options 參數的用法和上述函式相同。

options 的屬性如下：

color: 預設值為 "rgba(255, 255, 255, 0.8)"。賦予值設定遮罩的顏色及透明度。
custom: 預設值為 ""。賦予值可以是一個 DOM 元件或 jQuery 物件，這個物件會出現在遮罩的上面。設定為 "" （空字串）或 false 值時，此屬性無作用。
fade: 預設值為 true，淡入歷時 400 ms, 淡出歷時 200ms。賦予值設定淡入 (fadeIn) 及淡出 (fadeOut) 所經歷的時間。只賦予一個數值時，單位為 ms；淡入及淡出的時間都等於該數值。賦予一個數值陣列時，第一個陣列數值為淡入的歷時，第二個數值為淡出的歷時；例如：[400, 200]。賦予值也可為字串 "fast" (200ms) 或 "slow" (400ms)。賦予值為 0 或 false 時，此屬性無作用。
fontawesome: 預設值為 ""。賦予值為 Font Awesome 中圖像的 CSS 類別名，指定所要使用的圖像。賦予值為 "" 或 false 時，此屬性無作用。
image: 預設值為 "loading.gif"。賦予值為遮罩上動畫檔案的所在位置。賦予值為 "" 或 false 時，不使用動畫。
maxSize: 預設值為 "100px"。賦予值為數值或字串，設定動畫或圖像的最大尺寸，單位為 px。賦予值為 0 或 false 時，沒有限制最大尺寸。
minSzie: 預設值為 "20px"。賦予值為數值或字串，設定動畫或圖像的最大尺寸，單位為 px。賦予值為 0 或 false 時，沒有限制最小尺寸
resizeInterval: 預設值為 0。賦予值為數值，單位為 ms。賦予值設定當被遮蔽元件改變其尺寸時，對應遮罩改變尺寸的歷時。只有在元件被遮罩遮蔽時，同時會改變其尺寸時，才會用到這個設定。
size: 預設值為 "50%"。賦予值為數值，單位為 %，用來調整遮罩動畫或圖像的尺寸，遮罩動畫或圖像的大小不會受到元件尺寸的限制，但會所限於 maxSize 及 minSize 所設定的值。賦予值為 0 或 false 時，此屬性無作用。

範例

範例中產生三個遮罩，一個全螢幕的遮罩，兩個元件遮罩，兩個元件遮罩會同時出現在螢幕上。每隔 3 秒執行一個動作，直到最終的螢幕出現。出現全螢幕遮罩前，會先看到最終的螢幕出現一下。如果要解決這個問題，可以把顯示全螢幕的 javascript 程式碼移到 <body> 的下方。圖片中所展示的是當兩個元件遮罩同時出現在螢幕的情況。

CSS

<style>
    html {
        width: 100%;
        height: 100%;
        background-color: white;
    }
    body {
        margin: 0 auto;
        width: 960px;
        height: 100%;
        padding: 20px;
        background-color: antiquewhite;
    }
    .area {
        box-sizing: border-box;
        margin: 20px;
        width:100px;
        height:100px;
        border: 1px solid black;
        float: left;
    }
    .coral {
        background-color: coral;
    }
    .lightgreen {
        background-color: lightgreen;
    }
</style>

.area{} 設定兩個區塊的共通屬性。.coral{} 及 .lightgreen{} 各設定兩個區塊的顏色。

HTML

<body>
    
    
</body>

HTML 中建立兩個區塊。

Script

<script>
$(function(){
    $.LoadingOverlaySetup({
        image: "../images/loading.gif",
        color: "rgb(238, 238, 238, 1)",
        // custom: $("<div>", {text: "Loading..."}),
        maxSize: "50px",
        minSize: "20px"
        
    });
    $.LoadingOverlay("show");

    // Hide it after 3 seconds
    setTimeout(function(){
        $.LoadingOverlay("hide");
        setTimeout(function(){
            $("#area_1").LoadingOverlay("show", {size: 10});
            $("#area_2").LoadingOverlay("show", {color: "rgb(238, 238, 238, 0.5)"});
            setTimeout(function(){
                $("#area_1").LoadingOverlay("hide");
                $("#area_2").LoadingOverlay("hide");
            }, 3000);
        }, 3000);
    }, 3000);
});
</script>

第 3~10 行，先設定遮罩的整體屬性值。
第 17 行，設定 #area_1 區塊的動畫縮小為原來的 10%。size 的值可以賦予 10 或 "10%"。
第 18 行，設定 #area_2 區塊的遮罩透明度為 0.5, 顏色不變。

熊伯的外接硬碟

2016年5月19日星期四