基于jquery的一个OutlookBar类,动态创建导航条


Posted in Javascript onNovember 19, 2010

图示效果:
基于jquery的一个OutlookBar类,动态创建导航条
演示地址:http://demo.3water.com/js/menu_jquery/index.html
下载地址:http://xiazai.3water.com/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://3water.com'); 
cc.AddItem('b','素材','http://sc.3water.com'); 
$("div").addClass("divwidth"); 
}); 
</script>
Javascript 相关文章推荐
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
Vue组件基础用法详解
Feb 05 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 #Javascript
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 #Javascript
Google AJAX 搜索 API实现代码
Nov 17 #Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 #Javascript
菜鸟学习JavaScript小实验之函数引用
Nov 17 #Javascript
return false,对阻止事件默认动作的一些测试代码
Nov 17 #Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 #Javascript
You might like
php中定义网站根目录的常用方法
2010/08/08 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
DEFER怎么用?
2006/07/01 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
Python实现多属性排序的方法
2018/12/05 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
服装店营销方案
2014/03/10 职场文书
小学生作文评语
2014/04/18 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
pandas中对文本类型数据的处理小结
2021/11/01 Python
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers