0
点赞
收藏
分享

微信扫一扫

界面遮罩层例子


关键字:界面遮罩层例子


一、自己写的遮罩层例子

附件遮罩层.rar为普通js界面遮罩层例子。


二、jQuery遮罩层例子(引入附件 jquery.zip中的两个插件)

1、下面一句话即可搞定
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>',css: { backgroundColor: '#f00', color: '#fff'} });

2、解除锁定

$.unblockUI();


[color=red]全屏锁屏例子:[/color]
js代码:

$(function(){ 
 $('#test').click(function() { 

 $.blockUI({ message: $('#question'), css: { width: '275px' } }); 

 }); 


 $('#yes').click(function() { 

 // update the block message 

 $.blockUI({ message: "<h1>正在进行通信...</h1>" }); 


 $.ajax({ 

 url: 'wait.php', 

 cache: false, 

 complete: function() { 

 // unblock when remote call returns 

 $.unblockUI(); 

 } 

 }); 

 }); 


 $('#no').click($.unblockUI); 


});




html代码:

<input id="test" type="submit" value="显示对话框" /> 


... 


<div id="question" style="display:none; cursor: default"> 

 <h1>你确信要继续么?.</h1> 

 <input type="button" id="确认" value="Yes" /> 

 <input type="button" id="取消" value="No" /> 

</div>



[color=red]局部锁屏例子:[/color]

js代码:

$(function() { 

 $('#blockButton').click(function() { 

 $('#question').block({ message: null }); 

 }); 


 $('#blockButton2').click(function() { 

 $('#question').block({ 

 message: '<h1>处理中...</h1>', 

 css: { border: '3px solid #a00' } 

 }); 

 }); 


 $('#unblockButton').click(function() { 

 $('#question').unblock(); 

 }); 



 });



html代码:

<input type="button" id="blockButton" value="blockButton" /> 

 <input type="button" id="blockButton2" value="blockButton2" /> 

 <input type="button" id="unblockButton" value="unblockButton" /> 


<div id="question" > 

 <input type="text" class="userText" value="nicole"/><br> 

 <input type="password" class="passText" value=" "/><br> 

 <input type="button" value="Yes" /><br> 

 <input type="button" value="No" /><br> 

 <input type="button" value="dddddddddddddddddddddddddddddd" /><br> 

</div>



一些设置:

//设置遮罩层颜色
$.blockUI.defaults.overlayCSS.backgroundColor = '#ff0';
// 设置锁定时默认的提示信息(这里将覆盖jquery默认的提示消息)


//$.blockUI.defaults.message = "Please be patient... .......";


// 设置遮罩层更透明
$.blockUI.defaults.overlayCSS.opacity = '.2';


//如果要使用默认设置来同步所有的AJAX请求动作,代码如下:

$().ajaxStart($.blockUI).ajaxStop($.unblockUI);



举报

相关推荐

0 条评论