|
|
最近在学习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按钮就会弹出另外一个对话框把用户输入的内容显示出来。
|
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡