抠出淘宝的菜单树
- 博客分类:
- 技术杂绘
抠出淘宝的菜单树
2010年08月17日
淘宝登陆用户的纵向菜单树简洁大方,设计的很好,于是想趁闲暇时间将他的风格模仿下来,用在以后的网页中。 这个菜单树应该有很多人眼熟吧,它的一级菜单和二级菜单的折叠设计很简单,展示的效果却很舒服。适用于菜单层级只有3层的应用系统中。 从页面的源码中,可以找到对应的css文件,存放于 两个文件中。如果不想将用到的css单独抠出来放在自己的网页中,完全可以引用这两个css路径,否则只有耐心寻找对应的样式,因为css类的分布很散乱。
还有一个页面级样式 注意css中引用的图标要从淘宝上拿过来,不然本地的css也会没图的,地址是:
http: //a.tbcdn.cn/app/mytaobao/v4/img/mytaobao_v4_bg.pn g 淘宝中使用的JavaScript中引用了Yahoo的js库,我不想为了一个菜单在单独引用一个库,就把js代码全部改成jquery了。你也可以原封不动引用淘宝的js脚本地址:
http://a.tbcdn.cn/app/mytaobao/common_v2.js?t=2010 0505.js
http://a.tbcdn.cn/tbra/1.0/tbra-aio.js?t=20090604. js
还有一个页面脚本 window.onload = function() { var Y = YAHOO.util, D = Y.Dom, E = Y.Event, oPage, oIframe; document.domain = TB.bom.pickDocumentDomain(); oPage = D.get('page'); oIframe = parent.document.getElementById('J_MenuFrame'); if (!oIframe) {return;} function setHeight() { D.setStyle(oIframe, 'height', oPage.offsetHeight + 'px'); }; // onActivate mytaobao.group.callback.onActivate.subscribe(setHe ight); mytaobao.group.callback.onDeactivate.subscribe(set Height); setHeight();
需要在页面上生成一个外层包裹菜单的容器层“page”,层级间的结构仿照淘宝的结构做,这样对css的改动就小了。 function AddMenu(selfMenuID,selfMenuText,selfMenusrc,parent MenuID,srcTarget) { // 考虑将来扩展到frame任意定位菜单,需要指定document和document.body var menuDoc=document; var menuBody=document.body; var menuPad=$("#menuPad",menuBody); if(menuPad.length==0) { MakeMenu(); menuPad=$("#menuPad",menuBody); } var strInnerMenu; // 拼接菜单的html串 var parentMenu=$("\"#menu_"+parentMenuID+"\"",menuBody ); if(parentMenu.length==0) // 一级菜单 { strInnerMenu="
AddMenu是真正的核心方法,通过它将一级级的菜单加入到树中,并应用对应的css。个参数含义:
selfMenuID:当前菜单编号,
selfMenuText:当前菜单名称,
selfMenusrc:当前菜单url,
parentMenuID:父菜单编号,
srcTarget:地址跳转类型,空白页_blank或frame名称。
实现思路就是:如果当前菜单的父菜单不存在,就是一级菜单;如果父菜单存在并且css类时menu-box,则当前是二级菜单,否则是三级菜单。
正因为这样的实现思路,要求只能有三级菜单,否则三级后面的就平级了。 function BindEclipseFun() { $("span[id='T_span']").toggle( function() { $(this).parents("li").removeClass("fold-open").add Class("fold-close"); }, function() { $(this).parents("li").removeClass("fold-close").ad dClass("fold-open"); } ); $("h3[class='coolMenu-bar']").toggle( function() { $(this).next("ul:first").addClass("hidden"); $(this).find("button").removeClass("menu-close").a ddClass("menu-open"); }, function() { $(this).next("ul:first").removeClass("hidden"); $(this).find("button").removeClass("menu-open").ad dClass("menu-close"); } ); }
BindEclipseFun方法是给生成的菜单增加样式和事件的,在单击父级菜单时切换折叠和展开效果都是通过css样式的切换实现的。 在页面的初始化脚本中加入以下代码,就能生成一个淘宝样式的菜单树页面效果 $(function() { AddMenu('1','系统管理','','0','_blank'); AddMenu('2','常用操作','','0','_blank'); AddMenu('3','网上支付','','0','_blank'); AddMenu('4','用户管理','user.aspx','1','_blank'); AddMenu('5','部门管理','dept.aspx','1','_blank'); AddMenu('6','省级用户','supuser.aspx','4','_blank'); AddMenu('7','地级用户','comuser.aspx','4','_blank'); AddMenu('8','账户查询','payCheck.aspx','2','_blank'); AddMenu('9','银联支付','unipay.aspx','3','_blank'); AddMenu('9','主账户查询','master.aspx','8','_blank'); AddMenu('10','子账户查询','sub.aspx','8','_blank'); BindEclipseFun(); });
html页面必须引用了jquery的库;
菜单只能有三级;
增加菜单时,即调用AddMenu方法时,必须一层一层调用,也就是说必须先添加一级菜单,然后添加二级菜单,最后添加三级菜单。这样的数据处理很简单,嵌套几个循环或者用迭代就可以选择出来分级的数据。
源码下载:http://cid-8e164418a642ea96.office.live.com/self.a spx/.Public/taobaoMenu.rar
欢迎转载,但请注明出处
发表评论
-
HTML DOM架构研究
2012-01-20 10:12 545HTML DOM架构研究 2010年07 ... -
再谈Iframe的问题
2012-01-20 10:11 556再谈Iframe的问题 2010年1 ... -
http中的request和session的关系。
2012-01-20 10:11 665http中的request和session的关系。 2010 ... -
今天继续完善自己写的跨域iframe自适应高
2012-01-20 10:11 678今天继续完善自己写的 ... -
大班下学期计划
2012-01-19 15:12 680大班下学期计划 2011年01月28日 大班下学期计划 ... -
大班下学期家长会发言稿
2012-01-19 15:12 1028大班下学期家长会发言 ... -
下学期个人工作计划
2012-01-19 15:12 649下学期个人工作计划 2010年06月26日 ... -
大班德育工作计划11
2012-01-19 15:12 721大班德育工作计划11 2011年02月18日 大班下学期 ... -
大班下学期家长会流程
2012-01-19 15:12 1367大班下学期家长会流程 2011年03月07日 家长会流程 ... -
观察者模式
2012-01-17 04:59 675观察者模式 2011年12月19日 class JPDe ... -
请列出你在从事DBA生涯中,最难以忘怀的一次误操作(1)
2012-01-17 04:59 572请列出你在从事DBA生涯中,最难以忘怀的一次误操作(1) 2 ... -
javabook
2012-01-17 04:59 708javabook 2010年07月09日 ... -
(转) How To Ask Questions The Smart Way 提问的智慧
2012-01-17 04:59 548(转) How To Ask Questions The ... -
perl 经典入门(2)
2012-01-17 04:59 742perl 经典入门(2) 2010年06 ... -
flex连接数据库总结
2012-01-16 03:50 647flex连接数据库总结 2010年01月11日 首先,做 ... -
43个热门Flex和ActionScript 3.0 APIs,技巧和工具
2012-01-16 03:50 55143个热门Flex和ActionScript 3.0 APIs ... -
【转载】[东华艺宗]网页游戏开发之Flex SDK 4命名空间
2012-01-16 03:50 596【转载】[东华艺宗]网页游戏开发之Flex SDK 4命名空间 ... -
Flex超酷皮肤主题推荐
2012-01-16 03:50 1690Flex超酷皮肤主题推荐 2009年07月29日 当程序 ... -
FLEX 做的不错的网站
2012-01-16 03:50 670FLEX 做的不错的网站 200 ...
相关推荐
菜单树(树数据结构+JSP页面递归调用构建菜单树)
关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的...
Java 菜单树的实现,可以很方便的移植到其他程序,方便使用,而且具有代表性.
菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树...
菜单树,树结构采用jstree,dtree,自己在后台组装层多效的树。。
手操器375菜单树,校验变送器用,Hart协议。
oracle菜单树查询 使用实例 使用START WITH CONNECT BY PRIOR子句实现递归查询
递归查询菜单树,支持mysql,oracle,含表结构,递归查询菜单,支持mysql,oracle,含表结构递归查询菜单。
淘宝菜单,div+css菜单,菜单,淘宝菜单,div+css菜单,菜单
菜单树 右键菜单树 导航树 菜单树 右键菜单树 导航树 checkbox模式 radio模式 相互学习 资源分不高!
通过对js构造菜单树的思路分析,写出java的菜单树构造的工具类,可以生成你想要的菜单树!! 仅供学习!
layui做的后台首页,左侧菜单树和顶部菜单树都有,只需引入layui.css和js即可
树形菜单 树形菜单树形菜单 树形菜单树形菜单 树形菜单树形菜单 树形菜单
js无限级树形菜单js无限级树形菜单js无限级树形菜单
好看的树形结构菜单tree,树形结构菜单
该文档是用java代码编写的winfrom树形菜单。可以当模板用
根据从数据库查询出来的信息
475菜单树-中文翻译版.pdf
树形菜单树形菜单树形菜单树形菜单树形菜单树形菜单