基于flat-ui与jquery实现的悬浮导航栏实例

最新推荐文章于 2024-07-24 16:53:23 发布

hzc492

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量632

点赞数

分类专栏： j2ee 文章标签： html jsp jquery flat-ui session

本文链接：https://blog.csdn.net/hzc492/article/details/85330581

版权

基于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='cen

最低0.47元/天解锁文章

hzc492

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于flat-ui与jquery实现的悬浮导航栏实例

基于flat-ui实现的悬浮导航栏涉及一些用户登入与注册的操作用了jquery来更改显示内容以反馈一些提示信息用jquerysession来将用户登入信息存在session中实现效果：&lt;%@ page contentType="text/html;charset=UTF-8" language="java" %&gt;&lt;html&gt;&lt;h...
复制链接

扫一扫