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>

jquery.blockui示例相关推荐

弹出层之2：JQuery.BlockUI
JQuery.BlockUI是众多JQuery插件弹出层中的一个,它小巧(原版16k,压缩后10左右),容易使用, 功能齐全,支持Iframe,支持Modal,可定制性高也意味他默认谦虚的外表. jQ ...
jQuery BlockUI 插件（遮罩层）
部分效果概述当使用AJAX时,jQuery BlockUI插件可以模拟同步行为,并且不会锁定浏览器.一旦被激活,它便会防止页面上(或页面的一部分)用户的操作,直到被停用.BlockUI给DOM带来 ...
在 ASP.NET 使用 jQuery BlockUI 插件
BlockUI 是一个相当不错的jQuery插件,它可以轻易设定页面指定区域显示执行中文字(如 Loading...)并锁定该区域限制输入.简单的说,若我们希望网页在执行PostBack 或 Ajax ...
dropdownlist ajax联动,asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例...
本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例.前段时间需要作一个的Web前端应用,需要用多个框架,一个典型的应用场景是省市三级 ...
jquery blockui 遮罩【转】
参考 : http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/ blockUI.html blockUI.ht ...
jquery ajax示例_jQuery AJAX JSP Servlet Java示例
jquery ajax示例 Ajax in Java JSP Servlet based web applications are very common. Recently I have writt ...
jQuery遮罩插件jQuery.blockUI.js简介
概述: jQuery BlockUI插件可以在不锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会阻止用户在页面进行的操作,直到插件被关闭.BlockUI通过向DOM中添加元素实 ...
用户界面框架jQuery EasyUI示例大全之DataGrid（1/4）
2019独角兽企业重金招聘Python工程师标准>>> <jQuery EasyUI最新试用版免费下载> jQuery EasyUI致力于帮助web开发者更轻松的打造出功 ...
用户界面框架jQuery EasyUI示例大全之DataList
<jQuery EasyUI最新试用版免费下载> jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.jQuery EasyUI提供了基于当下流行的j ...
Jquery blockUI用法
1 锁定页面的例子 <script type="text/javascript">// unblock when ajax activity stops $().aja ...

jquery.blockui示例

jquery.blockui示例相关推荐

最新文章

热门文章