Board logo

標題: [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>
<!-- Hidden Message -->
<div id="welcome" class="welcome-style" style="display:none" >
<h3>歡迎來到 yourDomain.com !</h3>
</div>
<!-- Hidden Message -->


</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>
  
<!-- Hidden form -->
<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>
<!-- Hidden form -->

</body>
</html>




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