基于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解析HTML、JSON和XML实例详解

    JQuery解析HTML、JSON和XML实例详解

    JQuery具有强大的解析数据的能力,本文详细介绍HTML、JSON和XML格式的文件的数据如何解析
    2014-03-03
  • JQuery点击按钮跳转页面的方法

    JQuery点击按钮跳转页面的方法

    这篇文章主要介绍了JQuery点击按钮跳转页面的实现方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • jQuery 插件开发 其实很简单

    jQuery 插件开发 其实很简单

    jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件
    2009-07-07
  • jquery中交替点击事件toggle方法的使用示例

    jquery中交替点击事件toggle方法的使用示例

    jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件。如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下
    2013-12-12
  • jQuery使用ajaxSubmit()提交表单示例

    jQuery使用ajaxSubmit()提交表单示例

    这篇文章主要介绍了jQuery使用ajaxSubmit()提交表单示例,使用延第三方插件jquery.form实现,需要的朋友可以参考下
    2014-04-04
  • 几种二级联动案例(jQuery\Array\Ajax php)

    几种二级联动案例(jQuery\Array\Ajax php)

    这篇文章主要为大家详细介绍了几种二级联动案例(jQuery\Array\Ajax php),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • Jquery选择器 $实现原理

    Jquery选择器 $实现原理

    在此之前对于Microsoft Ajax的Sys和Jquery的$符号一直很好奇, 不明白为什么输入一个'$()'就可以实现选择器?
    2009-12-12
  • jquery简单实现纵向的无缝滚动代码实例

    jquery简单实现纵向的无缝滚动代码实例

    这篇文章主要介绍了jquery简单实现纵向的无缝滚动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Jquery搜索父元素操作方法

    Jquery搜索父元素操作方法

    这篇文章主要介绍了Jquery搜索父元素操作方法,实例分析了parents、cloest、parent、parentsUtil及offsetParent方法的使用技巧,需要的朋友可以参考下
    2015-02-02
  • jquery toolbar与网页浮动工具条具体实现代码

    jquery toolbar与网页浮动工具条具体实现代码

    toolbar 网页浮动工具条非常实用的一个功能,下面为大家介绍下使用jquery如何快速做到
    2014-01-01

最新评论