js登录与layout菜单布局
2016-05-18 09:32
351 查看
1.登录的js代码
javascrip判断是否按了enter按钮
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();
});
javascript控制页面跳转
document.location="source/list.do";
2.使用layout与菜单树的页面jsp
代码:<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>页面布局</title>
<link rel="stylesheet" type="text/css" href="../css/default.css">
<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="../easyui/themes/gray/easyui.css"/>
<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">
$(function () {
//动态菜单数据
var treeData = [{
text : "菜单",
children : [ {
text : "信息源",
attributes : {
url : "list.json"
}
}, {
text : "一级菜单2",
attributes : {
url : "2"
}
}, {
text : "一级菜单3",
attributes : {
url : "3"
}
}
]
}];
//实例化树形菜单
$("#tree").tree({
data : treeData ,
lines : true,
onClick : function (node) {
if (node.attributes) {
Open(node.text, node.attributes.url);
}
}
});
//在右边center区域打开菜单，新增tab
function Open(text, url) {
if ($("#tabs").tabs('exists', text)) {
$('#tabs').tabs('select', text);
} else {
var con = '<table id="list" title="信息源" class="easyui-datagrid" style="width:1400px;height:600px"'+
'url="'+url+'"rownumbers="true" fitColumns="true" singleSelect="true" pagination="true">' +
'<div id="toolbar">'+
'<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新建</a>'+
'<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a>'+
'<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="delectUser()">删除</a>'+
'<input id="ss" class="easyui-searchbox" name="name" prompt="请输入网站名称" style="width: 130px; vertical-align: middle;"></input>'+
'</div>'+
'<thead>' +
'<tr>' +
'<th data-options="field:\'id\',width:100,align:\'left\'">ID</th>' +
'<th data-options="field:\'name\',width:200,align:\'left\'">网站名称</th>' +
'<th data-options="field:\'section\',width:100,align:\'left\'">栏目</th>' +
'<th data-options="field:\'url\',width:300,align:\'left\'">URL</th>' +
'<th data-options="field:\'source\',width:300,align:\'left\'">来源</th>' +
'<th data-options="field:\'created\',width:300,align:\'left\'">新建时间</th>' +
'<th data-options="field:\'status\',width:100,align:\'left\'">状态</th>' +
'</tr>' +
'</thead>' +
'</table>';
$('#tabs').tabs('add', {
title : text,
closable : true,
content : con
});
$('#ss').searchbox({
searcher:function(value){
$("#list").datagrid('reload',{name:value});
} }) ;
}
}
});
function editUser(){
var row = $('#list').datagrid('getSelected');
if (row){
$("#fm").form("clear");
//地区字符串
var reionstr = '{"1":"安徽省","2":"北京市","3":"福建省","4":"甘肃省","5":"广东省","6":"广西壮族自治区","7":"贵州省","8":"海南省","9":"河北省","10":"河南省","11":"黑龙江省","12":"湖北省","13":"湖南省","14":"吉林省","15":"江苏省","16":"江西省","17":"辽宁省","18":"内蒙古自治区","19":"宁夏回族自治区","20":"青海省","21":"山东省","22":"山西省","23":"陕西省","24":"上海市","25":"四川省","26":"天津市","27":"西藏自治区","28":"新疆维吾尔自治区","29":"云南省","30":"浙江省","31":"重庆市","32":"新疆建设兵团","33":"黑龙江垦区","34":"广东农垦","35":"全国"}';
var resionjson = eval('('+reionstr+')');
var opt = "";
var regionData = $("#region_id");
$("#region_id").empty();
for(var r in resionjson){
opt = opt + "<option value='" + r + "'>" + resionjson[r] + "</option>";
}
regionData.append(opt);
$("#id").val(row.id);
$("#name").val(row.name);
$("#section").val(row.section);
$("#url").val(row.url);
$("#source").val(row.source);
$("#list_template").val(row.listTemplate);
$("#article_template").val(row.articleTemplate);
$("#fm").attr("action","update.json");
$("#dlg").dialog("open").dialog('setTitle', '编辑');
$("#region_id").val(row.regionId);
$("#saveUser").unbind("click").click(function (){
if( $("#name").val() == null || $("#name").val() == ''){
$.messager.show({
title: '提示',
msg: '必须填写网站名称!',
timeout: 5000,
});
return;
};
if($("#section").val() == null || $("#section").val() == ''){
$.messager.show({
title: '提示',
msg: '必须填写栏目!',
timeout: 5000,
});
return;
};
if($("#url").val() == null || $("#url").val() == ''){
$.messager.show({
title: '提示',
msg: '必须填写网址!',
timeout: 5000,
});
return;
};
if($("#source").val() == null || $("#source").val() == ''){
$.messager.show({
title: '提示',
msg: '必须填写来源!',
timeout: 5000,
});
return;
};
if($("#region_id").val() == null || $("#region_id").val() == ''){
$.messager.show({
title: '提示',
msg: '必须选择地区!',
timeout: 5000,
});
return;
};
$.ajax({
url:'update.do',
data:$('#fm').serialize(),
type:"POST",
success:function(){
$("#list").datagrid('reload');
}
});
$('#dlg').dialog('close');
$.messager.show({
title: '提示',
msg: '修改完成!',
timeout: 5000,
});
});
}else{
$.messager.show({
title: '提示',
msg: '必须选择一条数据!',
timeout: 5000,
});
}
}
function newUser(){
$("#fm").form("clear");
$("#region_id").val();
$("#dlg").dialog("open").dialog('setTitle', '新建');
$("#region_id").empty();
// $("#region_id").append("<option value=''>--请选择--</option>");
$.ajax({
type: "post",
url: "searchreion.json",
dataType: "json",
success: function(data){
var regionData = $("#region_id");
var opt ="<option value=''>--请选择--</option>";
for(var r in data){
opt = opt + "<option value='" + r + "'>" + data[r] + "</option>";
}
regionData.append(opt);
}
});
$("#saveUser").unbind("click").click(function (){
if( $("#name").val() == null || $("#name").val() == ''){
$.messager.show({
title: '提示',
msg: '必须填写网站名称!',
timeout: 5000,
});
return;
};
if($("#section").val() == null || $("#section").val() == ''){
$.messager.show({
title: '提示',
msg: '必须填写栏目!',
timeout: 5000,
});
return;
};
if($("#url").val() == null || $("#url").val() == ''){
$.messager.show({
title: '提示',
msg: '必须填写网址!',
timeout: 5000,
});
return;
};
if($("#source").val() == null || $("#source").val() == ''){
$.messager.show({
title: '提示',
msg: '必须填写来源!',
timeout: 5000,
});
return;
};
if($("#region_id").val() == null || $("#region_id").val() =
dd38
= ''){
$.messager.show({
title: '提示',
msg: '必须选择地区!',
timeout: 5000,
});
return;
};
$.ajax({
url:'insert.do',
data:$('#fm').serialize(),
type:"POST",
success:function(){
$("#list").datagrid('reload');
}
});
$('#dlg').dialog('close');
$.messager.show({
title: '提示',
msg: '新增完成!',
timeout: 5000,
});
});
}
function delectUser(){
var row = $('#list').datagrid('getSelected');
if(row){
$(function () {
// $.messager.defaults = { ok: "是", cancel: "否" };
$.messager.confirm("操作提示", "您确定要删除吗？", function (data) {
if (data) {
$("#fmdl").form("clear");
$('#deid').val(row.id);
$.ajax({
url:'delect.do',
data:$('#fmdl').serialize(),
type:"POST",
success:function(){
$("#list").datagrid('reload');
$.messager.show({
title: '提示',
msg: '已删除!',
timeout: 5000,
});
}
});
}
});
});
}else{
$.messager.show({
title: '提示',
msg: '必须选择一条数据!',
timeout: 5000,
});
}
}
function logout(){
$.ajax({
url:'../system/logout.do',
success:function(){
document.location="../";
}
});
}
</script>
<style type="text/css">
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
.west{
width:200px;
padding:10px;
}
.north{
height:100px;
}
#fm
{
margin: 0;
padding: 10px 30px;
}
.ftitle
{
font-size: 14px;
font-weight: bold;
padding: 5px 0;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.fitem
{
margin-bottom: 20px;
}
.fitem label
{
display: inline-block;
width: 80px;
}
.fitem input
{
width: 400px;
}
.fitem textarea
{
width: 400px;
height: 100px;
max-width: 400px;
max-height: 100px;
}
</style>
</head>
<body class="easyui-layout">
<div region="north" class="north" title="后台管理系统" >
<span>最简单的左右结构实现，及tab的右键菜单实现，右键查看源码</span>
<div align="right"><a style="" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-no" plain="true" onclick="logout()">注销</a></div>
</div>
<div region="center" title="center">
<div class="easyui-tabs" fit="true" border="false" id="tabs">
<div title="首页"></div>
</div>
</div>
<div region="west" class="west" title="menu">
<ul id="tree"></ul>
</div>
<div id="dlg" class="easyui-dialog" style="width: 800px; height: 500px; padding: 10px 20px;" closed="true" buttons="#dlg-buttons">
<form id="fm" method="post" >
<input type="hidden" name="id" id="id" />
<div class="fitem">
<label >网站名称</label>
<input id="name" name="name" class="easyui-validatebox" />
</div>
<div class="fitem">
<label>栏目</label>
<input id="section" name="section" class="easyui-validatebox" />
</div>
<div class="fitem">
<label>网址</label>
<input id="url" name="url" class="easyui-validatebox" />
</div>
<div class="fitem">
<label>来源</label>
<input id="source" name="source" class="easyui-validatebox" />
</div>
<div class="fitem">
<label>列表页模板</label>
<textarea id="list_template" name="list_template" class="easyui-validatebox" ></textarea>
</div>
<div class="fitem">
<label>文章页模板</label>
<textarea id="article_template" name="article_template" class="easyui-validatebox" ></textarea>
</div>
<div class="fitem">
<label>地区</label>
<select id="region_id" name="region_id" >
</select>
<label>请选择地区</label>
</div>
</form>
<div id="dlg-buttons">
<a id="saveUser" href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-save">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')" iconcls="icon-cancel">取消</a>
</div>
<form id="fmdl" method="post" style="display:'none'" >
<input type="hidden" name="id" id="deid" />
</form>
</div>
</div>
</body>
</html>3.登录页面jsp
代码:<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>欢迎登录</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/gray/easyui.css"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="loginWin" class="easyui-window" title="登录" style="width:350px;height:188px;padding:5px;"
minimizable="false" maximizable="false" resizable="false" collapsible="false">
<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="system/login.do">
<div style="padding:5px 0;">
<label for="login">登录名:</label>
<input type="text" name="login_name" 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>
<script type="text/javascript">
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异步提交
$.ajax({
type:"POST", //post提交方式默认是get
url:"system/login.do",
data:$("#loginForm").serialize(), //序列化
error:function(request) { // 设置表单提交出错
$("#showMsg").html("");
$("#showMsg").html("表单提交出错!"); //登录错误提示信息
},
success:function(data) {
if(!data){
$("#showMsg").html("");
$("#showMsg").html("用户名或密码错误，请重新输入!");
}else{
document.location="source/list.do"
}
}
});
}
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript开发之路02（Sencha Touch使用时常见问题及解决办法）
- jsp 取 map<String,List>值
- jsp 关于导出excel 自动转换 科学计数法 显示的问题
- javascript通过ajaxpro 调用后台C#函数，js报错 ‘XXX’ 未定义
- date通过json传递序列化后的前台转换
- Gson和json的区别
- Javascript算术运算
- maven关于jstl
- <jsp:forward >标签
- js单条新闻向上滚动
- ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆
- [Sencha ExtJS & Touch] 表格(Ext.grid.Grid) 和 表格视图选项(Ext.grid.plugin.ViewOptions) 使用的时候要注意的问题
- json字符串与json对象的相互转换
- JavaScript console 用法大全
- js中typeof和constructor
- 利用Gson将对象转换成json,忽略某些字段的方法
- js验证框架实现代码分享
- 深入理解JavaScript中的对象复制(Object Clone)
- 如何判断Javascript对象是否存在的简单实例
- 详解JavaScript设计模式开发中的桥接模式使用