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="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>

相关文章
|
7月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
64 1
|
JavaScript
jQuery图片瀑布流demo效果示例(整理)jQuery瀑布流效果
jQuery图片瀑布流demo效果示例(整理)jQuery瀑布流效果
|
JavaScript
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
|
JavaScript
jquery多图片上传预览demo效果示例(整理)
jquery多图片上传预览demo效果示例(整理)
|
JavaScript
jquery上传头像demo效果示例(整理)
jquery上传头像demo效果示例(整理)
|
JavaScript
通俗易懂的jquery倒计时demo效果示例(整理)
通俗易懂的jquery倒计时demo效果示例(整理)
|
JavaScript
jquery模糊查询--搜索demo效果示例(整理)
jquery模糊查询--搜索demo效果示例(整理)
|
JavaScript
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
240 0
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
|
JavaScript
jQuery下table操作示例(附案例源码)
jQuery下table操作示例(附案例源码)
135 0
|
JavaScript 移动开发 前端开发
jquery裁剪图片插件cropit示例
重装农药第16天!! jquery裁剪图片插件cropit示例背景:做的手机网页项目,用html file控件上传图片,有些手机拍照后图片会很大,20M以上的,用之前的H5 formdata上传的话有时会非常慢的,就想着能不能在选择图片的时候直接在客户端处理下,把选择的图片按规格的大小裁剪掉,上网...
1673 0