`
sillycat
  • 浏览: 2477383 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

jquery插件弹出提示框

    博客分类:
  • UI
阅读更多
jquery插件弹出提示框

淡入淡出效果,等待提示后自动关闭,效果很爽。
主页
http://www.malsup.com/jquery/block/#overview
demo地址
http://www.malsup.com/jquery/block/#demos
下载地址
http://www.malsup.com/jquery/block/#download
下载得到文件
http://www.malsup.com/jquery/block/jquery.blockUI.js?v2.31

参考demo中的源码,做了个测试页面tips-demo1.html如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dock menu demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="../components/jqgrid/css/ui-lightness/jquery-ui-1.7.2.custom.css" />
<script src="../components/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../components/jquery/jquery.blockUI.js" type="text/javascript"></script>
<script type="text/javascript">
function pagedemo(short_message) {
    $.blockUI({
    theme:true,
        message: '<img src="../images/busy.gif" /> ' + short_message,
        //这里可以直接定义延迟3秒,也可以调用test函数,等着ajax返回了以后再关闭提示。
        timeout: 3000
    });
    //test();
}

function test() {
    $.ajax({
        url: 'tabs-demo.html',
        cache: false,
        complete: function() {
        setTimeout($.unblockUI,3000);
    }
    });
}

</script>
</head>
<body>
<input id="pageDemo2" class="demo" type="submit" value="Custom Message" onclick="pagedemo('操作成功...');"/>
</body>
</html>

分享到:
评论
1 楼 gjlping 2010-05-19  
哥们,请教一下使用growlUI时怎么实现提示消息时页面鼠标无法操作?
谢谢

相关推荐

Global site tag (gtag.js) - Google Analytics