SpringMVC中整合bootstrap实现分栏，iframe实现点击左侧菜单改变右侧内容或点击上面菜单改变下面内容，地址栏内容不变。附源码！！！

今天看到一个页面，页面布局是左右分栏，点击左边菜单右边页面内容随之改变，让我感兴趣的是无论如何点击，地址栏的内容都不会改变。于是想亲自动手实现这一效果，百度了一大堆，最后决定用bootstrap实现分栏，iframe实现点击菜单改变内容，后台采用SpringMVC，各实现左右和上下分栏效果。

废话不多说，直接进入开发流程。

一、前端页面和js

新建main_index.jsp，head标签中引入bootstrap和jquery的相关css和js，代码如下：

另外添加一段js代码：

简单介绍下上面js代码的意思：第一段代码作用是为了保证iframe中右侧页面的高度，使之和浏览器客户端高度一致；第二段代码作用是实现点击左侧菜单栏，右侧内容页随之改变的效果，iframe中改变其src即可改变它加载的内容。(有疑问的可以去百度iframe的用法)

下面贴出jsp中的代码：

               

                   
• 
                         
                              index
                                 
                         
                         
  
                             
  • aaa
  
                             
  • bbb
  
                         
  
                     

                   
• 
                         
                              index1
                                 
                         
                         
  
                             
  • ccc
  
                             
  • ddd
  
                             
  • eee
  
                         
  
                     

               

           

• 
  Home
  


• Dashboard

针对以上代码进行说明。首先是bootstrap分栏，这个效果实现起来比较简单，百度下bootstrap教程即可轻易找到。上面代码中标红的部分即实现了左右分栏的作用，标红代码的意思是将整个的容器以1:5的比例分成两份，是按列分，即一个占2列，一个占10列，这就实现了左右分栏。

蓝色字体是创建了一个菜单树，这些属性在bootstrap中都能找到，笔者其实也没有仔细研究这些代码，粘过来就直接用了。需要注意的是li标签中的a标签的onclick属性要改成menuClick方法，menuClick中传递的url为后台controller中对应方法的ResultMapping(这个后面会详细说)，这样每点击左侧菜单，

右面iframe中就会加载相应的url所返回的页面，而且地址栏不会改变，因为只是局部刷新。

内容展示页注释下的紫色字体代码定义了一个div，该div里面是一个iframe，该iframe会有一个默认的内容页，以后每次点击左侧菜单该iframe的src

都会改变，也就达到了内容切换的效果。

二、后台程序

@Controller
public class TestController {
    @Autowired
    private TestService testService;
    private List userList;
    @RequestMapping("toVerticalIndex")
    public String toVerticalIndex(Model model,Map map, HttpServletRequest request){
        return "jsp/vertical_index";
    }
    @RequestMapping("toLoginIndex")
    public String toLoginIndex(Model model,Map map, HttpServletRequest request){
        return "jsp/main_index";
    }

@RequestMapping(value="toTestList", method = RequestMethod.GET)
    @ApiOperation(value = "获取全部的用户", httpMethod = "GET", response = List.class, notes = "获取全部的用户")
    public String toTestList(Model model,Map map, HttpServletRequest request){
        userList=testService.getAllFriend();
        map.put("userList", userList);
        return "jsp/test_list";
    }

@RequestMapping(value="toViewInfo", method = RequestMethod.GET)
    @ResponseBody
    public String toViewInfo(Model model,Map map, HttpServletRequest request,String id){
        return "jsp/view_info";
    }

上面的代码即实现页面跳转的功能，标准的springmvc结构，至于service、dao中的代码就不贴了，在后面源代码中都有的。

以上说的是实现左右分栏，其实上下分栏是一样的，我就不再花费时间说了，一切都在源代码中。源代码里TestController中toVerticalIndex

和toLoginIndex注释掉了，解除注释就可以运行。

效果图：

左右分栏

上下分栏

注意：源程序是maven项目。

源代码地址：http://download.csdn.net/detail/fanguoddd/9739577

没有下载积分的童鞋看这里！！！扫描公众号二维码免费获取。公众号二维码：

                                        

有什么问题或者见解欢迎在评论区留言~~~

最后，打波广告。微信搜索公众号"购即省"，淘宝购物领券，购物即省钱。