在以前的开发中,我们很喜欢使用iframe实现菜单内容的动态切换。但是iframe的可操作性、搜索上、与整体页面的配合上,存在着诸多问题。
现在我们可以使用成熟的jquery ajax技术实现菜单的动态切换,简单而且实用。
我们的菜单区域一般是这样子的:
<!-- Sidebar Menu -->
<ul class="sidebar-menu" id="mainMenu">
<li class="header">用户菜单</li>
<li class="treeview">
<a href="#" > 系统管理</a>
<li class="treeview">
<ul class="treeview-menu">
<li><a target="${ctx}/test1" ></i>用户管理</a></li>
<li><a target="${ctx}/test2" ></i>角色管理</a></li>
</ul>
</li>
</ul>
我们的菜单动态内容显示区域是这样的:
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" id ="mainContent">
</div>
在页面编辑动态刷新的jquery语句:
<!--菜单动态刷新-->
<script type="text/javascript">
$(function () {
$.get("${ctx}/dashboard", function (data) {
$("#mainContent").html(data);//初始化加载界面
});
$('#mainMenu ul li').click(function () {//点击li加载界面
var current = $(this),
target = current.find('a').attr('target'); // 找到链接a中的targer的值
$.get(target, function (data) {
$("#mainContent").html(data);
});
});
});
</script>
这样,就大功告成了,当然前提是要引入jquery的js,另外可以根据需要修改上面的选择器,实现特殊的功能。