jquery.blockUI.js的使用示例

最新推荐文章于 2017-03-10 15:45:00 发布

luckystar2008

最新推荐文章于 2017-03-10 15:45:00 发布

阅读量2.2k

点赞数

文章标签： function javascript generator callback html jquery

本文链接：https://blog.csdn.net/qincidong/article/details/6848184

版权

Front End 专栏收录该内容

119 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language=javascript src="js/jquery.js"></script>
<script language=javascript src="js/jquery.blockUI.js"></script>
<script language=javascript>
$(function(){
   //检测引入的jquery.js是否正确。
   alert("jquery 没有问题！");
   //默认样式
   var a1 = $("a:eq(0)");
   a1.click(function(){
    a1.css("color","green");
    $.blockUI();
   });
   //自定义内容
   var a2 = $("a:eq(1)");
   a2.click(function(){
    $.blockUI({message:'正在处理，请等待...'});
   });
   //自定义样式
   var a3 = $("a:eq(2)");
   a3.click(function(){
    $.blockUI({ css: { 
     border:'solid green 2px',
     backgroundColor:'blue'
     }
    }); 
   });
  
   //蓝色背景
   var a4 = $("a:eq(3)");
   a4.click(function(){
    $.blockUI({
     overlayCSS:{backgroundColor:'blue'},
     message:'正在处理，请等待。。。',
     css:{
      backgroundColor:'#F0FF00',
      height:40
     }
     });
   });
   //停滞2秒
   var a5 = $("a:eq(4)");
   a5.click(function(){
    $.blockUI({message:'Processing...'});
    setTimeout($.unblockUI,2000);
   });

   //防止一个表单
   var a6 = $("a:eq(5)");
   a6.click(function(){
    $.blockUI({message:$('#loginForm')});
  
   });

   //通知（Notification）
   var a7 = $("a:eq(6)");
   a7.click(function(){
    $.growlUI('Hi','Have a nice day!');
   });

   //onBlock callback
   a8 = $("a:eq(7)");
   a8.click(function(){
    $.blockUI({ 
            fadeIn: 1000, 
            timeout:   2000, 
            onBlock: function() { 
                alert('Page is now blocked; fadeIn complete'); 
            } 
    }); 
   });

   //Theme
   var a9 = $("a:last");
   a9.click(function(){
    $.blockUI(
     {
      theme:true,
      title:'<p style="font-size:25px">This is your title<p>',
      message:'<p style="font-size:22px;background-color:green;">This is your message.</p>',
      timeout:2000
     }
     ); 
   });
});

</script>
</HEAD>

<BODY>
<a href="#">DEFAULT</a>
<a href="#">自定义内容</a>
<a href="#">自定义样式</a>
    <a href="#">蓝色背景</a>
<a href="#">停滞2秒</a>
<a href="#">放置一个表单</a>
<a href="#">通知（Notification）</a>
<a href="#">onBlock callback</a>
<a href="#">Theme</a>

<div id="login" style="display:none">
   <form action="#" id="loginForm">
    <table>
     <thead>
      <th>用户登录</th>
     </thead>
     <tr>
      <td>用户名：</td>
      <td><input type="text" name="name"></td>
     </tr>
     <tr>
      <td>密码：</td>
      <td><input type="password" name="pwd"></td>
     </tr>
     <tr align="center">
      <td colspan="2">
       <input type="submit" value="登录"/>
      </td>
     </tr>
    </table>
   </form>
</div>
</BODY>
</HTML>

luckystar2008

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery.blockUI.js的使用示例

New Document $(function(){ //检测引入的jquery.js是否正确。 alert("jquery 没有问题！"); //默认样式 var a1 = $("a:eq(0)"); a1
复制链接

扫一扫