返回列表 發帖

[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!

本帖最後由 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>

TOP

測試成功!
留個記錄~
[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>

TOP

請問版主~

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

TOP

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>

TOP

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

感謝感謝

TOP

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

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

TOP

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

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

TOP

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

TOP

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

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

TOP

返回列表 回復 發帖