第三十九章： 後臺管理界面--登陸設計
學習要點：
- HTML部分
- CSS部分
- JQuery部分
一、HTML部分
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
</head>
<body>
<div id="login">
<p>管理員賬號：<input type="text" class="manager" id="textbox"></p>
<p>管理員密碼：<input type="password" class="password" id="textbox"></p>
</div>
<div id="btn">
<a href="#" class="easyui-linkbutton">登陸</a>
</div>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
二、CSS部分
#login{
padding:6px 0 0 0;
}
p{
height:22px;
line-height:22px;
padding:4px 0 0 25px;
}
.textbox{
height:22px;
padding:0 2px;
}
#btn{
text-align:center;
}
.easyui-linkbutton{
padding:0 10xp;
}
三、JQuery部分
$(function(){
$('#login').dialog({
title:'後臺管理',
width:300px,
height:180px,
modal:true,
iconCls:'icon-login',
buttons:'#btn',
});
//管理員賬號驗證
$('#manager').validatebox({
required:true,
missingMessage:'請輸入管理員賬號：',
invalidMessage:'管理員賬號不得爲空',
});
//管理員密碼驗證
$('#password').validatebox({
required:true,
validType：'length[6,30]',
missingMessage:'請輸入管理員密碼：',
invalidMessage:'管理員密碼不得爲空',
});
//加載時判斷驗證
if(!$('#manager').validatebox('isValid')){
$('#manager').focus();
}else if(!$('#password').validatebox('isValid')){
$('#password').focus();
}
//單擊登陸
$('#btn a').click(function(){
if(!$('#manager').validatebox('isValid')){
$('#manager').focus();
}else if(!$('#password').validatebox('isValid')){
$('#password').focus();
}else{
alert(提交中……);
}
});
});
作者：Roger_CoderLife
鏈接：https://blog.csdn.net/Roger_CoderLife/article/details/103905207
本文根據網易雲課堂JQuery EasyUI視頻教程翻譯成文檔，轉載請註明原文出處，歡迎轉載