精华内容
下载资源
问答
  • 方式一,使用<iframe>标签 优点:减少网络流量(不用每次返回都包含菜单,header,...标签 优点:结构清晰灵活 缺点:网络流量增大(每个jsp页面返回都需要包含菜单,header,footer等信息)方式三...
    方式一,使用<iframe>标签
           优点:减少网络流量(不用每次返回都包含菜单,header,footer等信息)
            缺点:使用<iframe>标签布局,结构不灵活。
    方式二,<jsp:include>标签
           优点:结构清晰灵活
           缺点: 网络流量增大(每个jsp页面返回都需要包含菜单,header,footer等信息)
    方式三,使用ajax异步加载,动态添加元素,原页面不全局重新刷新。
           优点:减少网络流量传输,前后端分离,后台仅提供接口(SPA simple page application单页面应用开发) 
           缺点:需要手动处理js操作,动态添加,删除元素,设置原始属性等。
    展开全文
  • 网页左侧菜单栏设计

    万次阅读 2018-03-31 12:00:29
    一目了然,这个菜单栏要达到的要求是:鼠标点击菜单的时候,对应的内容会显示出来,而其他菜单的内容则不显示。 简介这个菜单栏运用的主要知识点:CSS中display 和js中onclick;display:主要属性有none,block,...

        今天刚学了js的主要内容和HTML网页布局,开始着手写个菜单栏。下面先放上实际写出来的效果图。一目了然,这个菜单栏要达到的要求是:鼠标点击菜单的时候,对应的内容会显示出来,而其他菜单的内容则不显示。


        简介这个菜单栏运用的主要知识点:CSS中display 和js中onclick;

    display:主要属性有none,block,inline...none属性表示隐藏该标签,block和inline属性分别表示以块级元素和内联元素显示;display为none时就解决了我们需要的只有点击的菜单对应的内容显示出来,其它菜单的内容不显示。

    接下来是解决怎样出现这种点击就显示出来的动态效果呢,这就运用到JavaScript的知识。我们在菜单栏定义一个‘按钮’函数,当我们点击其中一个菜单栏时,这个菜单栏的display属性去掉或者为block表示内容可见,其他菜单栏的display为none表示内容不可见,也就实现了我们的菜单栏的操作。

    附上整个菜单栏的代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .hide{
                display: none;
            }
            .item .header{
                height: 35px;
                background-color: green;
                color: white;
                line-height: 35px;
            }
        </style>
    </head>
    <body>
        <div style="height: 48px"></div>
    
        <div style="width: 300px">
    
            <div class="item">
                <div id='i1' class="header" οnclick="ChangeMenu('i1');">菜单1</div>
                <div class="content">
                    <div>内容1</div>
                    <div>内容1</div>
                    <div>内容1</div>
                </div>
            </div>
            <div class="item">
                <div id='i2' class="header" οnclick="ChangeMenu('i2');">菜单2</div>
                <div class="content hide">
                    <div>内容2</div>
                    <div>内容2</div>
                    <div>内容2</div>
                </div>
            </div>
            <div class="item">
                <div id='i3' class="header" οnclick="ChangeMenu('i3');">菜单3</div>
                <div class="content hide">
                    <div>内容3</div>
                    <div>内容3</div>
                    <div>内容3</div>
                </div>
            </div>
            <div class="item">
                <div id='i4' class="header" οnclick="ChangeMenu('i4');">菜单4</div>
                <div class="content hide">
                    <div>内容4</div>
                    <div>内容4</div>
                    <div>内容4</div>
                </div>
            </div>
    
    
    
        </div>
    
        <script>
            function ChangeMenu(nid){
                var current_header = document.getElementById(nid);
    
                var item_list = current_header.parentElement.parentElement.children;
    
                for(var i=0;i<item_list.length;i++){
                    var current_item = item_list[i];
                    current_item.children[1].classList.add('hide');
                }
    
                current_header.nextElementSibling.classList.remove('hide');
            }
        </script>
    </body>
    </html>

    其中<script>标签中的函数代码:

            function ChangeMenu(nid){
                var current_header = document.getElementById(nid);
    
                var item_list = current_header.parentElement.parentElement.children;//找到所有菜单栏组成的列表
    
                for(var i=0;i<item_list.length;i++){
                    var current_item = item_list[i];
                    current_item.children[1].classList.add('hide'); //循环,将每个item的第二个孩子(即内容)隐藏,内容不可见
                }
    
                current_header.nextElementSibling.classList.remove('hide');//当前菜单栏标签的下一个标签(即对应的内容)去掉display属性,内容可见
            }

    展开全文
  • 首页  基本信息  休假记录  加班记录  资质记录  合同记录 ...是一种简单实现,一个页面内的两个div,一个里面是菜单,一个里面放置iframe,实现了加入菜单链接后跳转到本页面的div里面
     <div class="sidebar1" align="center">
    


        <ul  class="nav">
          <li><a href="${pageContext.request.contextPath }/jsp/NewFile.jsp" target="test">首页</a></li>
          <li><a href="#menu2">基本信息</a></li>
          <li><a href="#menu3">休假记录</a></li>
          <li><a href="#menu4">加班记录</a></li>
          <li><a href="#menu5">资质记录</a></li>
          <li><a href="#menu6">合同记录</a></li>
        </ul>
        <!-- end .sidebar1 --></div>
       


      <div    class="content" >
      <iframe src="http://qq.com/" name="test" frameborder="no" class="Displayarea" ></iframe>


      <!-- end .content -->

        </div>

    //

    是一种简单实现,一个页面内的两个div,一个里面是菜单,一个里面放置iframe,实现了加入菜单链接后跳转到本页面的div里面

    展开全文
  • 一个java的管理系统,菜单数据都从数据库中查出,在jsp页面上上部的菜单可以选择左侧菜单的数据,这个怎么实现?给个代码看看
  • 本篇继续完善shoolmater.jsp页面,主要有以下三点:task2-4:完成顶部标题栏设计,使右侧显示登录用户的信息 task2-5:完善左侧菜单栏的设计,使菜单栏每个选项指向一个网页 task2-6:完善右侧内容区域设计,点击菜单栏...

    1. 背景

    上一篇我们已经实现了后台管理页面基本的布局。本篇我们要实现一个重要功能,就是点击左侧菜单后,跳转对应页面的功能。

    例如左侧点击“课程管理”菜单,右侧就要显示课程管理对应的jsp页面。

    2. 创建演示页面

    为了便于演示,我们创建两个演示页面page1.jsp和page2.jsp。代码如下:

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!-- 使用c:标签需要添加本行代码 -->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title></title>
    </head>
    <body>这里是page1.jsp
    </body>
    </html>
    
    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!-- 使用c:标签需要添加本行代码 -->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title></title>
    </head>
    <body>这里是page2.jsp
    </body>
    </html>
    

    3. 构造超级链接

    改造index.jsp左侧菜单,将固定文字替换为超级标签导航。

    		<div id="left">
    			<ul>
    				<li><a href="page1.jsp">页面1</a></li>
    				<li><a href="page2.jsp">页面2</a></li>
    			</ul>
    		</div>
    

    此时点击左侧菜单,会直接跳转到page1.jsp,并未实现我们想要的page1.jsp内容显示到右侧内容区域的效果。

    此路不通!

    4. 实现jsp页面的动态包含

    jsp提供了<jsp:include>标签用于动态的将jsp页面内容嵌入当前页面。

    我们的思路修改下,首先超级链接a标签后,跳转servlet,servlet获取a标签指定的页面信息,然后再跳回index.jsp页面。

    此时可以将页面信息通过<jsp:include>将指定页面放入右侧内容区域,这样就实现了我们想要的效果。

    4.1 修改左侧菜单部分的超级链接。

            <div id="left">
    			<ul>
    				<li><a href="/HomeworkSystem/RouteServlet?childPage=page1.jsp">页面1</a></li>
    				<li><a href="/HomeworkSystem/RouteServlet?childPage=page2.jsp">页面2</a></li>
    			</ul>
    		</div>
    

    4.2 创建用于导航的servlet

    创建RouteServlet,功能很简单,就是接受超级链接发起的请求,还是返回index.jsp页面,但是告知index.jsp页面右侧内容区域要加载的页面信息,即子页面childPage名称。

    
    @WebServlet("/RouteServlet")
    public class RouteServlet extends HttpServlet {
    	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// 设置输入输出格式、编码
    		response.setContentType("text/html");
    		request.setCharacterEncoding("utf-8");
    		response.setCharacterEncoding("utf-8");
    		// 获取用户在网页输入的用户名和密码
    		String childPage = request.getParameter("childPage");
    		request.setAttribute("childPage", childPage);
    		request.getRequestDispatcher("/index.jsp").forward(request, response);// 跳转到index.jsp
    	}
    }
    

    4.3 右侧区域动态包含

    右侧内容区域就根据childPage,动态加载指定页面即可。注意当childPage不存在时(尚未点击菜单),直接显示固定文字即可。

    		<div id="right">
    			<c:if test="${empty childPage}">
    	  			欢迎来到猫哥培训班管理系统
    	  		</c:if>
    			<c:if test="${not empty childPage}">
    				<jsp:include page="${childPage}" flush="true"></jsp:include>
    			</c:if>
    		</div>
    

    5. 测试验证

    点击相应菜单1、菜单2,右侧即可显示page1.jsp、page2.jsp的内容,大功告成!非常完美啊。

    展开全文
  • SSH 常见权限设计三:左侧菜单展示

    千次阅读 2016-10-06 21:16:32
    // 准备所有顶级权限的集合(顶级菜单) List<Privilege> topPrivilegeList = privilegeService.findTopList(); application.setAttribute( "topPrivilegeList" , topPrivilegeList); System.out.println( "-- ...
  •  目前终端比较多,比如PC端,移动端,用户使用的客户端也非常多,使用浏览器,APP,小程序等,这些客户端只有页面不同,后台逻辑都是一样的,所以我们需要开发一个专门用来提供服务的系统,再针对不同的客户端开发...
  • 本次实验设计以《JSP程序设计》课本第十章的例子项目为基础进行设计添加后台功能,后台页面分成左右两个框,左边显示一个树形菜单,右边根据菜单选择显示相应的交互界面。以实现对用户,产品分类,产品,订单等的...
  • 后台管理系统左侧动态导航创建

    千次阅读 2019-04-20 11:16:32
    功能目标:根据不同登录...根据用户权限展示不同的菜单栏 导航栏创建 <div data-options="region:'west';title:'菜单栏'" style="width:200px"> <ul data-options="iconCls:'icon-heart'" id="menuTree"...
  • 本次实验设计以《JSP程序设计》课本第十章的例子项目为基础进行设计添加后台功能,后台页面分成左右两个框,左边显示一个树形菜单,右边根据菜单选择显示相应的交互界面。以实现对用户,产品分类,产品,订单等的...
  • 毕业设计说明书 网上招标系统 网上招标系统 摘要 从本世纪初,互联网开始加速发展,各种创新型应用和互联网新概念不断出现,例如搜索引擎、电子商务、博客、维基百科、RSS、3G、web2.0、长尾理论...
  • jsp页面制作弹出框

    2016-12-08 13:53:00
    各种弹出页面设计 【1、普通的弹出窗口】其实代码非常简单: <SCRIPTLANGUAGE=javascript><!--window.open('page.html')--></SCRIPT>  因为这是一段javascript代码,所以它们应该放在...
  • 菜单页面跳转

    2017-05-18 20:00:00
    ---恢复内容开始--- 今天都5月18号了,时间好紧张。终于把我的跳转页面改出点眉目了在这里整理一下。 点击菜单,利用ajax将...2.jsp页面中在菜单el表达式部分接收了menu的集合,取出path <!-- 左侧导航菜单...
  • jsp页面的弹出框

    千次阅读 2017-03-01 09:32:25
    各种弹出页面设计 【1、普通的弹出窗口】  其实代码非常简单:   LANGUAGE=javascript>  <!--  window.open ('page.html')  -->     因为这是一段javascripts代码,所以...
  • (javaWeb-百斯特电子商城-在jsp页面中侧边栏点击,右边进行变化(java实现)(持续完善)1.问题描述:2.开发环境:+解决思想+建议+注意3.问题解决3.1项目结构3.2jspindex.jspcontent.jspfooter.jspheader....
  • task2-1,首先要理解不同的页面,所谓不同的页面,是指校长或者教师或者学生登录进来,看到的菜单、功能、显示是有所不同的。但是对于程序设计者来说,有多重方式可以实现这种不同。 最容易理解的,就是根据登录...
  • WEB入门.五 页面设计简介

    千次阅读 2017-02-16 09:07:17
    学习内容Ø XHTML 的发展历程Ø XHTML 和 HTML 的区别Ø XHTML的DOCTYPE和基本标签Ø CSS 常用属性能力目标Ø 熟练掌握XHTML 和 HTML 的区别Ø 理解XHTML的DOCTYPEØ 掌握创建简单的XHTML页面布局本章简介...
  • 登录OMS后台管理系统后,我们给用户展现的界面包含:顶部导航栏、左侧菜单栏、底部技术支持信息、以及中间部分的仪表盘页面(也就是下面截图中红色框出来的区域)。前面的几个模块在之前的博客文章里已经给大家介绍...
  • 基于java(jsp)仓储物资管理系统设计

    千次阅读 多人点赞 2019-04-18 23:05:49
    小组成立这初,想着借鉴一下以上那些管理系统软件设计一个工业、商业企业均可使用的仓储物资管理系统,那样子首先得给仓库分类,如仓库可分为材料库、成品库,入库方式可分为原材料入库、产成品入库、生产易耗品入库...
  • IBM®WebSphere®Studio现在具有功能强大的网站管理工具-网站设计器和页面模板。 本文向您展示如何使用“网站设计器”和页面模板创建一个示例网站,并介绍如何创建页面模板以及如何将其应用于多个页面。 网站设计...
  • 使用bootstrap搭建后台管理系统页面《一》

    万次阅读 多人点赞 2018-03-24 12:51:38
    一般的后台管理系统页面主体包括四个部分,顶部导航栏,左侧菜单栏,中间正文页和底部的页脚。 其中左侧和顶部使用的是bootstrap的导航和下拉菜单组件,主体页面为了演示方便,使用了iframe框架。 1.1 nav组件 接...
  • 其中首页,我是划分了三块:顶部菜单栏,左侧菜单栏,右侧菜单栏。没有用 css。 我的首页 jsp 是这样写的: 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/ht...
  • 接来下,谈谈zTree树插件实现点击左侧树,右侧展示文章列表页面过程。效果展示 2.这里就说说思路。 channel.jsp &lt;div class=&quot;pos-a&quot; style=&quot;width:280px;left:0;top:0; bottom:0...
  • 网页中导航实现子菜单下拉效果

    万次阅读 2016-03-09 16:03:52
    一、实现方式 通常菜单会用的形式实现:如 二、点击时子菜单下拉效果
  • jsp笔记

    千次阅读 2013-08-28 14:14:01
    JSP:Java server pages,是一种动态网页技术;“动态”指的是交互性,而不是动画或者js特效的动态。   同类产品:ASP,PHP,......   JSP的服务器:Tomcat,Weblogic,webSphere,JBoss,JRun,Resin.....   ...
  • 3.然后,根据MVC设计原则,编写Model(模型)中的DAO类 4.然后,根据MVC设计原则,编写Model(模型)中的Service类 如何验证写的这个Service能不能用? 本篇博客的内容需要随时修改。 本篇博客内容说明: ...
  • 关于jsp网页弹出窗口

    千次阅读 2014-10-17 14:38:44
    各种弹出页面设计 【1、普通的弹出窗口】  其实代码非常简单:    window.open ('page.html')  -->     因为这是一段javascripts代码,所以它们应该放在标签和之间。是对一些版本低的...
  • jsp 弹出窗口设置大全

    千次阅读 2014-07-18 18:13:53
    各种弹出页面设计 【1、普通的弹出窗口】  其实代码非常简单:    window.open ('page.html')  -->     因为这是一段javascripts代码,所以它们应该放在标签和之间。是对一些版本低的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 724
精华内容 289
关键字:

jsp页面左侧菜单栏设计