今天看到一个页面，页面布局是左右分栏，点击左边菜单右边页面内容随之改变，让我感兴趣的是无论如何点击，地址栏的内容都不会改变。于是想亲自动手实现这一效果，百度了一大堆，最后决定用bootstrap实现分栏，iframe实现点击菜单改变内容，后台采用SpringMVC，各实现左右和上下分栏效果。
废话不多说，直接进入开发流程。
一、前端页面和js
新建main_index.jsp，head标签中引入bootstrap和jquery的相关css和js，代码如下：
<link rel="stylesheet" href="${base}resource/css/bootstrap.min.css">
<script src="${base}resource/js/jquery.min.js"></script>
<script src="${base}resource/js/bootstrap.min.js"></script>
另外添加一段js代码：
<script type="text/javascript">
$(function() {
var height=document.documentElement.clientHeight;
document.getElementById('iframe-page-content').style.height=height+'px';
});
var menuClick = function(menuUrl) {
$("#iframe-page-content").attr('src',menuUrl);
};
</script>
简单介绍下上面js代码的意思：第一段代码作用是为了保证iframe中右侧页面的高度，使之和浏览器客户端高度一致；第二段代码作用是实现点击左侧菜单栏，右侧内容页随之改变的效果，iframe中改变其src即可改变它加载的内容。(有疑问的可以去百度iframe的用法)
下面贴出jsp中的代码：
<body>
<div style="width: 100%">
<!-- 左侧菜单栏 -->
<div id="main-container">
<div id="sidebar" class="col-md-2 column">
<!-- 创建菜单树 -->
<div class="col-md-12">
<ul id="main-nav" class="nav nav-tabs nav-stacked" style="">
<li>
<a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">
<i class="glyphicon glyphicon-cog"></i>index
<span class="pull-right glyphicon glyphicon-chevron-down"></span>
</a>
<ul id="systemSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
<li><a href="#" οnclick="menuClick('${base}toViewInfo?id=${s.id}')"><i class="glyphicon glyphicon-user"></i>aaa</a></li>
<li><a href="#" οnclick="menuClick('${base}toTestList')"><i class="glyphicon glyphicon-th-list"></i>bbb</a></li>
</ul>
</li>
<li>
<a href="#systemSetting1" class="nav-header collapsed" data-toggle="collapse">
<i class="glyphicon glyphicon-cog"></i>index1
<span class="pull-right glyphicon glyphicon-chevron-down"></span>
</a>
<ul id="systemSetting1" class="nav nav-list collapse secondmenu" style="height: 0px;">
<li><a href="#"><i class="glyphicon glyphicon-asterisk"></i>ccc</a></li>
<li><a href="#"><i class="glyphicon glyphicon-edit"></i>ddd</a></li>
<li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>eee</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-md-10 column">
<div class="breadcrumbs" id="breadcrumbs">
<!-- 面包屑导航 -->
<ul class="breadcrumb">
<li>
<a href="${base}toLoginIndex">Home</a>
</li>
<li class="active">Dashboard</li>
</ul>
</div>
<!-- 内容展示页 -->
<div>
<iframe id="iframe-page-content" src="${base}resource/html/myindex.jsp" width="100%" frameborder="no" border="0" marginwidth="0"
marginheight=" 0" scrolling="no" allowtransparency="yes"></iframe>
</div>
</div><!-- /.main-content -->
</div><!-- /.main-container -->
</div>
</body>
针对以上代码进行说明。首先是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<TestEntity> userList;
@RequestMapping("toVerticalIndex")
public String toVerticalIndex(Model model,Map<String, Object> map, HttpServletRequest request){
return "jsp/vertical_index";
}
@RequestMapping("toLoginIndex")
public String toLoginIndex(Model model,Map<String, Object> 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<String, Object> 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<String, Object> map, HttpServletRequest request,String id){
return "jsp/view_info";
}
上面的代码即实现页面跳转的功能，标准的springmvc结构，至于service、dao中的代码就不贴了，在后面源代码中都有的。
以上说的是实现左右分栏，其实上下分栏是一样的，我就不再花费时间说了，一切都在源代码中。源代码里TestController中toVerticalIndex
和toLoginIndex注释掉了，解除注释就可以运行。
效果图：
左右分栏
上下分栏
注意：源程序是maven项目。
源代码地址：http://download.csdn.net/detail/fanguoddd/9739577
没有下载积分的童鞋看这里！！！扫描公众号二维码免费获取。公众号二维码：
有什么问题或者见解欢迎在评论区留言~~~
最后，打波广告。微信搜索公众号"购即省"，淘宝购物领券，购物即省钱。
579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
