您的位置：首页 > 其它

登录界面和主界面

2016-07-28 11:30 134 查看
效果图：

登录界面：



主界面：



login.jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<base href="<%=basePath%>">
<title>登录界面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="plugin/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="plugin/bootstrap-login-form/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="plugin/bootstrap-login-form/css/form-elements.css" rel="stylesheet">
<link href="plugin/bootstrap-login-form/css/style.css" rel="stylesheet">
</head>
<body>
<!-- Top content -->
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 text">
<h1>xxxx</h1>
<div class="description">
<p>
<b></b>
</p>
</div>
</div>
</div>

<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<div class="form-top">
<div class="form-top-left">
<h3>登录</h3>
<p>请输入你的用户名和密码进行登录:</p>
</div>
<div class="form-top-right">
<i class="fa fa-key"></i>
</div>
</div>

<div class="form-bottom">
<form role="form" action="login/loginCheck" method="post" class="login-form">
<h4 id="errorMsg" style="display:none;color:red">用户名或密码错误</h4>
<div class="form-group">
<label class="sr-only" for="form-username">用户名</label>
<input
type="text" name="userName" placeholder="用户名"
class="form-username form-control" id="userName">
</div>
<div class="form-group">
<label class="sr-only" for="form-password">密码</label>
<input
type="password" name="password" placeholder="密码"
class="form-password form-control" id="password">
</div>

<!-- <h4><span class="label label-warning">用户名或密码错误</span></h4> -->
<!-- <h4><span class="label label-danger">用户名或密码错误</span></h4> -->
<button type="submit" class="btn">登 录</button>
</form>
</div><!-- form-bottom -->

</div><!-- col-sm -->
</div><!-- row -->
</div><!-- container -->
</div><!-- inner-bg -->
</div><!-- top-content -->
<script src="plugin/jquery.min.js"></script>
<script src="plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="plugin/bootstrap-login-form/js/jquery.backstretch.min.js"></script>
<script src="plugin/bootstrap-login-form/js/login.js"></script>
</body>
</html>

--------------index.jsp------------------------

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>标准管理平台</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<frameset rows="60,*" cols="*" frameborder="yes" border="0" framespacing="0">
<frame src="layout/top.jsp" name="top_frame" scrolling="No" noresize="noresize" id="top_frame" title="top_frame" />
<frameset rows="*" cols="260,*" framespacing="0" frameborder="no" border="0">
<frame src="layout/left.jsp" name="left_frame" scrolling="No" noresize="noresize" id="left_frame" title="left_frame" />
<frame src="" name="right_frame" id="right_frame" title="right_frame" />
</frameset>
</frameset>

</html>


——————–left.jsp———————–

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>主页面</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<link href="plugin/jquery-accordion-menu/jquery-accordion-menu.css" rel="stylesheet"/>
<link href="plugin/jquery-accordion-menu/font-awesome.css" rel="stylesheet"/>
<link href="layout/left.css" rel="stylesheet"/>
</head>

<body>
<input id="path" type="hidden" value="<%=path%>"/>
<div class="content">
<div id="jquery-accordion-menu" class="jquery-accordion-menu gray">
<div class="jquery-accordion-menu-header" id="form"></div>
<ul id="demo-list">
</ul>
</div>
</div>
</body>
<script src="plugin/jquery.min.js"></script>
<script src="plugin/jquery-accordion-menu/jquery-accordion-menu.js"></script>
<script src="layout/left.js"></script>

</html>


————left.js——————————

/*
*
*/
//动态创建菜单
var data;
var basedata;
$(document).ready(function(){
var contextPath = $('#path').val();
$.ajax({
type : "get",
async : false,
url : "menu/getOwnMenu",
dataType : "json",
success : function(returndatas) {
data=returndatas;
}
});
var ul=document.getElementById("demo-list");
for(var i=0;i<data.length;i++){
if(data[i].pId==null){
basedata=data[i];
}
if(data[i].pId==basedata.id){
var obj=document.createElement("li");
obj.id=data[i].id;
if(data[i].path==null||data[i].path==""){
obj.innerHTML="<a href='javascript:void(0);' target='right_frame'>"+data[i].menuName+"</a>";
}else{
obj.innerHTML="<a href="+contextPath+"/"+data[i].path+" target='right_frame'>"+data[i].menuName+"</a>";
}
ul.appendChild(obj);
}
}
for(var i=1;i<data.length;i++){
for(var j=1;j<data.length;j++){
if(data[i].pId==data[j].id){
var li=document.getElementById(data[j].id);
var obj1=document.createElement("ul");
var obj2=document.createElement("li");
obj1.className="submenu";
obj2.id=data[i].id;
if(data[i].path==null||data[i].path==""){
obj2.innerHTML="<a href='javascript:void(0);' target='right_frame'>"+data[i].menuName+"</a>";
}else{
obj2.innerHTML="<a href="+contextPath+"/"+data[i].path+" target='right_frame'>"+data[i].menuName+"</a>";
}
obj1.appendChild(obj2);
li.appendChild(obj1);
}
}
}
});
jQuery(document).ready(function () {
jQuery("#jquery-accordion-menu").jqueryAccordionMenu();

});
(function($) {
$.expr[":"].Contains = function(a, i, m) {
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
function filterList(header, list) {
//@header 头部元素
//@list 无需列表
//创建一个搜素表单
var form = $("<form>").attr({
"class":"filterform",
action:"#"
});
}
$(function() {
filterList($("#form"), $("#demo-list"));
});
})(jQuery);


————top.jsp———————

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>主页面</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
body{background:#f0f0f0;}
</style>
</head>

<body>
<div id="aa" style="margin:0">
<div >
<h3 class="bb" >标准管理平台</h3>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航