blockui 使用实例
2012-05-11 15:37
316 查看
Demos
Most of the demos below will display for 2 secondsRun | Login Form | $(document).ready(function() { $('#demo1').click(function() { $.blockUI({ message: $('#loginForm') }); setTimeout($.unblockUI, 2000); }); }); |
Run | 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); }); }); |
Run | Blue Overlay | $(document).ready(function() { $('#demo3').click(function() { $.blockUI({ overlayCSS: { backgroundColor: '#00f' } }); setTimeout($.unblockUI, 2000); }); }); |
Run | Tall Content | $(document).ready(function() { $('#demo4').click(function() { $.blockUI({ message: $('#tallContent'), css: { top: '20%' } }); setTimeout($.unblockUI, 2000); }); }); |
Run | 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); }); }); |
Run | Non-centered message | $(document).ready(function() { $('#demo6').click(function() { $.blockUI({ centerY: 0, css: { top: '10px', left: '', right: '10px' } }); setTimeout($.unblockUI, 2000); }); }); |
Run | Blocking without a message (pass null as message) | $(document).ready(function() { $('#demo7').click(function() { $.blockUI({ message: null }); setTimeout($.unblockUI, 2000); }); }); |
Run | 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); }); }); |
Run | 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); }); }); |
Run | 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 }); }); }); |
Run | 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' } }); }); }); |
Run | 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. |
Run | 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 }); }); }); For more details on using this feature see theme.html |
Run | onBlock callback | $(document).ready(function() { $('#demo14').click(function() { $.blockUI({ fadeIn: 1000, timeout: 2000, onBlock: function() { alert('Page is now blocked; fadeIn complete'); } }); }); }); |
相关文章推荐
- c# winform treelistview的使用(treegridview)实例详解
- Android使用下拉列表框实例
- simulink中状态机的使用/Stateflow使用技巧与实例应用
- Maven 3.3.3 Win10环境下的使用实例(上)
- C#使用系统方法发送异步邮件完整实例
- VLC详细的使用说明以及配置说明综合示范实例精通VLC开发
- Python List相关函数使用实例
- zk系列-c++下zookeeper使用实例
- [转]MySQL数据库基准压力测试工具之MySQLSlap使用实例
- automake使用实例
- java 使用DecimalFormat进行数字的格式化实例详解
- (三)、使用HighCharts创建第一个图表实例
- 游标的使用实例(Sqlserver版本)
- android自动化测试之MonkeyRunner使用实例(三)
- 为什么使用回调函数(回调函数实例)
- 实例演示 kino.razor (前端 Javascript 模板工具,Razor 风格)的使用
- 【原创】使用react-active运行实例
- python使用线程封装的一个简单定时器类实例
- java正则表达式语法详解及其使用代码实例
- Sniffer 的使用实例