基于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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 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/03/24 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
python获取文件扩展名的方法
2015/07/06 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
python去掉空白行的多种实现代码
2018/03/19 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
汉森批发:Hansen Wholesale
2018/05/24 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
社区优秀志愿者先进事迹
2014/05/09 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
政府个人对照检查材料
2014/08/28 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
财务整改报告范文
2014/11/05 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
微信搭讪开场白
2015/05/28 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL