Jquery-UI后台管理（1）

登陆界面

先下载jquery-2.1.4　和EasyUI1.4.4

引用相关文件到前台页面中

html如下：

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 4 <title>登陆</title>
 5 <script src="../jquery-2.1.4/jquery.min.js"></script>
 6 <script src="../EasyUI1.4.4/jquery.easyui.min.js"></script>
 7 <link href="../EasyUI1.4.4/themes/default/easyui.css" rel="stylesheet" />
 8 <link href="../EasyUI1.4.4/themes/icon.css" rel="stylesheet" />
 9 <script src="JavaScript.js"></script>
10 <link href="login.css" rel="stylesheet" />
11 </head>
12 <body>
13 <form id="form1" runat="server">
14 <div id="login">
15 <p>管理员账号：<input type="text" id="manager" class="textbox" /></p>
16 <p>管理员密码：<input type="text" id="password" class="textbox"/></p>
17 </div>
18 <div id="btn">
19 <a href="#" class="easyui-linkbutton">登录</a>
20 
21 </div>
22 </form>
23 </body>
24 </html>

ｊｓ文件内容如下：

 1 $(function () {                 //登陆界面
 2     $("#login").dialog({
 3         title:'登陆后台',
 4         300,
 5         height:180,
 6         modal: true,
 7         buttons:"#btn",
 8     });
 9     
10     //输入框验证
11     $("#manager").validatebox({
12         required: true,                           //是否验证
13         missingMessage: '请输入管理员账号!',       //为空时显示内容
14         invalidMessage:'管理员账号不能为空!',
15     });
16     $("#password").validatebox({
17         required: true,
18         validType:'length[6,30]',                  //验证规则
19         missingMessage: '请输入管理员密码!',
20         invalidMessage: '管理员密码必须在6-30位之间!',   //当文本框的内容被验证为无效时出现的提示。
21 
22     });
23 
24     //点击登陆
25     $("#btn a").click(
26         function () {
27             if(!$("#manager").validatebox('isValid'))  {    //判断是否通过验证
28                 $("#manager").focus();
29             }
30             else if (!$("#password").validatebox('isValid')){    //判断是否通过验证         
31                 $("#password").focus();
32             }
33             else {
34                 alert("提交中...");
35             }
36         }
37         );
38     if (!$("#manager").validatebox('isValid')) {    //判断是否通过验证
39         $("#manager").focus();
40     }
41     else if (!$("#password").validatebox('isValid')) {    //判断是否通过验证         
42         $("#password").focus();
43     }
44 });

ｃｓｓ样式表内容如下：

body {
}
#login {
    padding:6px 0 0 0;
}
p {
    height:22px;
    line-height:22px;
    padding:4px 0 0 25px;
}
.textbox {
    height:22px;
    padding:0 2px;
}
.easyui-linkbutton {
    padding:0 10px;
}
#btn {
    text-align:center;
}

这样一个简单的登陆界面就完成了。

可以用这个为模板，进行下一步的与数据库的交互数据验证的开发。