jQuery 遮罩层插件blockUI -

zgq456

浏览: 110700 次
性别:
来自: 杭州

最近访客更多访客>>

liuxuming230

ff100zjl

dalongxn

whnuliba

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery 遮罩层插件blockUI

blockUI 是一个用来提示等待信息的 jQuery 插件，当要执行某个较长操作时候（大数据量查询等），通过 blockUI 显示一个遮罩层或者图片来阻止当前用户继续操作。我也是今天才使用blockUI，说的不对的地方请多指教，先给一个具体的实例（JS部分）

$('#serch_button').click(function() {
	$.blockUI({ 
            message: '<h3 style="margin-top: 10px;">正在执行，请稍候...</h3>',
	    css: {
	          border: '1px solid black',
	          height: '40px'
	     }
	 });
         setTimeout($.unblockUI, 2000);   
 });

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery弹出层插件--BlockUI 效果演示</title>
<style>
*{ margin:0; padding:0;}
body{ background:#f0f0f0; font:12px Arial, Helvetica, sans-serif; color:#505050; }
#login_box { width:280px;  display:none; padding-bottom:20px; position:relative; text-align:left; }
#login_box fieldset { border:0 none; }
.close { position:absolute; right:8px; top:0; display:block; width:33px; height:17px; background:url(images/close.png) no-repeat; text-indent:-9999px; outline:none; }
.top_h4 { font-size:16px; background:url(images/login_box_title_bg.png) repeat-x; line-height:36px; margin-bottom:20px; letter-spacing:1px; text-indent:23px; color:#232324; }
.label { padding-left:23px; }
.label p { font-size:13px; margin-bottom:10px; }
.label input { background:#f7f7f7; width:227px; height:20px; padding-top:2px; padding-left:3px; border:1px solid #caedbe; margin-bottom:20px; font:12px "Bitstream Vera Sans", "Trebuchet MS", Geneva, Verdana, Arial, Helvetica, sans-serif; }
.label input:hover, .label input:focus { border:1px solid #b2e06e; }
#login_box fieldset span a { text-align:center; margin-right:15px; font-size:12px; width:auto; line-height:24px; display:block; float:left; text-decoration:none; color:#63aa49; }
#login_box span a:hover { color:#000; }
#login_box .button2 a { width:65px; background:url(images/button2.gif) no-repeat; color:#232324; margin-left:23px !important; margin-left:11px; }
#login_box .button2 a:hover { text-decoration:none; background:#7e7e7d; color:#fff; }
#wrapper{ width:360px; padding:20px; margin:10% auto 0; background:#fff; border:1px solid #e0e0e0;}
h1,h3{ margin-bottom:10px; font-size:20px;}
h6{ font-weight:normal; font-size:12px; margin-bottom:20px; padding-bottom:10px; border-bottom:1px solid #e0e0e0;}
h6 a{  color:#505050; }
button{ margin-right:20px;}
#displayBox{ display:none;} 
#box{ width:600px; margin:0 auto; background:#fff; border:1px solid #ccc; padding:20px; display:none; -webkit-border-radius: 10px;-moz-border-radius: 10px; display:none; } 
#box p{ margin-bottom:20px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://stylechen.com/wp-content/uploads/demo/jquery-blockui/images/jquery.blockUI.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $('#login_box_btn').click(function(){ 
        $.blockUI({ message: $('#login_box') }); 
		$('.blockOverlay').attr('title','单击关闭').click($.unblockUI); 
		$('.close').click($.unblockUI);
     }); 
	 $('#text_box_btn').click(function(){
	     $.blockUI({ css: { 
         border: 'none', 
         padding: '15px', 
         backgroundColor: '#000', 
         '-webkit-border-radius': '10px', 
         '-moz-border-radius': '10px', 
         opacity: .5, 
         color: '#fff' 
        } }); 
		$('.blockOverlay').attr('title','单击关闭').click($.unblockUI); 
	 });
	 	$('#img_box_btn').click(function(){
        $.blockUI({ 
            message: $('img#displayBox'), 
            css: { 
		        top:		'50%',
		        left:		'50%',
		        textAlign:	'left',
		        marginLeft:     '-200px', 
		        marginTop:      '-145px', 
                width: '400px',
                height: '291px'
            } 
        }); 
		$('.blockOverlay').attr('title','单击关闭').click($.unblockUI); 
	 });
	 	  	 $('#box_btn').click(function(){
        $.blockUI({ 
            message: $('#box'), 
            css: { 
		        top:		'50%',
		        left:		'50%',
		        textAlign:	'left',
		        marginLeft:     '-320px', 
		        marginTop:      '-145px', 
                width: '600px',
                background:'none'
            } 
        }); 
		$('.blockOverlay').attr('title','单击关闭').click($.unblockUI); 
	 });
});	 
</script>
</head>

<body>
<div id="login_box">
  <fieldset>
    <h4 class="top_h4">会员登录</h4>
    <a href="#" class="close" title="关闭">close</a>
    <div class="label">
      <p>用户名</p>
      <input id="username" name="username" type="text" />
    </div>
    <div class="label">
      <p>密 码</p>
      <input id="password" name="password" type="password"/>
    </div>
    <span class="button2"><a href="#">登 录</a></span><span><a href="#">忘记密码</a></span>
  </fieldset>
</div>
<img src="images/demo.jpg" alt="" id="displayBox" />
<div id="box">
<h3>Mission</h3>
<p>Mozilla's mission is to promote openness, innovation, and opportunity on the web. We do this by creating great software, like the Firefox browser, and building movements, like Drumbeat, that give people tools to take control of their online lives.</p>
<p>As a non-profit organization, we define success in terms of building communities and enriching people’s lives instead of benefiting our shareholders (guess what: we don’t even have shareholders). We believe in the power and potential of the Internet and want to see it thrive for everyone, everywhere.</p>
<p>Building a better Internet is an ambitious goal, but we believe that it is possible  when people who share our passion get involved. Coders, artists, writers, testers, surfers, students, grandparents—anyone who uses and cares about the web can help make it even better. Find out how you can help.</p>
</div>
<div id="wrapper">
<h1>jQuery弹出层插件--BlockUI 效果演示</h1>
<h6>by:<a href="http://stylechen.com">Stylechen</a></h6>
<button id="login_box_btn">登录表单</button>
<button id="text_box_btn">提示窗口</button>
<button id="img_box_btn">图片</button>
<button id="box_btn">div窗口</button>
</div>
</body>
</html>

分享到：