jquery写的一个OutlookBar类，动态创建导航条

初学jquery，如有错误，请高手们指出

想看效果及完整代码的可以下载rar包

下载地址：http://files.cnblogs.com/songye/menu.rar

 

OutlookBar.js

1 function OutlookBar(targetName) // targetName:右侧iframe的name
2   {
3 // 创建标题
4   this .AddTitle = function (menuid,menutitle,openor){
5 $( " body " ).append( " <div id= " + menuid + " class='menu_down' ><span> " + menutitle + " </span></div><div id=child_ " + menuid + " class='menuChild'></div><div class='jiange'></div> " );
6 if (openor == false )
7 {
8 $( " #child_ " + menuid).hide();
9 $( " # " + menuid).removeClass( " menu_down " );
10 $( " # " + menuid).addClass( " menu_up " );
11 }
12 $( " # " + menuid).click( function (){
13 if (openor == false ){
14 $( " #child_ " + menuid).slideDown( " fast " );
15 $( " # " + menuid).removeClass( " menu_up " );
16 $( " # " + menuid).addClass( " menu_down " );
17 openor = true ;
18 }
19 else
20 {
21 $( " #child_ " + menuid).slideUp( " fast " );
22 $( " # " + menuid).removeClass( " menu_down " );
23 $( " # " + menuid).addClass( " menu_up " );
24 openor = false ;
25 }
26 })
27 }
28 // 创建子项
29 this .AddItem = function (menuid,menuchildtext,childurl){
30 $( " #child_ " + menuid).append( " <li><a target=' " + targetName + " ' href=' " + childurl + " '> " + menuchildtext + " </a></li> " );
31 }
32 }

 

使用创建导航条

< 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 ' , ' QQ ' , ' http://QQ.com ' );
cc.AddItem( ' b ' , ' 网易 ' , ' http://163.com ' );

$( " div " ).addClass( " divwidth " );
});
< / script>

转载于:https://www.cnblogs.com/songye/archive/2010/11/19/jquery.html