BLOckUI用法

BLOckUI用法1锁定页面的例子<scripttype="text/javascript">//unblockwhenajaxactivitystops$().ajaxStop($.unblockUI);functiontest(){$.ajax({url:’wait.php’,cache:false});}$(document).ready(function(…

大家好,欢迎来到IT知识分享网。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="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>
http://www.cnblogs.com/jams742003/archive/2009/09/15/1567080.html

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/20554.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信