左边菜单,点击左边右边内容改变
来源:互联网 发布:博客平台 知乎 编辑:程序博客网 时间:2024/04/28 11:39
作为新手, 拿到真的很棘手。 很多人想到的是用iframe, 其实我的第一感也是, 但是好像iframe正在被淘汰, 所以一直在寻找新方法。、
当然, 我还是先把iframe方法贴出来, 这个方法是适用于对js不熟悉,或者刚入前端不就的童鞋们。
2014年,我们公司要做一个这样的后台系统(如下图所示); 第一次接触后台,而且还带有图表, 着实小紧张了一把。经过多次在网上搜索和晚上的冥思苦想,最后找到了两个解决方案;
1). 做成静态的
什么叫静态的? 视觉欺骗而已。 就是左边的结构还是正常写,并且在不同的页面不同的样子,每一个页面都有一个左边的menu菜单, 在点击的,就不容易察觉, 下面以bootstrap ace后台为例子。
<li> <a href="#"> <div class="clearfix"> <span class="pull-left">Software Update</span> <span class="pull-right">65%</span> </div> <div class="progress progress-mini "> <div style="width:65%" class="progress-bar "></div> </div> </a> </li> <li> <a href="#"> <div class="clearfix"> <span class="pull-left">Hardware Upgrade</span> <span class="pull-right">35%</span> </div> <div class="progress progress-mini "> <div style="width:35%" class="progress-bar progress-bar-danger"></div> </div> </a> </li>
如果上面的父级菜单没有连接, 逻辑就有点不同了。 如果没有, 点击父级菜单的时候, 就要求打开父级菜单, 然后才能点击下面的菜单。 显然上面的方法得升级了。 用jquery写一个点击事件就ok, 就不演示了。
2)iframe方法
<ul class="nav" id="side-menu"><li><a href="index.html" id="firstNode" class="cur" target="menuFrame"><i class="fa fa-bar-chart-o fa-fw"></i><b>统计报表</b></a><ul class="nav nav-second-level"><li><a href="import.html" target="menuFrame">进货报表</a></li><li><a href="export.html" target="menuFrame">出货报表</a></li><li><a href="check.html" target="menuFrame">毛利报表</a></li></ul></li><li><a href="warehouse.html" target="menuFrame"><i class="fa fa-table fa-fw"></i><b>仓库管理</b></a><ul class="nav nav-second-level"><li><a href="goodslist.html" target="menuFrame">商品列表</a></li><li><a href="check.html" target="menuFrame">盘点</a></li><li><a href="outbound.html" target="menuFrame">出库列表</a></li><li><a href="instorage.html" target="menuFrame">入库列表</a></li></ul></li><li><a href="#"><i class="fa fa-edit fa-fw"></i><b>订单管理</b></a><ul class="nav nav-second-level"><li><a href="orderlist.html" target="menuFrame">订单列表</a></li><li><a href="forms.html" target="menuFrame">采购申请</a></li></ul></li><li><a href="system.html" target="menuFrame"><i class="fa fa-wrench fa-fw"></i><b>系统设置</b></a><ul class="nav nav-second-level"><li><a href="user.html" target="menuFrame">权限设置</a></li><li><a href="personnel.html" target="menuFrame">资料管理</a></li></ul></li><li><a href="rewritepwd.html" target="menuFrame"><i class="glyphicon glyphicon-pencil"></i><b>修改密码</b></a></li></ul>
先写出一个上菜的菜单。 千万记住链接后面的target得要,而且名字需要一样,等会会用到
<div id="page_content"> <iframe id="menuFrame" name="menuFrame" src="index.html" style="overflow:visible;" scrolling="yes" frameborder="no" width="100%" height="100%; float:left"> </iframe> </div>
在内容的区域添加上面代码,插入iframe, 这里的name对应上面链接里面的name, src="index.html", 表示默认页是index.html, 至于后面的那些属性是控制iframe样式的。 以上iframe就告一段落了。
二. 用ajax方法实现点击左边, 右边出现相应的页面。
今年老大叫我做一个后台, 而且他指出别人没有用iframe, 问我行不行。 只能说行。 没有在网上查看过多的资料, 某天晚上突然想起ajax 里面有一个load方法, 这个方法可以载入其他页面的内容。 于是有了灵感, 开始也只是尝试一下:
("li").on('click', function() { var href = $(this).find("a").attr('href'); $('#mainContents').empty(); $('#mainContents').load("../new/" + href); //阻止跳转 $(this).parents('li').addClass('active').siblings('li').removeClass('active'); return false; });
点击li, 找到li里面对应的链接地址,阻止url跳转,然后在内同区域载入找到的url对应的地址。 惊奇的发现,试验了也可行。 然而新问题来了。 用load方法,只能载入已经加载完毕的页面,如果我们的页面没有加载完毕呢, 或者修改了, 怎么办?? 所以还是用ajax 吧。
var menu = $("#menuID>li h2"),srcLi = menu.next('ul').find('li');srcLi.on('click', function(e) {var href = $(this).find("a").attr('href');$('#mainContents').empty();$.ajax({// beforeSend: function(){// $('#mainContents').html('正在请求');// },// complete: function(){// $('#mainContents').html('加载完毕');// },type: "GET",url: "../new/" + href,success: function(data) {$('#mainContents').append(data);}});//阻止跳转$(this).parents('li').addClass('active').siblings('li').removeClass('active');return false;});menu.on('click', function() {$(this).next('ul').slideToggle(400);$(this).stop('false').toggleClass('on');});
以上的思路, 和开始时候的load方法一样。首先找到每一个li 里面对应的url, 然后清空 右侧的内容, 用ajax动态获取不同的页面, 就追加到右侧的内容中。 阻止跳转。
另外,附上一个相似的代码,这是点击一个树状菜单出来不同的内容。第一次用ajax调用json数据。着实小兴奋了一把。这个与上面说的内容一毛钱的关系也没有,只是为了祭奠一下我的第一次而已
$.ajax({ type: "post", url: "../new/txt/txt1.json", dataType: "json", success: function(data) { $("#blank").empty(); var employees = data.employees; $.each(data.employees, function(k, v) { var tpl1 = '<div class="halfLeft">' + '<span class="aboutJobs">' + v.职位 + '</span>: ' + '<span class="aboutNames">' + v.姓名 + '</span>;<br/>' + '</div>'; $("#blank").append(tpl1); }); }})
调用的json数据为
{ "employees": [ { "姓名": "张三", "职位":"php后台", "email": "aaaa" }, { "姓名": "李四", "职位":"人事经理", "email": "bbbb" }, { "姓名": "王五", "职位":"Harold", "email": "cccc" }, { "姓名": "Isaac", "职位": "Asimov", "genre": "science fiction" }, { "姓名": "Tad", "职位": "Williams", "genre": "fantasy" }, { "姓名": "Frank", "职位": "Peretti", "genre": "christian fiction" }, { "姓名": "Eric", "职位": "Clapton", "instrument": "guitar" }, { "姓名": "Sergei", "职位": "Rachmaninoff", "instrument": "piano" } ], "test": [ { "姓名": "赵六", "职位":"php后台", "email": "aaaa" }, { "姓名": "齐七", "职位":"人事经理", "email": "bbbb" }, { "姓名": "王五", "职位":"Harold", "email": "cccc" }, { "姓名": "Isaac", "职位": "Asimov", "genre": "science fiction" }, { "姓名": "Tad", "职位": "Williams", "genre": "fantasy" }, { "姓名": "Frank", "职位": "Peretti", "genre": "christian fiction" }, { "姓名": "Eric", "职位": "Clapton", "instrument": "guitar" }, { "姓名": "Sergei", "职位": "Rachmaninoff", "instrument": "piano" } ]}
0 0
- 左边菜单,点击左边右边内容改变
- 左边菜单,右边内容
- 左边菜单,右边内容
- iframe异步加载(点击左边菜单加载右边内容)
- html中点击左边菜单右边内容切换
- 单击左边TreeView节点右边Frame内容相应改变
- 横向滑动ViewGoup(左边菜单右边内容)效果的实现
- Frameset,点击左边切换右边
- 左边,右边
- android 商城左边菜单,右边联动
- 点击隐藏显示左边菜单
- 用jq实现点击右边内容实现,左边内容切换、自动切换,当鼠标放上右边li上面,左边内容停止切换。
- 基于Ajax+div的“左边菜单、右边内容”页面效果实现
- 在网页中点击左边的连接,内容在右边显示
- html frame标签(点击左边框架内容而在右边框架做出反应)
- 仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边
- 仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边
- 左边固定 右边自适应
- Java Servlet中文乱码解决办法
- 北邮OJ-108. 虚数-11网研上机B
- 做图形统计时遇到的问题
- c++ 继承中的同名成员处理方法
- 【论文笔记】Unsupervised Learning of Video Representations using LSTMs
- 左边菜单,点击左边右边内容改变
- Appium+Genymotion,继续走在一步一坑的路上
- 使用python存储网页上的图片
- Mysql数据库和JDBC编程
- 阅读-ThreadLocal(JAVA)
- MySql架构
- 2017春 Android面试总结
- I
- ASN1之DER编码规则