返回列表 發帖

[jQuery] BlockUI Plugin - 功能完善的頁面、訊息遮罩

jQuery BlockUI Plugin
http://www.malsup.com/jquery/block/
jQuery 必備的 Plugin 之一,讓你輕輕鬆鬆做出頁面遮罩的特效

範例一:全頁遮罩

先來個全頁的訊息遮罩吧:

使用相當簡單,首先引用 jQuery 和 BlockUI:
<input type="button" value="全頁遮罩" id="demo1" />
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>
JavaScript 的部份我們直接看重點:
$.blockUI({ message: '<div>歡迎來到 jsGears.com !</div>'});
就這麼簡單,你可以把 $.blockUI() 綁定在特定的事件,例如按下按鈕的時候,或者向 Server 端發出 HttpRequest 之前。當你要把遮罩取消時,也只需要簡單的一行:
$.unblockUI();
這樣就取消了遮罩,並且將滑鼠游標恢復正常。


範例二:區塊遮罩

除了整頁的遮罩,BlockUI 也可以很容易做到部份區塊的遮罩,例如這個範例是把目前這一塊文章的內文部份遮住:


和全頁遮罩最大的不同是,先以 jQuery 選取你要遮住的元素後,再用 block() 或 unblock() 處理,Function 名稱不太一樣喔,記得不要搞混了。直接看重點:
$('.postmessage:first').block({ message: null });
首先是用 jQuery 選取了 class 名稱為 postmessage 的第一個元素,然後 block(),這時帶入的參數是 message: null,表示這次不顯示任何訊息。相對的 unblock 用法如下,非常的簡單:
$('.postmessage:first').unblock();

範例三:更新遮罩內容

當遮罩內的訊息需要更新的話,也非常簡單,只需要再 block 一次就可以啦,記得不用先 unblock 再 block 喔,否則畫面閃啊閃的可不好看:

程式碼如下:
$("#demo3").click(function() {
  var countdown = 3;
  $.blockUI({ message: '3' });
  var interval = setInterval(function() {
    if (--countdown <= 0) {
      $.unblockUI();
      clearInterval(interval);
    } else {
      $.blockUI({ message: countdown });
    }
  }, 1000);
});

更多的範例

就在 BlockUI 的官方首頁,還可以看到簡易處理表單的例子,以及完整的參數、選項等等。
To infinity and beyond!

.js的檔要去哪抓

內容引用的jquery-1.2.3.pack.js和jquery.blockUI.js這兩個檔要去哪抓?

TOP

jquery-1.2.3.pack.js 是 jQuery 的 js 檔,目前最新版本是 v1.3.2,你可以從 jQuery 官方網站下載,或是考慮直接引用 Google AJAX Libraries API,使用方法可參考:
http://jsgears.com/thread-79-1-1.html

jquery.blockUI.js 就是本文所介紹的 jQuery plugin,請直接到該網頁下載:
http://www.malsup.com/jquery/block/
To infinity and beyond!

TOP

畫面閃啊閃的 哪裡有問題呢

我測試了
BlockUI 的官方首頁 的Simple Modal Dialog Example 例子
他不會產生畫面閃啊閃的
但是我COPY完整語法到我的伺服器上
畫面卻會產生一閃一閃的
http://www.ibaer.com/eason/block/index.php

請教一下
跟伺服器有關嗎
還是哪裡需要設定呢

[ 本帖最後由 eason 於 2009-8-19 13:08 編輯 ]

TOP

這些程式都是跑在 client 端的,和 server 端不太有關係,除非 server 端無法正確送出正確的程式碼。

你說的一閃一閃是哪一部份在閃呢?
To infinity and beyond!

TOP

畫面會產生一閃一閃的程式位置

畫面卻會產生一閃一閃的
http://www.ibaer.com/eason/block/index.php

TOP

我看起來還好耶,你說得一閃一閃的是在顯示小視窗時,背景色在做漸變時一閃一閃的嗎?
To infinity and beyond!

TOP

是在我點YES 後
程式會再呼叫一次 $.blockUI({ message: "<h1>資料傳送中....</h1>" });
畫面會先變成白色 然後才又遮罩的模式

官方網站 我點YES後 感覺不到

TOP

官方的應該也有,只是官方網頁的背景比較灰一點,比較沒感覺。

如果要避免的話,你可以在執行第二次 blockUI 時取消 fadeIn 即可:
$.blockUI({ message: "<h1>資料傳送中....</h1>", fadeIn: 0}); 
To infinity and beyond!

TOP

搞定了喔
加了fadeIn: 0
測試就沒問題了喔

感謝感謝

TOP

返回列表 回復 發帖