首页 > 代码库 > jQuery BlockUI Plugin Demo
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 }); }); });
jQuery BlockUI Plugin Demo