JQuery Loadmask是一個可定制、可重用的 jQuery 插件,用于為元素加載遮罩層。它的主要功能是在頁面加載數據時,為指定的元素添加一個遮罩層,以提示用戶數據正在加載,并防止用戶重復點擊。
使用jQuery Loadmask插件的步驟非常簡單,首先需要在頁面中引入jQuery庫與loadmask插件:
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-loadmask/dist/jquery.loadmask.min.js"></script>
然后在需要添加遮罩層的元素上調用 loadmask 方法:
$(element).loadmask();
這個參數可以是一個選擇器字符串,也可以是一個jQuery對象或原生 DOM 元素。使用這個方法可以為指定的元素添加一個簡單的遮罩層。
同時,jQuery Loadmask插件還支持定制化的配置,可以通過傳遞一個選項對象來自定義遮罩層的樣式和行為。例如:
$(element).loadmask({
maxSize: '50%',
maskOpacity: 0.6,
zIndex: 10000,
spinner: {
lines: 12,
length: 10,
width: 4,
radius: 10
},
onLoad: function() {
// 可以在此處添加遮罩層加載完成后的回調函數
}
});
上述代碼中,我們設置了遮罩層的最大尺寸為元素的50%,透明度為0.6,層級為10000,加載時顯示12條線、每條線長10px、寬度為4px、半徑為10px的一個“spinner”(旋轉動畫),并在加載完成后執行了一個自定義的回調函數。
除此之外,jQuery Loadmask插件還支持多語言(內置中英文,默認根據瀏覽器語言自動切換)、動態更新遮罩層信息等一系列功能。如果你正在尋求一個簡單又強大的遮罩層插件,那么它絕對是一個值得嘗試的選擇。