精华内容
下载资源
问答
  • 本代码为asp.net 2.0的。...第一个页面的级联菜单是静态地,无论数据项几级,都由4个级联菜单显示。 第二个和第三个页面的级联菜单是动态地,既级联菜单的数量由数据项决定,当数据项为几级就显示几个级联菜单
  • 级联菜单

    2017-08-12 11:05:46
    本文章讲述如何写一个省市区关联菜单插件,只是简单的实现,代码不成熟之处,请自行判断。 1)用户需要自行添加一个div容器并添加样式,封装好省市区数组,然后将容器的Id和数组作为参数传入,如下所示 style...

    本文章讲述如何写一个省市区关联菜单插件,只是简单的实现,代码有不成熟之处,请自行判断。

    1)用户需要自行添加一个div容器并添加样式,封装好省市区数组,然后将容器的Id和数组作为参数传入,如下所示

    <style>
    
        .content{
            width: 500px;
            height: 300px;
            background-color: lightblue;
            margin: 0 auto;
        }
        .content div{
            float: left;
        }
    
    </style>

    <div class="content" id="content"></div>
    <script src="js/级联菜单.js"></script>
    <script>

        function getData(){
            var p1c1Part1=["莱山区","芝罘区","福山区","牟平区","栖霞市"];
            var p1c2Part2=["市南区","市北区","四方区","黄岛区","崂山区","城阳区"];
            var p1City1={name:"烟台市",part:p1c1Part1};
            var p1City2={name:"青岛市",part:p1c2Part2};
            var p1City=[p1City1,p1City2];
            var province1={name:"山东省",city:p1City};
            var p2c1Part1=["沧浪区","平江区","虎丘区","吴中区","吴江市"];
            var p2c2Part2=["云龙区","鼓楼区","九里区","泉山区"];
            var p2City1={name:"苏州市",part:p2c1Part1};
            var p2City2={name:"徐州市",part:p2c2Part2};
            var p2City=[p2City1,p2City2];
            var province2={name:"江苏省",city:p2City};
            var array=[province1,province2];
            return array;
        }
        initMenu(getData(),"content");
    </script>


    2)下面开始封装js代码,首先需要定义一个初始化方法并获取传入的参数,因为我是利用innerHTML的方式来写入,所以为了避免覆盖,需要将用户传入的容器分区,分成三个小的div。


    /**
     * Created by GZN on 2017/8/5.
     */
    
    
    var array;
    var nowCity;
    
    function initMenu(arr,id){
        array=arr;
        var div=document.getElementById(id);
        div.innerHTML=" <div id='left' style='width: 33%;height: 300px;'></div> <div id='center' style='width: 33%;height: 300px;'></div><div id='right' style='width: 33%;height: 300px;'></div>";

    //初始化一下省市区。

    var leftDiv=document.getElementById("left"); leftDiv.innerHTML=createSelect(array,true); document.getElementsByTagName("select")[0].onchange=getCity; getCity(document.getElementsByTagName("select")[0]); getPart(document.getElementsByTagName("select")[1]); }

    var nowCity;//将当前城市作为全局变量,方便获取下一级菜单

    function getCity(cell){     if(cell==event)cell= cell.target;//判断传入的是事件因子还是对象,都将其转换为对象     var index=cell.selectedIndex-0;//获取被选择的option的下标,并通过减0将其从字符串转化为整型     nowCity=array[index].city;     var centerDiv=document.getElementById("center");     centerDiv.innerHTML=createSelect(nowCity,true);     document.getElementsByTagName("select")[1].onchange=getPart;//给select添加事件 }

    function getPart(cell){ if(cell==event)cell= cell.target; var index=cell.selectedIndex-0; var part=nowCity[index].part; var rightDiv=document.getElementById("right"); rightDiv.innerHTML=createSelect(part,false); }

    div添加select标签,通过遍历数组,来获取应该添加的option的数量和值。由于每一个div都需要这个步骤,所以可以将其封装为一个方法,方便调用;

    function createSelect(array,flag){     var str=" <select style='width: 80%;margin: 10% 10%;'> ";     for(var i=0;i<array.length;i++){

    //flag是为了判断数组里存的是对象还是值,比如第三级菜单的数组里就是一个名字而不是对象         if(flag){             str+=" <option value='"+array[i].name+"'> "+array[i].name+"</option> ";         }         else{             str+=" <option value='"+array[i]+"'> "+array[i]+"</option> ";         }     }     str+="</select> ";     return str; }



    展开全文
  • 级联菜单 ajax

    2014-01-15 20:42:20
    一个简单的级联操作,可无限进行级联,根据当前下拉框选中的值,通过ajax请求,到后台看当前节点是否下子节点,在返回json对象,在通过判断json数据的长度来判断是否显示出下一个下拉框和下拉框的值,对一些新手很...
  • Android仿苹果级联菜单

    2013-06-15 22:10:47
    Android仿苹果级联菜单详细注释,完美运行。请放心下载。
  • VC 菜单制作实例的源代码,这是一个级联菜单,可依次向右多级展开的多级菜单,主菜单中若包括子菜单项,则可依次伸出各级菜单。用VC 实现菜单的自定义范例,制作出不同效果的窗体菜单。本源码实现思路简单,适合VC...
  • 参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 操作系统:Windows 这次给项目做的级联菜单使用了纯CSS的方式,霍霍,能用CSS做的,就用CSS完成吧。 早已前辈完成过这样的实例了,我以为我能...
  • 级联菜单用div实现

    2012-11-08 16:28:07
    级联菜单有一个div简单实现,对于初学者很适合哟,相信我,你一定不会失望的
  • 动态级联菜单

    2015-09-18 09:48:48
    在项目中遇到最多的就是级联菜单的实现。省级-市级-县级等等。如果将这些数据放到数据库中,每一次访问数据都要链接数据库。目前项目中的做法是select的每一次change事件都要查询一次。我觉得此次操作有些多余。先...

    在项目中遇到最多的就是级联菜单的实现。省级-市级-县级等等。如果将这些数据放到数据库中,每一次访问数据都要链接数据库。目前项目中的做法是select的每一次change事件都要查询一次。我觉得此次操作有些多余。先不说这些数据从哪里得到,或者要不要放到缓存中,或者这些数据是不易改变,还是时常改变。我自我感觉有两点不好:1、代码与页面的耦合性不好 2、会使页面的速度变慢。
    所以,我就用JQuery简单实现了级联菜单的实现。为了避免有类似的问题,特将代码附上,以便以后查看。共勉!

    var json = {'id':'-1','name':'',parentId:'-2','children':[
                    {'id':'0','name':'河南',parentId:'-1',children:[
                        {'id':'01','name':'郑州','parentId':'0','children':
                            [{'id':'011','name':'二七区',parentId:'-1',children:'-1'}]},
                        {'id':'02','name':'新乡','parentId':'0','children':'-1'}]},
                    {'id':'1','name':'江苏',parentId:'-1',children:[
                        {'id':'11','name':'江苏1','parentId':'1','children':'-1'},
                        {'id':'12','name':'江苏2','parentId':'1','children':'-1'}]}]};
        var Settings = {
                id:''
        };     
        var DyCacadeSelect = {
            init:function(id,json){
                Settings.id = id;
                DyCacadeSelect.recursion(json);
            },
            isChildren:function(note){
                return note.children == '-1';
            },
            recursion:function(root){
                if(DyCacadeSelect.isChildren(root)){
                    return ;
                } else {
                    DyCacadeSelect.initSelect(root);
                    $.each(root.children,function(index,comment){
                        DyCacadeSelect.initOption(root,comment);
                        DyCacadeSelect.initSelectChange(root,comment);
                    });
                }
            },
            initSelect:function(note){
                $("#"+Settings.id).append("<select"+
                        " class='lSelect' id='"+note['parentId']+"'>"+
                        "<option value=''>--请选择--</option></select>");
            },
            initOption:function(note,comment){
                $("#"+note['parentId']).append("<option "+
                        "value='"+comment['id']+"'>"+comment['name']+"</option>");
            },
            initSelectChange:function(note,comment){
                $("#"+note['parentId']).bind("change",function(){
                    if($("#"+note['parentId']).val()==''){
                        DyCacadeSelect.clearNextAllSelect(note);
                    }
                    if(comment['id'] == $("#"+note['parentId']).val()){
                        DyCacadeSelect.existNextSelectOperatorClear(note);
                        DyCacadeSelect.recursion(comment);
                    } 
                });
            },
            existNextSelectOperatorClear:function(note){
                if(DyCacadeSelect.isExistNextSelect(note)){
                    DyCacadeSelect.clearNextAllSelect(note);
                    return true;
                }
                return false;
            },
            clearNextAllSelect:function(note){
                $("#"+note['parentId']).nextAll('select').remove();
            },
            isExistNextSelect:function(note){
                var selectLength = $("select[id="+note['parentId']+"]").length;
                if(selectLength>0){return true;}
                return false;
            }
        };
        //调用方法
        DyCacadeSelect.init("select",json);
    展开全文
  • 在做某些管理系统时,大多数情况都会用到级联菜单,可以对项目中的各个模块进行组织和管理,同时每个模块一般会多个页面,所以针对这些情况就要生成指定功能的菜单了。下面是基于jQuery的简单的级联菜单。 html中...

    在做某些管理系统时,大多数情况都会用到级联菜单,可以对项目中的各个模块进行组织和管理,同时每个模块一般会有多个页面,所以针对这些情况就要生成指定功能的菜单了。下面是基于jQuery的简单的级联菜单。
    html中的布局采用如下结构:

    <ul id="rootMenu">
        <li>
                <div style="background: #0000FF;">新闻 </div>
                <ul style="margin-left: 6px;">
                    <li>
                        <div style="background: #0000FF;margin:2px;">美食</div>
                        <ul style="margin-left: 6px;">
                            <li>西瓜</li>
                            <li>苹果</li>
                        </ul>
                    </li>
                    <li>健康</li>
                </ul>
            </li>
            <li>
                <div style="background: #0000FF;">娱乐 </div>
                <ul style="margin-left: 6px;">
                    <li>电视</li>
                    <li>电影</li>
                </ul>
            </li>
        </ul>

    当然在这只是一个布局而已,做好后我们只需要<ul id="rootMenu"></ul>这个节点就可以了,因为里面的菜单是通过数据来生成的。具体 方法如下:

    function genMenuByData(parent, menuItems) {
        var curNode;
        for(var i = 0; i < menuItems.length; i++) {
            if(menuItems[i].subItems) {
                curNode = $('<li><div style="background: #0000FF;">' + menuItems[i].title + '</div></li>').appendTo(parent);
                curNode = $('<ul style="margin-left: 6px;"></ul>').appendTo(curNode);
                genMenuByData(curNode, menuItems[i].subItems)
            } else {
                parent.append(
                    '<li>' + menuItems[i].title + '</li>'
                );
            }
        }
    }

    数据格式为:

    var menuData = [{
            title: '新闻 ',
            subItems: [{
                title: '美食',
                subItems: [{
                    title: '西瓜'
                }, {
                    title: '苹果'
                }]
            }, {
                title: '健康'
            }]
        }, {
            title: '娱乐 ',
            subItems: [{
                title: '电视'
            }, {
                title: '电影'
            }]
        }];

    方法调用时,我们只需传入根节点和菜单数据进去即可:genMenuByData($('#rootMenu'), menuData);这样就可以生成我们所需的级联菜单了。
    这里写图片描述
    这个菜单中,如果某个菜单有子菜单,则标识为蓝色,子菜单本身就不标色了。

    genMenuByData方法的基本思路是,遍历每个菜单节点数据,如果某个节点有子节点,则先生成父级菜单内容,然后保存该父级菜单中的一个jQuery对象,再递归调用,传入当前的父级对象和它相关的所有子菜单数据,某个节点没有子节点时,则直接生成该子节点即可,即直函数中的else分支,上述代码只是提供一个大概的思路,在实际项目中应该还要完善很多细节方面的问题,仅供参考。

    展开全文
  • 而现在忽然拿出来再做的时候我发现我忘记了,而且原来用asp写的程序都找不到了,真晕[emot]sweat[/emot],于是到网上搜,找了半天,我发现网上的写法各异,而且都特别复杂,这么一个二级级联菜单必要弄这么复杂...
  • 主要介绍了jQuery+ajax实现无刷新级联菜单示例,代码很完整,也非常实用,需要的小伙伴可以参考下。
  • 如果用纯JavaScript代码而不使用框架的话,那么做一个级联菜单也许是一件让人生畏的事情,但了框架,这件事情就很容易了,这就是框架的好处,极大地提高了开发效率,并且更可靠和易于维护。使用jQuery来实现级联...
  • 可是这种传统的级联菜单有一个很差的用户体验:我们必须在这个li元素上平行的移动鼠标,才能将鼠标移动到对应的二级菜单中。如果在移动过程中移动到了其他的li元素下,将会显示其他的二级菜单了2.改善这个用户体验的...

    1.一般的级联菜单,当我们鼠标滑动到一级菜单上的每一个li上时显示对应的二级菜单。可是这种传统的级联菜单有一个很差的用户体验:我们必须在这个li元素上平行的移动鼠标,才能将鼠标移动到对应的二级菜单中。如果在移动过程中移动到了其他的li元素下,将会显示其他的二级菜单了

    2.改善这个用户体验的原理在于设置鼠标经过li元素时的时间片

    3.实现代码:

    //前端页面
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无延迟菜单</title>
    
    <!--My CSS Link-->
    <link rel="stylesheet" href="../CSS/menu.css" />
    
    <!--Jquery JS Link-->
    <script src="../JS/jquery.min.js"></script>
    
    <!--My JS Link-->
    <script src="../JS/menu.js"></script>
    
    </head>
    <body>
    
        <!--一级菜单-->
        <div class="wrap">  
            <ul>
                <li data-id="a">
                    <span>服装/服装/服装</span>
                </li>
                <li data-id="b">
                    <span>首饰/首饰/首饰</span>
                </li>
                <li data-id="c">
                    <span>装扮/装扮/装扮</span>
                </li>
                <li data-id="d">
                    <span>书籍/书籍/书籍</span>
                </li>
                <li data-id="e">
                    <span>零食/零食/零食</span>
                </li>
                <li data-id="f">
                    <span>油卡/油卡/油卡</span>
                </li>
            </ul>
        </div>
    
        <!--隐藏的二级菜单-->
        <div class="sub none" id="a">
            <div class="sub_content">
                <dl>
                    <dt>
                        <a href="javascript:void(0);"><i>电视&gt;</i></a>
                    </dt>
                    <dd>
                        <a href="javascript:void(0);">品牌1</a>
                        <a href="">品牌2</a>
                        <a href="">品牌3</a>
                        <a href="">品牌4</a>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="sub none" style="top: 59px;" id="b">
            <div class="sub_content">
                <dl>
                    <dt>
                        <a href="javascript:void(0);"><i>电视&gt;</i></a>
                    </dt>
                    <dd>
                        <a href="javascript:void(0);">品牌1</a>
                        <a href="">品牌2</a>
                        <a href="">品牌3</a>
                        <a href="">品牌4</a>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="sub none" style="top: 89px;" id="c">
            <div class="sub_content">
                <dl>
                    <dt>
                        <a href="javascript:void(0);"><i>电视&gt;</i></a>
                    </dt>
                    <dd>
                        <a href="javascript:void(0);">品牌1</a>
                        <a href="">品牌2</a>
                        <a href="">品牌3</a>
                        <a href="">品牌4</a>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="sub none" style="top: 119px;" id="d">
            <div class="sub_content">
                <dl>
                    <dt>
                        <a href="javascript:void(0);"><i>电视&gt;</i></a>
                    </dt>
                    <dd>
                        <a href="javascript:void(0);">品牌1</a>
                        <a href="">品牌2</a>
                        <a href="">品牌3</a>
                        <a href="">品牌4</a>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="sub none" style="top: 149px;" id="e">
            <div class="sub_content">
                <dl>
                    <dt>
                        <a href="javascript:void(0);"><i>电视&gt;</i></a>
                    </dt>
                    <dd>
                        <a href="javascript:void(0);">品牌1</a>
                        <a href="">品牌2</a>
                        <a href="">品牌3</a>
                        <a href="">品牌4</a>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="sub none" style="top: 170px;" id="f">
            <div class="sub_content">
                <dl>
                    <dt>
                        <a href="javascript:void(0);"><i>电视&gt;</i></a>
                    </dt>
                    <dd>
                        <a href="javascript:void(0);">品牌1</a>
                        <a href="">品牌2</a>
                        <a href="">品牌3</a>
                        <a href="">品牌4</a>
                    </dd>
                </dl>
            </div>
    
        </div>
    
    </body>
    </html>
    
    
    
    
    //CSS样式
    @charset "utf-8";
    /* CSS Document */
    .wrap{
        position:relative;
        width: 200px;
        left: 50px;
        top: 0px;
    }
    
    ul{
        list-style-type: none;
        padding: 15px 0;
        margin: 9;
        background-color: #6c6669;
        color: $fff;
        border-right-width: 0;
    }
    
    ul li{
        display: block;
        height: 30px;
        line-height:30px;
        padding-left: 12px;
        cursor: pointer;
        font-size: 14px;
        position: relative;
    }
    
    ul li:hover{
        background-color: #CCC;
        color:#F33;
    }
    
    .none{
        display:none;
    }
    
    .sub{
        width: 600px;
        position:absolute;
        border: 1px solid grey;
        background: #f7f7f7;
        box-shadow: 2px 0 5px rgba(0,0,0,.3);
        left: 258px;
        top: 29px;  //每次加30px;
        box-sizing: border-box;
        margin: 0;
        padding: 10px;
    }
    
    .sub .sub_content a{
        font-size: 12px;
        color: $666;
        text-decoration: none;
    }
    
    .sub_content dd a{
        border-left: 1px solid #e0e0e0;
        padding: 0 10px;
        margin: 4px 0;
    }
    
    .sub_content dl{
        overflow: hidden;
    }
    
    .sub_content dt{
        float: left;
        width: 70px;
        font-weight: bold;
        clear: left;
        position:relative;
    }
    
    .sub_content dd{
        float: left;
        margin-left: 5px;
        border-top: 1px solid $eee;
        margin-bottom: 5px;
    }
    
    .sub_content dt i{
        width: 4px;
        height: 14px;
        font: 400 9px/14px consolas;
        position: absolute;
        right: 5px;
        top: 5px;
    }
    
    
    
    
    
    
    
    //JS核心代码
    // JavaScript Document
    $(function(){
    
        //鼠标经过子元素,显示对应的div
        var activediv = "";
        var timer;
        var entersub = false;
        $.fn.mouseenterfun = function(){
    
            //第一次进入一级菜单
            if(activediv == ""){
                //显示当前需要显示的div
                activediv = $(this).data('id');
                $("#"+activediv).removeClass("none");
                return ;
            }
    
            $li = $(this);
    
            //先隐藏之前显示出来的div
            timer = setTimeout(function(){
    
                //如果进入了子菜单,则清除timer,实现无延迟菜单的关键
                if(entersub == true){
                    clearTimeout(timer);
                    return;
                }
                $("#"+activediv).addClass("none");
                activediv = $li.data('id');
                $("#"+activediv).removeClass("none");
                timer = null;
            },100);
        };
        $(".wrap").on("mouseenter","li",$.fn.mouseenterfun);
    
        //鼠标移出一级菜单则隐藏现在显示的二级菜单
        $.fn.mouseleavefun = function(){
    
            setTimeout(function(){
                if(activediv != "" && entersub == false){
                    $("#"+activediv).addClass("none");
                }
            },10);
        };
        $(".wrap").mouseleave($.fn.mouseleavefun);
    
        //判断鼠标是否移入了二级菜单中,用于同activediv变量一起进行判断是否隐藏对应的activediv
        $(".sub").mouseenter(function(){
            entersub = true;
        }).mouseleave(function(){
            entersub = false;
        });
    });
    展开全文
  • jquery级联菜单效果

    2011-04-11 10:20:52
    jquery在前台客户端的处理很大的优势,其类库小但功能实用,受到Web前端开发人员很大的青睐,下面是一个级联菜单和局部刷新的小例子 前端html代码如下 [code="html"] 可收缩的级联菜单 ...
  • 最近项目(微信小程序项目)一个需求,一些多级结构的数据,需要一个树形的级联菜单来显示内容,类似如下: : 然而,在实现的时候却意外的遇到了困难。。 实现树形级联菜单遇到的困难 其实应该说是实现无限...
  • 级联菜单的实现方法很多,在本文为大家介绍下使用show和hidden轻松实现下级联效果,感兴趣的朋友可以参考下,希望对大家有所帮助
  • XML带邮编的,城市级联菜单, 代码. Vs 2008 编写的。
  • 一个比较简单的C#窗体级联菜单源码示例,支持二级级联,Windows XP风格,C#初学者认真参阅一下代码,对以后编程很帮助。
  • java awt 级联菜单

    2009-07-24 21:41:00
    瞎摸索了一下,貌似成了……Menu m1=new Menu("这是级联菜单吗?");MenuItem mi1=m1;也就是说,把Menu放在MenuItem的位置上,然后这个菜单项就可以拿去到处用了。而且前者是后者的子类,所以这样放也是意义的。不...
  • jquery 级联菜单

    2012-11-06 14:53:00
    经常用到这个虽然网上这个事例,放在这里以备后用: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head&...
  • XML做动态级联菜单

    2008-11-24 10:46:05
    网上又很多文章都讲述了级联菜单的问题,的用ajax+jsp,其实我也做过用ajax+jsp的级联菜单,但是若后台数据很小,又不经常变动,那么你可以用xml文件来做数据源,用javascript解析xml文件,得到里面的数据,这样就...
  • DWR级联菜单下拉框

    2010-07-18 02:30:26
    刚学dwr 自己写的三级联动下拉框 DWR版本 3.0 数据库 Ms SQL 2005 环境 Myeclipse 8.x 问题联系 :Mr .陈 MSN czw30110@hotmail.com
  • jQuery实现实用的盛市、县三级Select级联菜单,在需要选择全国省份城市的时候,可应用本效果,代码中已包括了全国省市县城市信息,下载后请根据示例页面中的方法,自行调用。再也不用努力的找了,这里就,哈哈!~~
  • 两级级联菜单源代码

    2018-01-08 10:35:58
    下载即可用,问题留言解决,一定要评价,好东西要让大家知道(上传的是html文件,里面包含js脚本)
  • javascript实现级联菜单

    万次阅读 2008-10-06 17:45:00
    级联菜单,就是两个select选项,选中其中一个后,另外一个选项也跟着变化。 具体实现如下: index.html文件如下:HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> test js文件如下:/* +---------------...
  • 这是一个带数据库的动态级联菜单,搞了好久都没搞出来,在经典人帮我贴出来了,我稍微修改了一下收藏在这里,希望和大家一起分享! <%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> <!--#include file=...
  • php 二级级联菜单

    2014-05-19 21:39:03
    找了很多个级联菜单,都不好用,自己弄个简单点的,共享下,希望朋友用得着 //建立表country,三个字段Id,parentId,area. $pro = $_POST['pre']; $cit = $_POST['city']; echo $pro; echo $cit; $link ...
  • 个地方能够加载远程的网页而且无闪屏不用刷新界面,下面我们来演示一个淡入淡出的带动态效果的级联菜单的 jQuery的实现。 首先是HTML的代码 弹出菜单 我是菜单一 子菜单1 子菜单2

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 429
精华内容 171
关键字:

有级联菜单