Jquery 菜单插件之 Superfish jQuery菜单
大家如果想了解"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;
}
今天文章就透露到这里,今天这篇文章讲解:第三方JQuery插件(Superfish jQuery)和javascript函数迭代。
其他的(1)、JSONArray数据解析、(2)javascript拼接HTML都只是简单讲解,如果有兴趣的码农,可以自己百度或Google,实在不行就看我接下来准备发表的文章。
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。