div彈出層的ajax登錄(Jquery版+c#)

2024-09-01 08:30:06

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

頁面初始化，界面如圖所示：

Server name文本框獲取焦點時候，界面如圖所示（這里可以改成你登錄的驗證碼）：

可以加載SQL Server服務(wù)列表，也是我的簡易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="js/treeview/jquery.treeview.css" rel="stylesheet" type="text/css" />

<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;}