您的位置：首页 > Web前端 > JQuery

jquery EasyUi 登录页设计

2016-03-27 21:06 543 查看

jquery EasyUi 初步理解（1）

制作网站登录页：

重点内容

1，导入标签库 jquryEasyUi js文件，可以去官网下载

[]http://www.jeasyui.net/download/]

2，根据api文档引用class文件

<!DOCTYPE>
<HTML>
<HEAD>
<TITLE>欢迎登录</TITLE>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.easyui.min.js" type="text/javascript"></script>
<link href="themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="themes/icon.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
$('#login-window').window({
//可伸缩箭头
collapsible:false,
// 最小化
minimizable:false,
// 最大化
maximizable:false,
//调整窗口大小
resizable:false,
//拖拽操作
draggable:true,
//关闭按钮
closable:false
});
});
document.onkeydown = function(e){
var event = e || window.event;
var code = event.keyCode || event.which || event.charCode;
if (code == 13) {
login();
}
}
$(function(){
$("input[name='login']").focus();
});
function cleardata(){
$('#loginForm').form('clear');
}
function login(){
if($("input[name='login']").val()=="" || $("input[name='password']").val()==""){
$("#showMsg").html("用户名或密码为空，请输入");
$("input[name='login']").focus();
}else{
$.ajax({
type:"post",
url:"<%=basePath%>sys/login.html",
data:$("#loginForm").serialize(),
error:function(request) {
//alert(request.getAttribute("showMsg"));
$("#showMsg").html("用户名或密码错误");
},
success:function(data) {
//alert(data);
window.open('<%=basePath%>sys/login/success.html','_self');
}
});

}
}
</script>
</HEAD>
<BODY>
<div id="login-window" class="easyui-window" title="登录" style="padding:5px;width:350px;height:188px" >
<div class="easyui-layout" fit="true">
<div region="center" border="false" style="padding:5px;background:#fff;border:1px solid #ccc;">
<form  id="loginForm" method="post" action="sys/login.html">
<div style="padding:5px 0;">
<label for="login">帐号:</label>
<input type="text" name="login_id" style="width:260px;"></input>
</div>
<div style="padding:5px 0;">
<label for="password">密码:</label>
<input type="password" name="password" style="width:260px;"></input>
</div>
<div style="padding:5px 0;text-align: center;color: red;" id="showMsg"></div>
</form>
</div>
<div region="south" border="false" style="text-align:right;padding:5px 0;">
<a class="easyui-linkbutton" iconCls="icon-ok" href="javascript:void(0)" onclick="login()">登录</a>
<a class="easyui-linkbutton" iconCls="icon-cancel" href="javascript:void(0)" onclick="cleardata()">重置</a>
</div>
</div>
</div>
</BODY>
</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery api easyui

相关文章推荐

新的分享

章节导航