基于flat-ui与jquery实现的悬浮导航栏实例
基于flat-ui实现的悬浮导航栏
涉及一些用户登入与注册的操作
用了jquery来更改显示内容以反馈一些提示信息
用jquerysession来将用户登入信息存在session中
实现效果：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>head</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/css/flat-ui.css">
<script src="dist/js/jquery-3.3.1.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="dist/js/jquerysession.js"></script>
<script>
$(document).ready(function () {
if ($.session.get("id") != null) {
$("#user_sst").html("<li class='dropdown'><button class='btn btn-inverse dropdown-toggle' data-toggle='dropdown' >欢迎 " + $.session.get('id') + " </button>" +
"<ul class='dropdown-menu dropdown-menu-inverse'>" +
"<li><a href='user.jsp'>个人中心</a></li> " +
"<li><a id='modal-3' href='#modal-container-3' data-toggle='modal'>退出</a></li>" +
"</ul></li>");
}
else {
$("#user_sst").html("<li><a id=\"modal-1\" href=\"#modal-container-1\" data-toggle=\"modal\">注册</a></li> <li><a id=\"modal-2\" href=\"#modal-container-2\" data-toggle=\"modal\">登入</a></li>");
}
$("#log_sub").click(function () {
$("#log_st").html("");
$("#log_id").attr({"class": "form-group"});
$("#log_pas").attr({"class": "form-group"});
$.post("/login_check", {
id: $("#log_id_").val(),
pas: $("#log_pas_").val()
}, function (data) {
if (data === "success") {
$("#log_st").html("<p class='alert-success' align='center'>登入成功</p>");
$("#log_id").attr({"class": "form-group has-success"});
$("#log_pas").attr({"class": "form-group has-success"});
$.session.set("id", $("#log_id_").val());
location.reload();
}
else {
$("#log_st").html("<p class='alert-danger' align='center'>用户名或密码错误</p>");
$("#log_id").attr({"class": "form-group has-error"});
$("#log_pas").attr({"class": "form-group has-error"});
}
})
});
$("#reg_sub").click(function () {
$("#reg_st").html("");
$("#reg_id").attr({"class": "form-group"});
$("#reg_pas1").attr({"class": "form-group"});
$("#reg_pas2").attr({"class": "form-group"});
if ($("#reg_pas1_").val() !== $("#reg_pas2_").val()) {
$("#reg_st").html("<p class='alert-danger' align='center'>两次密码不一致</p>")
$("#reg_pas1").attr({"class": "form-group has-error"});
$("#reg_pas2").attr({"class": "form-group has-error"});
}
else {
$.post("/reg_check", {
id: $("#reg_id_").val(),
pas: $("#reg_pas1_").val()
}, function (data) {
if (data === "success") {
$("#reg_st").html("<p class='alert-success' align='center'>注册成功</p>")
$("#reg_pas1").attr({"class": "form-group has-success"});
$("#reg_pas2").attr({"class": "form-group has-success"});
$.session.set("id", $("#reg_id_").val());
location.reload();
}
else {
$("#reg_st").html("<p class='alert-warning' align='center'>该用户名已被使用或非法</p>")
$("#reg_id").attr({"class": "form-group has-warning"});
}
})
}
});
$("#logout").click(function () {
$.session.remove("id");
location.reload();
});
})
</script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Title</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.jsp">Main_page</a></li>
<li class="active"><a href="next_page.jsp">next_page</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" id="user_sst">
</ul>
</div>
</div>
</nav>
<div class="modal fade" id="modal-container-2" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel2" align="center">
登入
</h4>
</div>
<div class="modal-body">
<form name="log_form">
<div class="row form-group">
<div class="col-lg-offset-3 col-lg-6" id="log_st">
<!--<p class="alert-success" align="center">gg?</p>-->
</div>
</div>
<div class="row form-group">
<div class="form-group" id="log_id">
<div class="col-lg-1"></div>
<div class="col-lg-3" align="right">
<label class="control-label" for="log_id_">用户名</label>
</div>
<div class="col-lg-6">
<input type="text" class="form-control" id="log_id_"
placeholder="请在此输入用户名">
</div>
<div class="col-lg-2"></div>
</div>
</div>
<div class="row form-group">
<div class="form-group" id="log_pas">
<div class="col-lg-1"></div>
<div class="col-lg-3" align="right">
<label class="control-label" for="log_pas_">密码</label>
</div>
<div class="col-lg-6">
<input type="password" class="form-control" id="log_pas_"
placeholder="请在此输入密码">
</div>
<div class="col-lg-2"></div>
</div>
</div>
<div class="row form-group">
<div class="col-lg-2"></div>
<div class="col-lg-4">
<button type="reset" class="btn btn-default btn-wide">重置</button>
</div>
<div class="col-lg-4">
<button type="submit" class="btn btn-primary btn-wide" id="log_sub" onclick="return false">
登入
</button>
</div>
<div class="col-lg-2"></div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-container-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel" align="center">
注册
</h4>
</div>
<div class="modal-body">
<form name="reg_form">
<div class="row form-group">
<div class="col-lg-offset-3 col-lg-6" id="reg_st">
<!--<p class="alert-success" align="center">gg?</p>-->
</div>
</div>
<div class="row form-group">
<div class="form-group" id="reg_id">
<div class="col-lg-1"></div>
<div class="col-lg-3" align="right">
<label class="control-label" for="reg_id_">用户名</label>
</div>
<div class="col-lg-6">
<input type="text" class="form-control" id="reg_id_"
placeholder="请在此输入用户名">
</div>
<div class="col-lg-2"></div>
</div>
</div>
<div class="row form-group">
<div class="form-group" id="reg_pas1">
<div class="col-lg-1"></div>
<div class="col-lg-3" align="right">
<label class="control-label" for="reg_pas1_">密码</label>
</div>
<div class="col-lg-6">
<input type="password" class="form-control" id="reg_pas1_"
placeholder="创建你的密码">
</div>
<div class="col-lg-2"></div>
</div>
</div>
<div class="row form-group">
<div class="form-group" id="reg_pas2">
<div class="col-lg-1"></div>
<div class="col-lg-3" align="right">
<label class="control-label" for="reg_pas2_">验证密码</label>
</div>
<div class="col-lg-6">
<input type="password" class="form-control" id="reg_pas2_"
placeholder="请再次输入密码">
</div>
<div class="col-lg-2"></div>
</div>
</div>
<div class="row form-group">
<div class="col-lg-2"></div>
<div class="col-lg-4">
<button type="reset" class="btn btn-default btn-wide">重置</button>
</div>
<div class="col-lg-4">
<button type="submit" class="btn btn-primary btn-wide" id="reg_sub" onclick="return false">
提交
</button>
</div>
<div class="col-lg-2"></div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-container-3" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel3" align="center">
确定退出吗？
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-4">
<button type="button" class="btn btn-default btn-wide" data-dismiss="modal"
aria-hidden="true">取消
</button>
</div>
<div class="col-lg-4">
<button class="btn btn-primary btn-wide" id="logout">退出</button>
</div>
<div class="col-lg-2"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>