zoukankan      html  css  js  c++  java
  • 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.     注意目前只适用于二级栏目的 :-(

    Demo下载地址:

            TreeView

    结束 

         自己动手,丰衣足食!!欢迎指点、批评:)

  • 相关阅读:
    ubuntu16下点亮C170摄像头的一波三折
    看完这张图,开源协议门清
    Qt调试信息重定向输出(qInstallMessageHandler)
    C++专业术语
    vim 复制 单个 单词: 移动光标到单词词首,快速摁 yw
    讲真的
    bcp文件, 逗号文件
    缩写: i = i + 1 和 i += 1,可以看做是 i 自加的值 是1。
    $identify 的 “identify” 表示一个Perl标识符,即 identifier
    第八章: 以正则表达式进行匹配
  • 原文地址:https://www.cnblogs.com/over140/p/1332734.html
Copyright © 2011-2022 走看看