jQuery MiniUI 实现弹出登录框 

<!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=utf-8" />
<title>login test</title>
<link rel="stylesheet" type="text/css" href="scripts/miniui/themes/blue/skin.css">
<script  src="scripts/boot.js"></script>
<script type="text/javascript">
$(function(){
    $("#btn").click(function(){
        mini.parse();
        var loginWindow = mini.get("loginWindow");
        loginWindow.show();
    });
    $("#login").click(function(){
        var name = mini.get("username").getValue();
        var password = mini.get("pwd").getValue();
        if(name==""){
            $("#msg").text("用户名不能为空!");
            return;
        }
        if(password==""){
            $("#msg").text("密码不能为空!");
            return;
        }
        $("#myform").submit();
    });
});
</script>
</head>

<body>
<div><a href="javascript:void(0);" id="btn" class="mini-button">登录</a></div>
<div id="loginWindow"  class="mini-window" title="用户登录" style="width:350px;height:180px;" >
    <div id="loginForm" style="padding:15px;padding-top:10px;">
        <form action="#" method="post" id="myform">
        <table >
            <tr>
                <td style="width:60px;">帐号:</td>
                <td>
                    <input id="username" name="username"  class="mini-textbox" required="true" style="width:150px;"/>
                </td>    
            </tr>
            <tr>
                <td style="width:60px;">密码:</td>
                <td>
                    <input id="pwd" name="pwd" class="mini-password" required="true" style="width:150px;" />
                    &nbsp;&nbsp;<a href="#" >忘记密码?</a>
                </td>
            </tr>            
            <tr>
                <td></td>
                <td style="padding-top:5px;">
                    <a  class="mini-button" style="width:60px;" id="login">登录</a>
                    <a  class="mini-button" style="width:60px;">重置</a>
                </td>
            </tr>
            <tr>
                <td></td>
                <td style="padding-top:5px;">
                    <span style="color:#FF0000;" id="msg"></span>
                </td>
            </tr>
        </table>
        </form>
    </div>
</div>

</body>
</html>

效果:

 

 

posted @ 2013-04-04 10:46  telzhou  阅读(2286)  评论(1)    收藏  举报