jQuery插件blockUI

最新推荐文章于 2018-04-26 10:29:46 发布

greatverve

最新推荐文章于 2018-04-26 10:29:46 发布

阅读量1.6k

点赞数

分类专栏： JS.JQuery 文章标签： jquery插件 button function

本文链接：https://blog.csdn.net/greatverve/article/details/3594665

版权

JS.JQuery 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

源码下载：http://malsup.com/jquery/block/#demos

入门实例：

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>jQuery插件blockUI基本应用</title>
    <script type="text/javascript" src="../js/jquery-1.2.6.js"></script>
    <script type="text/javascript" src="../js/jquery.blockUI.js"></script>
    <script type="text/javascript">
        $(document).ready(function() { 
            $('#btnLogin').click(function() { 
                //太简便了，根据id弹出
                $.blockUI({ message: $('#loginForm') }); 
                //设置消失时间
                setTimeout($.unblockUI, 60000); 
            });     
        }); 
        function flogin(){
            var str = "欢迎你，" + $("#txtName").val();
            $("#btnLogin").html(str).unbind("click");//取消事件的方法。
            setTimeout($.unblockUI, 50);//关闭窗口的方法
        }
        function fcancel(){
            setTimeout($.unblockUI, 50);
        }
    </script>
</head>
<body>
<div id="btnLogin">登录</div>
<div id="loginForm" style="display:none; width:300px; height:200px; text-align:center; background-color:#369">
    用户名：
    <input type="text" id="txtName" /><br />
    密    码：
    <input type="text" id="txtPwd" /><br />
    <input type="button" onclick="flogin();" value="登录" />
    <input type="button" onclick="fcancel();" value="撤消" />
</div>
<div>使用blockUI</div>
</body>
</html>
 

end

greatverve

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery插件blockUI

源码下载：http://malsup.com/jquery/block/#demos入门实例：html xmlns="http://www.w3.org/1999/xhtml" >head> title>jQuery插件blockUI基本应用title> script type="text/javascript" src="../js/jquery-1.
复制链接

扫一扫

专栏目录