JqueryUI登录窗体

wangronaldo

浏览: 98626 次
性别:
来自: 长沙

最近访客更多访客>>

yzw1213561

樱敏913

我太难了

jinhailion

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

HTML JSP UI

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="jqueryUI/jquery-1.6.js" type="text/javascript"></script>
        <script src="jqueryUI/jquery-ui.js" type="text/javascript"></script>
        <link type="text/css" href="jqueryUI/jquery-ui.css" rel="stylesheet" /> 
        <title>JSP Page</title>
        <style> 
            body { font-size: 62.5%; }
            label, input { display:block; }
            input.text { margin-bottom:12px; width:95%; padding: .4em; }
            fieldset { padding:0; border:0; margin-top:25px; }
            h1 { font-size: 1.2em; margin: .6em 0; }
            div#users-contain { width: 350px; margin: 20px 0; }
            div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
            div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
            .ui-dialog .ui-state-error { padding: .3em; }
            .validateTips { border: 1px solid transparent; padding: 0.3em; }
        </style> 
        <script type="text/javascript">
            
            $(function(){
                $( "#btn" ).button().click(function() {
                    $( "#dialog-confirm" ).dialog( "open" );
                });
                $( "#dialog-confirm" ).dialog({
                    autoOpen: false,
                    height:180,
                    modal: true,
                    buttons: {
                        "登录": function() {
                            $( this ).dialog( "close" );
                            $("#name").val("");
                            $("#pwd").val("");
                        },
                        "退出": function() {
                            $( this ).dialog( "close" );
                        }
                    }
                });
            })
        </script>
    </head>
    <body>
        <input type="button" value="登录" id="btn"></input>
        <div id="dialog-confirm" title="用户登录">
            用户名：<input type="text" style="width: 200px" id="name"><br>
            密&nbsp;&nbsp;&nbsp;码：<input type="text"style="width: 200px" id="pwd"><br>
        </div>
    </body>
</html>

分享到：