JQuery中遮罩層blockUI外掛程式的用法

2021-05-27 17:25:32 字數 970 閱讀 1069

這個外掛程式的用法很簡單。阻止使用者與頁面互動： 

$.blockui();
自定義提示資訊： 

$.blockui();
自定義顯示樣式： 

$.blockui( });
解除對頁面的鎖定： 

$.unblockui();
如果要使用預設設定來同步所有的ajax請求動作，**如下： 

$().ajaxstart($.blockui).ajaxstop($.unblockui);
[1] 以同步傳輸的方式來使用xmlhttprequest物件會在請求結束前阻止使用者與瀏覽器的互動，直到請求結束。通常情況下，這不是一種好的使用者體驗。



遮罩層外掛程式例項
blockui的預設選項設定如下： 

// 可以使用以下**來自定義行為和樣式


$.blockui.defaults = ;


css: ,


// 設定遮罩層的樣式


overlaycss: ,


// 允許在ie6中縮放body元素。這會使較短的頁面看上去好一些


// 如果你不想body元素的高度被改變，請設定為disable


allowbodystretch: true,


// 預設情況下blockui會禁止tab導航


constraintabkey: true,


// fadeout時間單位為毫秒。設為0的話，在解除鎖定時不使用fadeout效果。 


fadeout: 400,


// 禁止在ff/linux上使用遮罩層樣式(由於透明度的效能問題)


};
改變blockui的設定非常簡單，有2種方式：

jquery實現遮罩層

jquery確實是個好東西，引用了它之後在頁面上寫指令碼方便多了，而且它的ui外掛程式特別豐富，你想要的效果幾乎它都幫你實現了，如果你不想用它的外掛程式，自己擴充套件也很方便。我自己寫了乙個測試遮罩層的頁面，開始總是在樣式裡設定好遮罩層的寬度和高度，可是如果顯示器的尺寸不一樣的話，這個遮罩層就會出現...

jQuery 遮罩層 浮動框

因為css不熟，實現總是搞不定ie6，所以結合用jquery了。1.遮罩層 指令碼 onevent function maskdiv css width body width maskdiv css height body heigth maskdiv show 要點 獲取body的大小。2.浮動框...

jQuery遮罩層的實現

遮罩層其實就是乙個佔據整個頁面的半透明效果的頁面元素，一般用div實現。頁面中實現遮罩層，無非就是為了讓使用者只能操作彈出視窗的內容，而不允許操作彈出視窗外的內容。在實現時，我使用了兩個div,乙個遮罩層id overlay，乙個是彈出窗id dialog。1 body 2 div id overl...