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 width: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; }
这样一个简单的登陆界面就完成了。
可以用这个为模板，进行下一步的与数据库的交互数据验证的开发。
