基于jquery的一个OutlookBar类,动态创建导航条
更新时间:2010年11月19日 16:34:41 作者:
初学jquery,如有错误,请高手们指出想看效果及完整代码的可以下载rar包
图示效果:
演示地址:http://demo.jb51.net/js/menu_jquery/index.html
下载地址:http://xiazai.jb51.net/201011/yuanma/menu_jquery.rar
OutlookBar.js
复制代码 代码如下:
function OutlookBar(targetName)//targetName:右侧iframe的name
{
//创建标题
this.AddTitle=function(menuid,menutitle,openor){
$("body").append("<div id="+menuid+" class='menu_down' ><span>"+menutitle+"</span></div><div id=child_"+menuid+" class='menuChild'></div><div class='jiange'></div>");
if(openor==false)
{
$("#child_"+menuid).hide();
$("#"+menuid).removeClass("menu_down");
$("#"+menuid).addClass("menu_up");
}
$("#"+menuid).click(function(){
if(openor==false){
$("#child_"+menuid).slideDown("fast");
$("#"+menuid).removeClass("menu_up");
$("#"+menuid).addClass("menu_down");
openor=true;
}
else
{
$("#child_"+menuid).slideUp("fast");
$("#"+menuid).removeClass("menu_down");
$("#"+menuid).addClass("menu_up");
openor=false;
}
})
}
//创建子项
this.AddItem=function(menuid,menuchildtext,childurl){
$("#child_"+menuid).append("<li><a target='"+targetName+"' href='"+childurl+"'>"+menuchildtext+"</a></li>");
}
}
使用创建导航条
复制代码 代码如下:
<script type="text/javascript">
$(function(){
var cc=new OutlookBar('BoardList');//targetName:右侧iframe的name
cc.AddTitle('a','搜索引擎',true);//ID名,显示名,是否打开状态
cc.AddItem('a','百度','http://baidu.com');
cc.AddItem('a','google','http://google.com');
cc.AddTitle('b','门户网站',false);
cc.AddItem('b','脚本编程','https://www.jb51.net');
cc.AddItem('b','素材','http://sc.jb51.net');
$("div").addClass("divwidth");
});
</script>
相关文章
几种二级联动案例(jQuery\Array\Ajax php)
这篇文章主要为大家详细介绍了几种二级联动案例(jQuery\Array\Ajax php),具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-08-08
最新评论