[jQuery] BlockUI Plugin - 功能完善的頁面、訊息遮罩
[img]http://jsgears.com/_icons/famfamfam/folder.gif[/img] jQuery BlockUI Plugin[img]http://jsgears.com/_icons/famfamfam/icon_home.gif[/img] [url]http://www.malsup.com/jquery/block/[/url]
[img]http://jsgears.com/_icons/famfamfam/comment.gif[/img] jQuery 必備的 Plugin 之一,讓你輕輕鬆鬆做出頁面遮罩的特效
[color=Navy][size=4][b]範例一:全頁遮罩[/b][/size][/color]
先來個全頁的訊息遮罩吧:[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:
[code html]
<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>
[/code]
JavaScript 的部份我們直接看重點:
[code js]
$.blockUI({ message: '<div>歡迎來到 jsGears.com !</div>'});
[/code]
就這麼簡單,你可以把 $.blockUI() 綁定在特定的事件,例如按下按鈕的時候,或者向 Server 端發出 HttpRequest 之前。當你要把遮罩取消時,也只需要簡單的一行:
[code js]
$.unblockUI();
[/code]
這樣就取消了遮罩,並且將滑鼠游標恢復正常。
[color=Navy][size=4][b]範例二:區塊遮罩[/b][/size][/color]
除了整頁的遮罩,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 名稱不太一樣喔,記得不要搞混了。直接看重點:
[code js]
$('.postmessage:first').block({ message: null });
[/code]
首先是用 jQuery 選取了 class 名稱為 postmessage 的第一個元素,然後 block(),這時帶入的參數是 message: null,表示這次不顯示任何訊息。相對的 unblock 用法如下,非常的簡單:
[code js]
$('.postmessage:first').unblock();
[/code]
[b][/b]
[color=Navy][size=4][b]範例三:更新遮罩內容[/b][/size][/color]
當遮罩內的訊息需要更新的話,也非常簡單,只需要再 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]
程式碼如下:
[code js]
$("#demo3").click(function() {
var countdown = 3;
$.blockUI({ message: '3' });
var interval = setInterval(function() {
if (--countdown <= 0) {
$.unblockUI();
clearInterval(interval);
} else {
$.blockUI({ message: countdown });
}
}, 1000);
});
[/code]
[b][/b]
[color=Navy][size=4][b]更多的範例[/b][/size][/color]
就在 [url=http://www.malsup.com/jquery/block]BlockUI 的官方首頁[/url],還可以看到簡易處理表單的例子,以及完整的參數、選項等等。
.js的檔要去哪抓
內容引用的jquery-1.2.3.pack.js和jquery.blockUI.js這兩個檔要去哪抓? jquery-1.2.3.pack.js 是 jQuery 的 js 檔,目前最新版本是 v1.3.2,你可以從 jQuery 官方網站下載,或是考慮直接引用 Google AJAX Libraries API,使用方法可參考:[url]http://jsgears.com/thread-79-1-1.html[/url]
jquery.blockUI.js 就是本文所介紹的 jQuery plugin,請直接到該網頁下載:
[url]http://www.malsup.com/jquery/block/[/url]
畫面閃啊閃的 哪裡有問題呢
我測試了BlockUI 的官方首頁 的Simple Modal Dialog Example 例子
他不會產生畫面閃啊閃的
但是我COPY完整語法到我的伺服器上
畫面卻會產生一閃一閃的
[url]http://www.ibaer.com/eason/block/index.php[/url]
請教一下
跟伺服器有關嗎
還是哪裡需要設定呢
[[i] 本帖最後由 eason 於 2009-8-19 13:08 編輯 [/i]] 這些程式都是跑在 client 端的,和 server 端不太有關係,除非 server 端無法正確送出正確的程式碼。
你說的一閃一閃是哪一部份在閃呢?
畫面會產生一閃一閃的程式位置
畫面卻會產生一閃一閃的[url]http://www.ibaer.com/eason/block/index.php[/url] 我看起來還好耶,你說得一閃一閃的是在顯示小視窗時,背景色在做漸變時一閃一閃的嗎? 是在我點YES 後
程式會再呼叫一次 $.blockUI({ message: "<h1>資料傳送中....</h1>" });
畫面會先變成白色 然後才又遮罩的模式
官方網站 我點YES後 感覺不到 官方的應該也有,只是官方網頁的背景比較灰一點,比較沒感覺。
如果要避免的話,你可以在執行第二次 blockUI 時取消 fadeIn 即可:
[code js]
$.blockUI({ message: "<h1>資料傳送中....</h1>", fadeIn: 0});
[/code] 搞定了喔
加了fadeIn: 0
測試就沒問題了喔
感謝感謝:)
HOW 使用$.blockUI - 效果填寫登入資訊及傳送資料,接收回傳參數
參考了[url]http://www.malsup.com/jquery/block/#demos[/url]
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> 請問版主~
如果的網頁有三個frameset(上, 左, 右) 我的submit在右邊, 顯示出來的資料會在左邊~
如果我在右frame做遮罩時, 只會出現在右邊, 要如何讓他出現在正中間呢??? 測試成功! :victory:
留個記錄~
[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> [i=s] 本帖最後由 diddo 於 2013-1-13 03:04 編輯 [/i]
[color=Blue]re:eason-[b][size=4]HOW 使用$.blockUI填寫登入資訊...[/size][/b]
(雖然outdate了),回應一下問題~
我是這樣寫,有錯歡迎指正![/color]
[color=Red]*只試了頁面,未測試數據~[/color]
[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>
頁:
[1]