当前位置:编程学习 > C#/ASP.NET >>

div弹出层的ajax登录(Jquery版+c#)

答案:

页面初始化,界面如图所示:

Server name文本框获取焦点时候,界面如图所示(这里可以改成你登录的验证码):

可以加载SQL Server服务列表,也是我的简易SQL查询分析器评论中静夜妙思给予的方法,非常感谢!

加载列表如下图所示:

可以随意地点击添加到Server name中,登录时截图所示:

文本框验证都写好了!还有Authentication验证方式,windows验证下面Login,Password文本框禁掉!由于时间原因,不上图了

demo.html(全部前台代码,js/css还没分文件存储)

复制代码 代码如下:

<!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">
<title>DataBase Test Demo</title>
<link href=><!--<script src="js/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>-->
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/treeview/jquery.treeview.js" type="text/javascript"></script>
<style type="text/css">
body{margin:0 auto;font-family:Verdana;font-size:12px;}
.top{margin:0 auto; width:100%; text-align:center; margin-top:20px;}
#browser{display:none;}
</style>
</head>
<body>
<div class="top"><h1>DataBase Test Demo</h1></div>
<ul id="browser" class="databasetree">
<li ><span class="server">SQL Server</span>
<ul>
<li class="closed"><span class="folder">DataBases</span>
<ul>
<li class="closed"><span class="database">Test</span>
<ul></ul>
</li>

</ul>
</li>
</ul>
</li>
</ul>
<style type="text/css">
#greybackground{background: #000;display: block;z-index: 100;width: 100%;position: absolute;top: 0;left: 0; }
#login{margin:0 auto;width:420px;height:auto;border:solid 1px #ccc;position:absolute;z-index:200;background-color:#fff;}
#login .heard{width:420px; height:29px;background-image:url(images/top_bg.gif); border-bottom:solid 1px #ccc;}
#login .heard .left{float:left;line-height:29px;margin-right:2px;padding-left:10px; color:#5aa608;}
#login .heard .right{float:right;line-height:29px;margin-right:5px;}
#login .heard .right a{color:#999;text-decoration:none;}
#login .heard .right a:hover{color:red;text-decoration:underline;}
#login .content{width:420px; height:200px;}
#login .content li{ list-style:none; padding:5px 0px 5px 30px;}
#login .content .top{ width:100%; margin-top:5px;height:30px;line-height:30px;}
#login .content .top .left{ float:left;width:120px; text-align:right;}
#login .content .top .right{ float:right;width:280px;text-align:right;padding-right:20px;}
#login input,#login,select,#login,button{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%;}
#login input{width: 80%;padding: 7px 7px 6px;border-color: #B3B3B3 #EAEAEA #EAEAEA #B3B3B3;border-style: solid;border-width: 1px;color:black;}
#login select{width: 86%;padding: 7px 7px 6px; border-color: #B3B3B3 #EAEAEA #EAEAEA #B3B3B3;border-style: solid;border-width: 1px;color:black;}
#login button,#login .btn-submit,#login .button,#login .btn-submit:focus,#login .button:focus,.btn-submit,.button{border-left: 1px solid #C6C6C6;
border-right: 1px solid #DDDDDD;border-top: 1px solid #DDDDDD;border-bottom: 1px solid #C6C6C6;
cursor:pointer;width:auto;margin:0 10px 0 0;padding-bottom:3px;line-height:1.3em;
color:#515151;font-weight:bold;background:url(images/button.png) #e5e3e3 repeat-x 0 0;
height:32px;padding-left:12px;padding-right: 12px;padding-top: 6px;}
#login button:hover,#login .btn-submit:hover,.button:hover,.btn-submit:hover {background-image:none;}
#login .btn-submit,#login .btn-submit:focus,.btn-submit {width:auto;border-color:#5C91A4 #2B7089 #1A6480 #2A6F89;background-image:url(images/button_highlight.png);background-color:#4e85bb;color:#fff;}
#login .bottom-btn{width:90%; margin:0 auto; padding-top:7px; border-top:1px #ccc solid; margin-top:5px;}

#layer{position:relative;}
#poper{position:absolute;z-index:10;display:none;left:39px;border:solid 1px #ccc; background-color:#fff;}

#poper .heard{height:25px;line-height:25px; width:100%;text-align:right; }
#poper .heard a{color:#999;text-decoration:none;}
#poper .heard a:hover{color:red;text-decoration:underline;}
#poper .first{height:30px;line-height:30px; width:100%;text-align:center; color:#5aa608;}
#poper .first a{color:#5aa608;text-decoration:underline;}
#poper .second{height:20px;line-height:20px; width:100%;text-align:left; margin-left:10px;}
#poper .second a{color:#999; text-decoration:none;}
#poper .second a:hover{color:#5aa608; text-decoration:underline;}
</style>
<div id="login">
<div class="heard"><div class="left">Connect to Server</div><div class="right"><a href=><div class="content">
<div class="top">
<div class="left">Server name:</div>
<div class="right">
<div id="layer">
<input id="txtServer" type="text" />
<div id="poper">
<div class="heard"><a id="layer_close" href=><div class="first"><a id="loadServer" href=></div>
</div>
</div>
</div>
<div class="top"><div class="left">Authentication:</div><div class="right"><select id="selectAuthentication"><option value="windows">Windows Authentication</option><option value="sql" selected="selected">SQL Server Authentication</option></select></div></div>
<div class="top"><div class="left">Login:</div><div class="right"><input id="txtUserName" type="text" /></div></div>
<div class="top"><div class="left">Password:</div><div class="right"><input id="txtPassword" type="password" /></div></div>
<div class="bottom-btn"><input id="btnConnect" type="button" class="btn-submit" value="Connect" /><input id="btnCancel" type="button" class="button" value="Cancel" /><font id="message"></font></div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$("#browser").treeview();

$("#selectAuthentication").change(function() {
if ($(this).val() == "windows") {
$("#txtUserName,#txtPassword").css("background-color", "#eee");
$("#txtUserName,#txtPassword").attr("disabled", "disabled");
} else {
$("#txtUserName,#txtPassword").css("background-color", "#fff");
$("#txtUserName,#t

上一个:用Html5与Asp.net MVC上传多个文件的实现代码
下一个:ASP.NET2.0中用Gridview控件操作数据的代码

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,