artDialog模拟登陆页面

最新推荐文章于 2021-08-06 00:24:09 发布

shenge321

最新推荐文章于 2021-08-06 00:24:09 发布

阅读量1.8k

点赞数

分类专栏： jQuery插件 artDialog

本文链接：https://blog.csdn.net/shenge321/article/details/10702175

版权

jQuery插件同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

artDialog

1 篇文章 0 订阅

订阅专栏

感觉artDialog是个很好的插件，它的体验真的没得说。不过div好像无法拖动（插件里有个函数可以实现拖动，水平不高，还没想到怎么集成到主文件中去。）

插件作者：糖饼。项目主页：https://github.com/aui/artDialog

js部分

<script src="source/jquery-1.9.0.js"></script>
<script src="source/jquery.artDialog.js"></script>
<script type="text/javascript">
    // artDialog5.0 需要 XHTML1.0或以上的文档声明。
	$(function () {
        $("#login").click(function () {
            login();
			// 注意artDialog的z-index是主动累加的。
			// 所以要判断是否为记住我，先应弹出登录窗口，再读取cookie判断。
			isLogin();
        });
    });

    function login() {
        $.dialog({
            id: "logindiv",
            title: "登录",
            lock: true,
            fixed: true,
            okValue: "登录",
            content: '帐号：<input id="login-na" type="text" value="" />'
    + '<br />密码：<input id="login-pw" type="password" value="" />',
            initialize: function () {
                document.getElementById('login-na').focus();
            },
            ok: function () {
                isLogin();
                return false;
            },
            cancelValue: "取消",
            cancel: function () {
            }
        })
    };
	
	// 为“记住我”和正常登录封装的本方法。
    function isLogin() {
        $.ajax({
            type: "post",
            url: "1.txt",// 为了简便，就异步请求了一个txt文件。如果想显示服务器内部错误。写一个错误的文件名即可。
            data: { "uid": $("#login-na").val(), "pwd": $("#login-pw").val() },
            success: function (res) {
                // 1 登录成功。2 密码错误。3 用户不存在。4 参数错误。5 记住我登录失败。
                if (res == 1) {
                    $.dialog({
                        title: "消息",
                        content: "登录成功，正在跳转...",
                        lock: true
                    });
                    //window.location.href = "http://net.itcast.cn";
                } else if (res == 2) {
                    msg("密码错误。");
                } else if (res == 3) {
                    msg("用户不存在。");
                } else if (res == 4) {
                    msg("参数错误。");
                } else if (res == 5) {
                    // 记住我登录失败，不做判断。
                }
		else {
                    msg("未知的错误码。");
                }
            },
            error: function () {
                msg("服务器内部错误。");
            }
        });
    };

    function msg(msg) {
        $.dialog({
            id: "login_msg",
            title: "消息",
            content: msg,
            lock: true,
            time: 3000,
            okValue: "确定",
            ok: function () { }
        });
    };
</script>

html部分

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="skins/aero.css" rel="stylesheet" />
<script src="source/jquery-1.9.0.js"></script>
<script src="source/jquery.artDialog.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<a href="javascript:void(0)" id="login">登录</a>
</body>
</html>

demo http://download.csdn.net/detail/shenge321/6041727