jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化

標題: [jQuery] BlockUI Plugin - 功能完善的頁面、訊息遮罩 [打印本頁]

作者: wmh 時間: 2008-5-13 01:13 標題: [jQuery] BlockUI Plugin - 功能完善的頁面、訊息遮罩

jQuery BlockUI Plugin

http://www.malsup.com/jquery/block/

jQuery 必備的 Plugin 之一，讓你輕輕鬆鬆做出頁面遮罩的特效

範例一：全頁遮罩

先來個全頁的訊息遮罩吧：[jsg.example]<input type="button" value="全頁遮罩" id="demo1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
<script type="text/javascript" src="_lib/jquery/plugins/jquery.blockUI.1.33.js"></script>
<script type="text/javascript">
$j = jQuery.noConflict();
$j(document).ready(function() {
  $j('#demo1').click(function() {
$j.blockUI({ message: '<div style="padding: 5px"><img src="http://jsgears.com/_icons/others/snake_transparent.gif" /> 歡迎來到 jsGears.com !<br /><br />滑鼠再點一次關閉全頁遮罩。</div>'
});
setTimeout(function() {
   $j(document).one('click', function() {
      $j.unblockUI();
   });
}, 100);
  });
});
</script>
[/jsg.example]

使用相當簡單，首先引用 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 也可以很容易做到部份區塊的遮罩，例如這個範例是把目前這一塊文章的內文部份遮住：
[jsg.example]<input type="button" value="按我，把第一篇文章遮住！" id="demo2" />
<script type="text/javascript">
$j(document).ready(function() {
  $j("#demo2").click(function() {
$j('.postmessage:first').block({ message: null });
setTimeout(function() {
   $j(document).one('click', function() {
      $j('.postmessage:first').unblock();
   });
}, 100);
  });
});
</script>[/jsg.example]

和全頁遮罩最大的不同是，先以 jQuery 選取你要遮住的元素後，再用 block() 或 unblock() 處理，Function 名稱不太一樣喔，記得不要搞混了。直接看重點：

$('.postmessage:first').block({ message: null });

首先是用 jQuery 選取了 class 名稱為 postmessage 的第一個元素，然後 block()，這時帶入的參數是 message: null，表示這次不顯示任何訊息。相對的 unblock 用法如下，非常的簡單：

$('.postmessage:first').unblock();

範例三：更新遮罩內容

當遮罩內的訊息需要更新的話，也非常簡單，只需要再 block 一次就可以啦，記得不用先 unblock 再 block 喔，否則畫面閃啊閃的可不好看：[jsg.example]<input type="button" value="示範一下訊息的更新！" id="demo3" />
<script type="text/javascript">
$j(document).ready(function() {
  $j("#demo3").click(function() {
var countdown = 3;
$j.blockUI({ message: '3' });
var interval = setInterval(function() {
   if (--countdown <= 0) {
      $j.unblockUI();
      clearInterval(interval);
   } else
      $j.blockUI({ message: countdown });
}, 1000);
  });
});
</script>[/jsg.example]

程式碼如下：

$("#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 的官方首頁，還可以看到簡易處理表單的例子，以及完整的參數、選項等等。

作者: doris 時間: 2009-3-13 18:41 標題: .js的檔要去哪抓

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

作者: wmh 時間: 2009-3-14 15:43

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/

作者: eason 時間: 2009-8-19 13:05 標題: 畫面閃啊閃的哪裡有問題呢

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

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

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

作者: wmh 時間: 2009-8-19 13:06

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

你說的一閃一閃是哪一部份在閃呢？

作者: eason 時間: 2009-8-19 13:10 標題: 畫面會產生一閃一閃的程式位置

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

作者: wmh 時間: 2009-8-19 13:16

我看起來還好耶，你說得一閃一閃的是在顯示小視窗時，背景色在做漸變時一閃一閃的嗎？

作者: eason 時間: 2009-8-19 13:30

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

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

作者: wmh 時間: 2009-8-19 16:17

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

如果要避免的話，你可以在執行第二次 blockUI 時取消 fadeIn 即可：

$.blockUI({ message: "<h1>資料傳送中....</h1>", fadeIn: 0});

作者: eason 時間: 2009-8-21 17:19

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

感謝感謝

作者: eason 時間: 2009-9-1 11:19 標題: HOW 使用$.blockUI - 效果填寫登入資訊及傳送資料,接收回傳參數

參考了
http://www.malsup.com/jquery/block/#demos
Demos -1
不懂這各方式該如何去傳送登入的帳號密碼以及如何回傳的參數該如何取得
請問可否說明一下

$(document).ready(function() {
$('#demo1').click(function() {
      $.blockUI({ message: $('#loginForm') });

      setTimeout($.unblockUI, 2000);
});
});

.........
<button id="demo1">Run loginForm</button>
.........
<div id="loginForm" style="display:none">
         <p><label>Username:</label><input type="text" name="demo1" /></p>
         <p><label>Password:</label><input type="text" name="demo1" /></p>
      </div>

作者: ywchung 時間: 2010-5-28 17:50

請問版主~

如果的網頁有三個frameset(上, 左, 右) 我的submit在右邊, 顯示出來的資料會在左邊~
如果我在右frame做遮罩時, 只會出現在右邊, 要如何讓他出現在正中間呢???

作者: diddo 時間: 2013-1-13 02:38

測試成功！

留個記錄~
[full page code:]

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jq-blockUI</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
<script type="text/javascript">
// hide & show message- blockUI
$(document).ready(function() {
$('#demo1').click(function() {
$.blockUI({ message: $('#welcome') });
   setTimeout($.unblockUI, 3000);
  });
});
</script>
</head>

<body>

<h1>Block fullpage</h1>
<p>hide & show message- blockUI</p>
<p><input type="button" value="show message" id="demo1" /> </p>

<div id="welcome" class="welcome-style" style="display:none" >
<h3>歡迎來到 yourDomain.com !</h3>
</div>


</body>
</html>

作者: diddo 時間: 2013-1-13 02:59

本帖最後由 diddo 於 2013-1-13 03:04 編輯

re:eason－HOW 使用$.blockUI填寫登入資訊...
（雖然outdate了）,回應一下問題~
我是這樣寫，有錯歡迎指正！
＊只試了頁面，未測試數據～
[full page code:]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq-blockUI</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#demo1').click(function() {
      $.blockUI({ message: $('#loginForm') });
});
$('#btn_close').click(function() {
      $.unblockUI();
});
});
</script>
<style type="text/css">
.btn_close01 { display:block; float:right; background-color:#000000; color:#FFFFFF; width:30px; height:30px; font-size:28px;}
#form01{ background-color:#fff; padding:20px;}
  </style>
  </head>

<body>
<h3>hide & show Login Form-全頁遮罩</h3>

<p><input type="button" value="Login" id="demo1" /> </p>


<div id="loginForm" style="display:none" >
<div class="btn_close01" id="btn_close"> X </div>

<form id="form01" action="loginprocess.php" method="post">
<p><label>Username:</label><input type="text" name="name" /></p>
<p><label>Password:</label><input type="password" name="password" /></p>
<input type="submit" name="submit" value="Login" />
</form>
</div>


</body>
</html>

歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/)