JqueryUI登录窗体

最新推荐文章于 2024-06-04 15:23:15 发布

原创最新推荐文章于 2024-06-04 15:23:15 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #JSP #UI

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用JSP技术实现的简单用户登录界面，并通过jQuery实现了对话框的功能。该示例展示了如何在JSP中引入jQuery库并利用其简化DOM操作，包括按钮点击事件触发对话框等。


<%@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>
            密   码：<input type="text"style="width: 200px" id="pwd"><br>
        </div>
    </body>
</html>