Javascript 滑动效果菜单 TreeView [Javascript]-阿里云开发者社区

开发者社区> 科技小先锋> 正文

Javascript 滑动效果菜单 TreeView [Javascript]

简介:
+关注继续查看

前言

     这个滑动菜单写了蛮久了,当时没有被用上,现在要用了又翻出来了,毕竟不是网上下载扒的,自己写的,所以还是分享一下,觉得有时间还是尽量自己写的好,呵呵:)

 

正文

     还是先来一张效果图吧:

     

     效果一般,觉得还行,就是收缩的时候有时候抖,不太明白:-(

     以下是调用部分的JS代码,比较方便:

<script type="text/javascript" defer>
        
var tree = new TreeView("tree");
        
//-1标示顶层,唯一编号,文本内容,链接,是否显示(1显示 0不显示),弹出类型
        tree.Nodes = [
            [
-1,1,'基本信息','#',0,],
            [
-1,2,'积分相关内容','#',1,],
            [
1,21,'修改密码'    ,'#',,],
            [
1,22,'重置密码'    ,'#',,],
            [
1,23,'修改资料'    ,'#',,],
            [
1,24,'修改详细资料','#',,],
            [
1,25,'退出登录'    ,'#',,],
            [
2,11,'积分规则'    ,'#',,],
            [
2,12,'积分转盘'    ,'#',,],
            [
2,13,'积分促销'    ,'#',,],
            [
2,14,'常见问题'    ,'#',,],
            [
2,15,'得分记录查询','#',,],
            [
2,16,'消费记录查询','#',,],
            [
2,17,'到期积分查询','#',,]
        ];
        tree.Show(document.getElementById(
"menu"));
    
</script>

          1.     这个menu是DIV的id号,body里面加入<div id="menu"></div>就行了,注意给js加上defer,或者js代码放在div的后面也行。

          2.     目前实现的是点一个展开一个,不收缩其他栏目,收缩其他栏目的在TreeView.js里面也写好了,在展开或收缩之前调用noneExpand就行了

          3.     注意目前只适用于二级栏目的 :-(


本文转自over140 51CTO博客,原文链接:http://blog.51cto.com/over140/586553,如需转载请自行联系原作者

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
天选程序员:如何提个好问题?
天选程序员:如何提个好问题?
3 0
Base64 加密处理|学习笔记
快速学习 Base64 加密处理
4 0
架构师眼中的文化:组织不扁平,3天后信息衰减到20%(1)
架构师眼中的文化:组织不扁平,3天后信息衰减到20%(1)
5 0
实操微服务设计-从需求、领域模型、业务能力到服务(2)
实操微服务设计-从需求、领域模型、业务能力到服务(2)
4 0
有关中台的误解以及精选中台解读6篇(阿里腾讯小米等)
有关中台的误解以及精选中台解读6篇(阿里腾讯小米等)
3 0
​中台战略:业务中台的8个设计原则
​中台战略:业务中台的8个设计原则
4 0
程序员自我发展之路:从态度到方法
程序员自我发展之路:从态度到方法
3 0
都是血泪,程序员傍身的生存法则(上)
都是血泪,程序员傍身的生存法则(上)
3 0
MySQL 在 windows 下的安装|学习笔记
快速学习MySQL 在 windows 下的安装
5 0
6967
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载