首页 > 代码库 > Jquery blockUI用法
Jquery blockUI用法
1 锁定页面的例子
<script type="text/javascript"> // unblock when ajax activity stops $().ajaxStop($.unblockUI); function test() { $.ajax({ url: ‘wait.php‘, cache: false }); } $(document).ready(function() { $(‘#pageDemo1‘).click(function() { $.blockUI(); test(); }); $(‘#pageDemo2‘).click(function() { $.blockUI({ message: ‘<h1><img src="http://www.mamicode.com/busy.gif" /> 请稍后...</h1>‘ }); test(); }); $(‘#pageDemo3‘).click(function() { $.blockUI({ css: { backgroundColor: ‘#f00‘, color: ‘#fff‘ } }); test(); }); $(‘#pageDemo4‘).click(function() { $.blockUI({ message: $(‘#domMessage‘) }); test(); }); }); </script> ... <div id="domMessage" style="display:none;"> <h1>正在处理,请稍侯...</h1> </div>
------------------------------------------------------------------------------------
2 锁定元素的例子
这里展示了如何锁定页面中的元素,而不是整个页面。 请点击block/unblock按钮查看效果。
<script type="text/javascript"> $(function() { $(‘#blockButton‘).click(function() { $(‘div.test‘).block({ message: null }); }); $(‘#blockButton2‘).click(function() { $(‘div.test‘).block({ message: ‘<h1>处理中...</h1>‘, css: { border: ‘3px solid #a00‘ } }); }); $(‘#unblockButton‘).click(function() { $(‘div.test‘).unblock(); }); $(‘a.test‘).click(function() { alert(‘link clicked‘); return false; }); }); </script>
------------------------------------------------------------------------------------
3 简单的对话框示例
此页展示了如何显示一个简单的模拟对话框。以下按钮将激活blockUI
显示一段自定义信息。这个AJAX请求将根据用户的反应(是或否)来发送或取消,在用户决定的这段时间内,会一直保持页面的锁定状态。
<script type="text/javascript"> $(function() { $(‘#test‘).click(function() { $.blockUI({ message: $(‘#question‘), css: { width: ‘275px‘ } }); }); $(‘#yes‘).click(function() { // update the block message $.blockUI({ message: "<h1>正在进行通信...</h1>" }); $.ajax({ url: ‘wait.php‘, cache: false, complete: function() { // unblock when remote call returns $.unblockUI(); } }); }); $(‘#no‘).click($.unblockUI); }); </script> ... <input id="test" type="submit" value="显示对话框" /> ... <div id="question" style="display:none; cursor: default"> <h1>你确信要继续么?.</h1> <input type="button" id="确认" value="Yes" /> <input type="button" id="取消" value="No" /> </div>
Jquery blockUI用法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。