1.Login Form

$(document).ready(function() {
$('#demo1').click(function() {
$.blockUI({ message: $('#loginForm') }); setTimeout($.unblockUI, 2000);
});
});

2.iPhoto (ish)

$(document).ready(function() {
$('#demo2').click(function() {
$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
} }); setTimeout($.unblockUI, 2000);
});
});

3.Blue Overlay

$(document).ready(function() {
$('#demo3').click(function() {
$.blockUI({ overlayCSS: { backgroundColor: '#00f' } }); setTimeout($.unblockUI, 2000);
});
});

4.Tall Content

$(document).ready(function() {
$('#demo4').click(function() {
$.blockUI({
message: $('#tallContent'),
css: { top: '20%' }
}); setTimeout($.unblockUI, 2000);
});
});

5.Image Box

$(document).ready(function() {
$('#demo5').click(function() {
$.blockUI({
message: $('#displayBox'),
css: {
top: ($(window).height() - 400) /2 + 'px',
left: ($(window).width() - 400) /2 + 'px',
width: '400px'
}
}); setTimeout($.unblockUI, 2000);
});
});

6.Non-centered message

$(document).ready(function() {
$('#demo6').click(function() {
$.blockUI({
centerY: 0,
css: { top: '10px', left: '', right: '10px' }
}); setTimeout($.unblockUI, 2000);
});
});

7.Blocking without a message (pass null as message)

$(document).ready(function() {
$('#demo7').click(function() {
$.blockUI({ message: null }); setTimeout($.unblockUI, 2000);
});
});

8.onUnblock callback (useful when using fadeOut option as it is invoked when all the blocking elements have been removed)

$(document).ready(function() {
$('#demo8').click(function() {
$.blockUI(); setTimeout(function() {
$.unblockUI({
onUnblock: function(){ alert('onUnblock'); }
});
}, 2000);
});
});

9.Click overlay to unblock (This demo will not automatically unblock, you must click the overlay.)

$(document).ready(function() {
$('#demo9').click(function() {
$.blockUI();
$('.blockOverlay').attr('title','Click to unblock').click($.unblockUI);
});
});

10.Auto-Unblock Sets a timer to unblock after a specified timeout.

$(document).ready(function() {
$('#demo10').click(function() {
$.blockUI({
message: '<h1>Auto-Unblock!</h1>',
timeout: 2000
});
});
});

11.Growl (the hard way)

$(document).ready(function() {
$('#demo11').click(function() {
$.blockUI({
message: $('div.growlUI'),
fadeIn: 700,
fadeOut: 700,
timeout: 2000,
showOverlay: false,
centerY: false,
css: {
width: '350px',
top: '10px',
left: '',
right: '10px',
border: 'none',
padding: '5px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .6,
color: '#fff'
}
});
});
});

12.Growl (the easy way)

$(document).ready(function() {
$('#demo12').click(function() {
$.growlUI('Growl Notification', 'Have a nice day!');
});
});

The two growl examples above also make use of the following external CSS:

div.growlUI { background: url(check48.png) no-repeat 10px 10px }
div.growlUI h1, div.growlUI h2 {
color: white; padding: 5px 5px 5px 75px; text-align: left
}

Note: For a more full-featured "growl" implementation, check out the excellent jGrowl plugin by Stan Lemon.

13.jQuery UI Theme. Use jQuery UI themes to style the messaege

$(document).ready(function() {
$('#demo13').click(function() {
$.blockUI({
theme: true,
title: 'This is your title',
message: '<p>This is your message.</p>',
timeout: 2000
});
});
});

14.onBlock callback

$(document).ready(function() {
$('#demo14').click(function() {
$.blockUI({
fadeIn: 1000,
timeout: 2000,
onBlock: function() {
alert('Page is now blocked; fadeIn complete');
}
});
});
});

15.onOverlayClick callback

//Click overlay to unblock.
$(document).ready(function() {
$('#demo15').click(function() {
$.blockUI({
onOverlayClick: $.unblockUI
});
});
});

参考:http://malsup.com/jquery/block/#overview

jQuery BlockUI Plugin Demo的更多相关文章

  1. jQuery BlockUI Plugin Demo 2

    Overview The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without l ...

  2. jQuery BlockUI Plugin Demo 6(Options)

    Options BlockUI's default options look (exactly) like this: // override these in your code to change ...

  3. jQuery BlockUI Plugin Demo 5(Simple Modal Dialog Example)

    Simple Modal Dialog Example This page demonstrates how to display a simple modal dialog. The button ...

  4. jQuery BlockUI Plugin Demo 3(Page Blocking Examples)

    This page demonstrates several ways to block the page. Each button below activates blockUI and then ...

  5. jQuery BlockUI Plugin Demo 4(Element Blocking Examples)

    Element Blocking Examples This page demonstrates how to block selected elements on the page rather t ...

  6. jQuery Validation Plugin学习

    http://blog.csdn.net/violet_day/article/details/14109261 jQuery Validation Plugin Demo 一.默认校验规则 (1)r ...

  7. JQuery多媒体插件jQuery Media Plugin使用详解

    malsup jquery media plugin 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, ...

  8. (转)jQuery Validation Plugin客户端表单证验插件

    jQuery Validation Plugin客户端表单验证插件 官方文档:http://jqueryvalidation.org/documentation/ 官方demo:http://jque ...

  9. jQuery多媒体播放器插件jQuery Media Plugin使用方法

    jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式,比如:Flash, Windows Media Player, Real ...

随机推荐

  1. Nutch2.1+mysql+solr3.6.1+中文网站抓取

    1.mysql 数据库配置 linux mysql安装步骤省略. 在首先进入/etc/my.cnf (mysql为5.1的话就不用修改my.cnf,会导致mysql不能启动)在[mysqld] 下添加 ...

  2. firewall 相关命令

    1.firewalld的基本使用 启动: systemctl start firewalld 查看状态: systemctl status firewalld 停止: systemctl disabl ...

  3. sql server 时间处理函数 datediff() 和getdate()

    一: DATEDIFF() 定义和用法 DATEDIFF() 函数返回两个日期之间的时间. 语法 DATEDIFF(datepart,startdate,enddate) startdate 和 en ...

  4. java大文件上传解决方案

    最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...

  5. vue+大文件上传控件

    总结一下大文件分片上传和断点续传的问题.因为文件过大(比如1G以上),必须要考虑上传过程网络中断的情况.http的网络请求中本身就已经具备了分片上传功能,当传输的文件比较大时,http协议自动会将文件 ...

  6. luogu 3702 [SDOI2017]序列计数 矩阵乘法+容斥

    现在看来这道题真的不难啊~ 正着求不好求,那就反着求:答案=总-全不是质数 这里有一个细节要特判:1不是质数,所以在算全不是质数的时候要特判1 code: #include <bits/stdc ...

  7. CSS3 backface-visibility 不面向屏幕是否可见

    backface-visibility 属性定义当元素不面向屏幕时是否可见. 如果在旋转元素不希望看到其背面时,该属性很有用. backface-visibility: visible|hidden; ...

  8. 关闭linux下的主板响声(主板蜂鸣器)

    在从deepin的kdd桌面换到xfce桌面后,命令行和界面操作上动不动会让主机响一声. manjaro的xfce版也是如此,不知道是不是linux下xfce的通病. 主要是搜索的时候百度的结果很奇葩 ...

  9. P1197 [JSOI2008]星球大战——链式前向星+并查集

    https://www.luogu.org/problem/P1197 这道题算是关闭农场的加强版吧,数据有点大,矩阵存不下: 也是记录删点操作,从后往前加边: 先将每个点都算成一个连通块,然后每连一 ...

  10. Tecplot如何提取三维图中某条线的数据【转载】

    转载自:http://blog.sina.com.cn/s/blog_9de422500102v9by.html 截取线所在的面Data.Extract .slice from Plane,显示如下窗 ...