bootstrap如何实现左侧导航栏,右侧网页

转载 (原文地址) 周美娜 随笔 待整理 458阅读 2018-06-07 15:32:37 举报

方式一:采用iframe,即将网页放入iframe这个容器中。

方式二:采用div的话绑定a或者li的点击事件 阻止a的默认行为,用jquery的load()可以来加载这个div,即将网页放入div中。

方式三:angular的嵌套路由也可以实现。不过本人对angular不是很了解,所以这种方式没有去试。

方式四:采用ajax技术,实现局部刷新。(本人觉得该方式比较麻烦,就不在这细说了)。

二者的实现方式:

采用iframe的话比较简单, <iframe id="iframe" name = "frame" src="${pageContext.request.contextPath}/user/render.do" width="100%" height="800px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe> 然后再写一个script函数: <script type="text/javascript">

var menuClick = function(menuUrl) {

        $("#myManu").attr("src",menuUrl);
    };

</script>

再在<a href="#" onclick('${pageContext.request.contextPath}/user/renderr.do')></a>添加,就可以实现在左侧菜单点击,加载右边网页。

但是他有一个不好的地方就是,iframe的height要限定,这样的话对不同需求的页面来说就使得不能显示最佳效果。(而且iframe现在也是过时了)。

再看看用div的方式来做的话:首先定义一个div<div id="myManu" ></div>,然后再写一个script函数,<script type="text/javascript">
$(document).ready(function(){

       //这是给div的一个初始页面
  $("#myManu").load('${pageContext.request.contextPath}/user/render.do');
   })

    var menuClick = function(menuUrl) {

        $("#myManu").load(menuUrl);
    };

</script>

采用该种方式的话就是代码量也很简洁,而且div会根据网页的内容来填充,就不需要将div的height定死,让其自动填充。使得每个网页的内容显示效果更好一点。但是它也有一个不好的方面,就是div的样式它受父级div的影响。不过你也可以对子级div进行自定义样式。

ps(个人觉得还是采用div的方式会好一点,毕竟页面的显示至关重要。)

还有就是bootstrap3.0中它有这个可以缩放的导航栏,具体使用情况可以去它官网查看文档。

此方法我也用过 <div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="${pageContext.request.contextPath}/user/render.do"></iframe>
</div>

效果还是不错的。总之根据自己的需要选择不同的导航栏加载页面方式。

补充一点:用iframe做的话,iframe对应的网页是独立的,不受该页面的样式的影响。

用div做的话,div对应的网页不是独立的,它是嵌入当前页面的,所以div里面的样式会受父级div等的样式的影响。如果div的对应页面和当前页面的css或js都不影响的话,用jquery的load加载div会更好一点。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复