基于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 相关文章推荐
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 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 $_SERVER当前完整url的写法
2009/11/12 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
JQuery 操作select标签实现代码
2010/05/14 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
Vue实现购物车功能
2017/04/27 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
Python多线程下载文件的方法
2015/07/10 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
校车安全责任书
2014/08/25 职场文书
工作经历证明书范文
2014/11/02 职场文书
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL