jQuery BlockUI Plugin Demo
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的更多相关文章
- jQuery BlockUI Plugin Demo 2
Overview The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without l ...
- jQuery BlockUI Plugin Demo 6(Options)
Options BlockUI's default options look (exactly) like this: // override these in your code to change ...
- 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 ...
- jQuery BlockUI Plugin Demo 3(Page Blocking Examples)
This page demonstrates several ways to block the page. Each button below activates blockUI and then ...
- jQuery BlockUI Plugin Demo 4(Element Blocking Examples)
Element Blocking Examples This page demonstrates how to block selected elements on the page rather t ...
- jQuery Validation Plugin学习
http://blog.csdn.net/violet_day/article/details/14109261 jQuery Validation Plugin Demo 一.默认校验规则 (1)r ...
- JQuery多媒体插件jQuery Media Plugin使用详解
malsup jquery media plugin 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, ...
- (转)jQuery Validation Plugin客户端表单证验插件
jQuery Validation Plugin客户端表单验证插件 官方文档:http://jqueryvalidation.org/documentation/ 官方demo:http://jque ...
- jQuery多媒体播放器插件jQuery Media Plugin使用方法
jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式,比如:Flash, Windows Media Player, Real ...
随机推荐
- Nutch2.1+mysql+solr3.6.1+中文网站抓取
1.mysql 数据库配置 linux mysql安装步骤省略. 在首先进入/etc/my.cnf (mysql为5.1的话就不用修改my.cnf,会导致mysql不能启动)在[mysqld] 下添加 ...
- firewall 相关命令
1.firewalld的基本使用 启动: systemctl start firewalld 查看状态: systemctl status firewalld 停止: systemctl disabl ...
- sql server 时间处理函数 datediff() 和getdate()
一: DATEDIFF() 定义和用法 DATEDIFF() 函数返回两个日期之间的时间. 语法 DATEDIFF(datepart,startdate,enddate) startdate 和 en ...
- java大文件上传解决方案
最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...
- vue+大文件上传控件
总结一下大文件分片上传和断点续传的问题.因为文件过大(比如1G以上),必须要考虑上传过程网络中断的情况.http的网络请求中本身就已经具备了分片上传功能,当传输的文件比较大时,http协议自动会将文件 ...
- luogu 3702 [SDOI2017]序列计数 矩阵乘法+容斥
现在看来这道题真的不难啊~ 正着求不好求,那就反着求:答案=总-全不是质数 这里有一个细节要特判:1不是质数,所以在算全不是质数的时候要特判1 code: #include <bits/stdc ...
- CSS3 backface-visibility 不面向屏幕是否可见
backface-visibility 属性定义当元素不面向屏幕时是否可见. 如果在旋转元素不希望看到其背面时,该属性很有用. backface-visibility: visible|hidden; ...
- 关闭linux下的主板响声(主板蜂鸣器)
在从deepin的kdd桌面换到xfce桌面后,命令行和界面操作上动不动会让主机响一声. manjaro的xfce版也是如此,不知道是不是linux下xfce的通病. 主要是搜索的时候百度的结果很奇葩 ...
- P1197 [JSOI2008]星球大战——链式前向星+并查集
https://www.luogu.org/problem/P1197 这道题算是关闭农场的加强版吧,数据有点大,矩阵存不下: 也是记录删点操作,从后往前加边: 先将每个点都算成一个连通块,然后每连一 ...
- Tecplot如何提取三维图中某条线的数据【转载】
转载自:http://blog.sina.com.cn/s/blog_9de422500102v9by.html 截取线所在的面Data.Extract .slice from Plane,显示如下窗 ...