Jquery 菜单插件之 Superfish jQuery菜单解析

你猜 阅读:221 2021-03-31 22:23:27 评论:0

大家如果想了解"Superfish jQuery菜单"插件,可以查看我发布的一篇“关于JQuery 菜单插件”,这里已经告诉我们该jQuery菜单插件的相关优势和下载地址,在下载中包含基础的Demo,初始者可以依次入门。


接下来,我们进入我们开发重点:

第一步:首先,查看我们基于Superfish jQuery菜单插件实现的效果。


第二步:查看静态HTML源代码,是如何实现该功能的(我们这里只是分析Superfish jQuery菜单插件HTML构成样式)。

<ul class="sf-menu" id="example" style="line-height:10px;margin-left:8px;">
<li class="current" >
<a href="#">CEO办公室</a>
<ul>
<li>
<a href="#">财务部1</a>
<ul>
<li>
<a href="#">财务部门2</a>
<ul>
<li><a href="#">测试部门</a></li>

</ul>
</li>

       </ul>
</li>
<li>
<a href="#">测试部门一</a>

</li>
<li>
<a href="#">测试部门2</a>

</li>
<li>
<a href="#">测试部门五</a>

</li>

</ul>
</li>
</ul>

通过上面静态HTML数据信息,我们可以很容易看出:ul标签和li标签,构成我们今天学习的菜单控件(Superfish jQuery),如何引用Superfish jQuery菜单插件的相关样式和js,请朋友们参考自己下载的Demo案例。

第三步:要实现第三方jquery 菜单插件与自己开发的项目整合起来,重点是要查看后台是如何返回数据,前台又是如何处理?下面这幅截图是我负责的系统后台返回数据样式(已经经过格式化)。[ 
    { 
        "id": "14efbeaab57308f49ce1c1a4244b4009", 
        "name": "华星光电", 
        "subNode": [ 
            { 
                "id": "14efbedf53d206203ed19ea44b098e83", 
                "name": "财务部1", 
                "subNode": [ 
                    { 
                        "id": "14efbee399cdba581fa197744ab9f984", 
                        "name": "财务部2", 
                        "subNode": [ 
                            { 
                                "id": "14efbee6bf2c9b3b913a21f4cf1a03e4", 
                                "name": "财务部3", 
                                "subNode": [ 
                                    { 
                                        "id": "14efbee9311ce09a33a824e4691aee92", 
                                        "name": "财务部4", 
                                        "subNode": [] 
                                    } 
                                ] 
                            } 
                        ] 
                    }, 
                    { 
                        "id": "14f63b0288a3237a8e5820944d9bf326", 
                        "name": "测试部门", 
                        "subNode": [] 
                    } 
                ] 
            }, 
            { 
                "id": "14f63b3954c4f7d53c992c54edaaa1da", 
                "name": "测试部门一", 
                "subNode": [] 
            }, 
            { 
                "id": "14f63b4eb78b5faf65a4df74996894ca", 
                "name": "测试部门2", 
                "subNode": [] 
            }, 
            { 
                "id": "14f63b51db6b5f39ffa3df249939cf64", 
                "name": "测试部门五", 
                "subNode": [] 
            } 
        ] 
    }, 
    { 
        "id": "14efbee6bf2c9b3b913a21f4cf1a03e4 ", 
        "name": "财务部3", 
        "subNode": [ 
            { 
                "id": "14efbee9311ce09a33a824e4691aee92", 
                "name": "财务部4", 
                "subNode": [] 
            } 
        ] 
    } 
]

第四步:我们已经拿到了后台数据,接下来就是本篇文章的学习重点:(javascript 函数迭代、javascript JSONArray 数据格式解析和javascript 拼接HTML)

函数迭代:

//获取部门相关信息
function getDepart(){
var url="${kmsContextPath}kms/multidoc/kms_multidoc_knowledge/kmsMultidocKnowledge.do?method=homeSearchDept";
$.get(url, function(data,state){
var jsonarray=eval(data);
for(var i=0;i<jsonarray.length;i++){
var jsonObject=jsonarray[i];
 
var html="";
html+="<ul class='sf-menu' style='line-height:10px;margin-left:8px;' id='"+jsonObject.id+"'>";
html+="<li class='current'>";
html+="<a href='#' οnclick='searchCase(\"org\",\""+jsonObject.id+"\",\""+jsonObject.name+"\")'>"+jsonObject.name+"</a>";

//判断当前部门是否存在子节点
var subNode=jsonObject.subNode;
if(subNode.length!=0){
html+="<ul>";
var content=getSubDepart(subNode);
html+=content;
html+="</ul>";
}
html+="</li>";
html+="</ul>";

$("#department").append(html);
$("#"+jsonObject.id+"").superfish({});
 

}  
});  
}
//部门数据迭代
function getSubDepart(jsonObject){
var content=""
var jsonArray=eval(jsonObject);
for(var i=0;i<jsonArray.length;i++){
var json=jsonArray[i];

content+="<li>";
content+="<a href='#' οnclick='searchCase(\"org\",\""+json.id+"\",\""+json.name+"\")'>"+json.name+"</a>";
//判断是否存在子节点
var subDepart=json.subNode;
if(subDepart.length!=0){
content+="<ul>";
var html= getSubDepart(subDepart);
content+=html;
content+="</ul>";
}
content+="</li>";
}
return content;
}

 在页面初始化时,调用geDepart()函数即可。 


今天文章就透露到这里,今天这篇文章讲解:第三方JQuery插件(Superfish jQuery)和javascript函数迭代。

其他的(1)、JSONArray数据解析、(2)javascript拼接HTML都只是简单讲解,如果有兴趣的码农,可以自己百度或Google,实在不行就看我接下来准备发表的文章。



声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
KIKK导航

KIKK导航

关注我们