使用jquery的blockui外掛程式顯示彈出層

posted on

2011-04-14 16:34

孤獨者 閱讀(

0) 編輯收藏

在做**的開發過程中，可能需要使用彈出層，使用jquery的blockui外掛程式可以很輕鬆的實現這個效果。blockui可以在你傳送ajax請求的時候，顯示乙個遮罩層禁止使用者對頁面進行操作並顯示提示資訊；或者用來顯示乙個登陸視窗，也可用來顯示等。

blockui外掛程式主要使用blockui和unblockui兩個方法來控制彈出層的顯示或者隱藏，可以在blockui方法中指定一些引數，來控制彈出層顯示的內容，大小，位置等。blockui方法的常用的引數有：message,css,overlaycss,showoverlay。

message：主要用來設定要顯示的內容，可以直接設定為一段文字，html**或者使用jquery獲取頁面上隱藏的div。

css：主要用來設定彈出層的樣式，包括彈出層的位置，大小，邊框等。

overlaycss：主要用來設定遮罩層的樣式，包括背景色，透明度等。

showoverlay：主要用來設定是否顯示遮罩層，如果要隱藏遮罩層可以設定為false。

下面通過一些例子來看看具體的用法，在頁面匯入jquery.min.js和jquery.blockui.js檔案，具體實現**如下：

$(

"#btnsubmit
").click(function () 
});});$(
"#btnlogin
").click(function () 
});settimeout(function () , 
1000
);});$("
#btncancel
").click(function () );

<

div id="
loginform
"style="
display:none
">
<
table
>
<
tr>
<
td>
使用者名稱：
td>
<
td><
input id="
txtusername
"type="
text
"/>
td>
tr>
<
tr>
<
td>
密　碼：
td>
<
td><
input id="
txtpwd
"type="
text
"/>
td>
tr>
<
tr>
<
td><
input id="
btnlogin
"type="
button
"value="
登入"/>
td>
<
td><
input id="
btncancel
"type="
button
"value="
取消"/>
td>
tr>
table
>
div>

強大的jQuery彈出層外掛程式 BlockUI

經常會有些同志問我有沒有好用的基於jquery的彈出層外掛程式，我通常都會毫不猶豫的推薦他這款外掛程式 blockui。我也極少接觸到其他的jquery彈出層外掛程式，因為我覺得有了blockui這款功能強大的外掛程式已經能滿足我的需求了。先看看blockui的演示效果 檢視演示 blockui支援...

jQuery使用 jQuery語法

今天我們就來看一下jquery語法。通過 jquery，可以選取 selector html 元素，並對它們執行 操作 actions 基礎語法 selector action 美元符號 定義 jquery 選擇符 selector 查詢 和 查詢 html 元素 jquery 的 action 執...

jquery的ajax，post，get使用小計1

近日，自己寫了乙個使用者許可權列表配置管理。在使用者角色列表發生變化時，自己繪製的許可權樹的checkbox checked屬性則發生變化。結果用 post，ie是正常使用，chrome死活不行。就是不重新整理。分析發現dealtext在chrome返回值時沒有得到我要的結果。難道是非同步同步的問題...