jquery.blockui示例

各种样式、方法等,来源:http://qincidong.blog.163.com/blog/static/1646672192010634317555/

 


<!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=\'#\'" /jquery.js"></script>
<script language=javascript src=\'#\'" /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>
 

你可能感兴趣的:(jquery,职场,示例,休闲,blockUI)