首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

JUERY UI ACCORDION动态增添MENU

2012-09-05 
JUERY UI ACCORDION动态添加MENUhttp://jqueryui.com/demos/accordion/里面的例子,下图红框所示的内容都是

JUERY UI ACCORDION动态添加MENU

http://jqueryui.com/demos/accordion/里面的例子,下图红框所示的内容都是在html页面上写死的,如果想动态显示menu的内容该怎么办呢,下面就简单介绍下:

JUERY UI ACCORDION动态增添MENU

首先就是下在jueryui,这里就不介绍了。

思路:

页面加载完成后,通过ajax向后台获取第一层的menu的数据,并将其显示在页面上,同时为每一个menu绑定一个onclick事件,然后触发accordion事件;这样第一层menu实现,与在页面写死menu实现的效果一样。然后在点击第一层menu的时候,会触发刚才绑定click事件,通过传递参数获得该menu的子menu。

?

代码:

js代码:

<script>

$(function() {

$.ajax({
url:"
http://localhost:8080/process/Category",
dataType:"xml",
success:function(data){
$(data).find("Category").each(function(index){
var p_name = $(this).children("name").text();
$("#accordion").append("<h3><a href='#' onclick=ck('"+p_name+"')>"+p_name+"</a></h3><div id='"+p_name+"'></div>");
});
$( "#accordion" ).accordion({
autoHeight: false,
navigation: true
});
}
});
});
function ck(p_name){
$.ajax({
url:"
http://localhost:8080/process/Process",
dataType:"xml",
data:p_name,
success:function(data){
$(data).find("ProcessDefinitionUUID").each(function(index){
var name = $(this).children("value").text();
$("#"+p_name).append("<ul><li><a >"+name+"</a></li></ul>");
});
}
});
}

</script>

<body>
<div id="accordion">

</div>
</body>

上面代码的红色部分原来是放在ajax的上面的,这样的效果如下图所示:

JUERY UI ACCORDION动态增添MENU

这与实际需求不一致。

所以将其放在ajax的success中去了,这样在加载完后台数据成功后,会触发jqueryui accordion。

实现效果如下图所示:

JUERY UI ACCORDION动态增添MENU

ok,完工。

博客地址:jiangli.easymorse.com

热点排行