2008-07-09

jquery ui 实现的登录框

关键字: js

最近在学习jquery ，今天用jquery ui实现了一个登录用的对话框，现在把代码贴在这里以便以后查看
 

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../themes/flora/flora.all.css" />
        <script src="../jquery-1.2.6.js" type="text/javascript"></script>
        <script src="../ui/ui.core.js" type="text/javascript"></script>
        <script src="../ui/ui.draggable.js" type="text/javascript"></script>
        <script src="../ui/ui.resizable.js" type="text/javascript"></script>
        <script src="../ui/ui.dialog.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">
            $(document).ready(function() {
                $('#bttn1').click(function() {
                    //$('#dialogTest').dialog('open');
                    createLoginDialog();
                });
            });
            function createLoginDialog(){
            	var obj = $("<div></div>").attr("title","create one dialog!").attr("id","dialogTest");
 				var username = $("<lable></lable>").text("Username:");
 				obj = obj.append(username);
 				var userinput = $("<input type='text' name='username'>");
 				obj = obj.append(userinput);
 				var br = $("<br>");
 				obj.append(br);
 				var password = $("<lable></lable>").text("Password:");
 				obj = obj.append(password);
 				var passinput = $("<input type='password' name='password'>");
 				obj = obj.append(passinput);
 				obj.addClass('flora').dialog({
 					width:350,
                	height:150,
                	resizable:'disable',
                	buttons:{
                		'OK':function(){
                			var tmpDialog = $("<div/>")
                			tmpDialog.html("your username is :"+$(this).find("[name='username']").val())
                			.html(tmpDialog.html()+"<br> your password is : "+$(this).find("[name='password']").val())
                			.addClass('flora').dialog({
                				title:'your input value',
                				resizable:'disable'
                			});
                		},
                		'Cancel':function(){
                			$(this).dialog('close');
                		}
                	},
                	title:'My Dialog',
 				});
            }
        </script>
    </head>
    <body>
        <button id="bttn1" value="Open the Dialog">Open the Dialog</button>
    </body>
</html>

 这个只是个简单的输入框，在用户输入后，点击ok按钮就会弹出另外一个对话框把用户输入的内容显示出来。

 

评论
发表评论

您还没有登录，请登录后发表评论

liuhello
搜索本博客
我的相册
71a9aee4-f76c-321c-a208-7b70b5bd51dd-thumb
large_4222h177.jpg
共 2 张
最近加入圈子
存档
最新评论