基于jquery的一個(gè)OutlookBar類(lèi)，動(dòng)態(tài)創(chuàng)建導(dǎo)航條

更新時(shí)間：2010年11月19日 16:34:41 作者：

初學(xué)jquery，如有錯(cuò)誤，請(qǐng)高手們指出想看效果及完整代碼的可以下載rar包

圖示效果：

演示地址：http://demo.jb51.net/js/menu_jquery/index.html
下載地址：http://xiazai.jb51.net/201011/yuanma/menu_jquery.rar
OutlookBar.js

復(fù)制代碼代碼如下:

 
function OutlookBar(targetName)//targetName:右側(cè)iframe的name 
{ 
//創(chuàng)建標(biāo)題 
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; 
} 
}) 
} 
//創(chuàng)建子項(xiàng) 
this.AddItem=function(menuid,menuchildtext,childurl){ 
$("#child_"+menuid).append("<li><a target='"+targetName+"' href='"+childurl+"'>"+menuchildtext+"</a></li>"); 
} 
} 

使用創(chuàng)建導(dǎo)航條

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(function(){ 
var cc=new OutlookBar('BoardList');//targetName:右側(cè)iframe的name 
cc.AddTitle('a','搜索引擎',true);//ID名，顯示名，是否打開(kāi)狀態(tài) 
cc.AddItem('a','百度','http://baidu.com'); 
cc.AddItem('a','google','http://google.com'); 
cc.AddTitle('b','門(mén)戶(hù)網(wǎng)站',false); 
cc.AddItem('b','腳本編程','http://www.dhdzp.com'); 
cc.AddItem('b','素材','http://sc.jb51.net'); 
$("div").addClass("divwidth"); 
}); 
</script> 

您可能感興趣的文章:

導(dǎo)航條

相關(guān)文章

javascript開(kāi)發(fā)中使用onpropertychange,oninput事件解決onchange事件的不足
用onpropertychange,oninput事件解決onchange事件的不足，需要的朋友可以參考下。
2010-11-11
jQuery 檢查某個(gè)元素在頁(yè)面上是否存在實(shí)例代碼
這篇文章主要介紹了jQuery 檢查某個(gè)元素在頁(yè)面上是否存在實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2016-10-10
很棒的學(xué)習(xí)jQuery的12個(gè)網(wǎng)站推薦
jQuery是目前最流行的 JavaScript 庫(kù)。對(duì)于初學(xué)者來(lái)說(shuō)，有的時(shí)候很難找到一個(gè)好的學(xué)習(xí)jQuery的網(wǎng)站，今天本文收集了12個(gè)很棒的 jQuery 學(xué)習(xí)網(wǎng)站推薦給大家。
2011-04-04
jQuery Jsonp跨域模擬搜索引擎
這篇文章主要介紹了jQuery Jsonp跨域模擬搜索引擎的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2017-06-06
jquery+css3打造一款ajax分頁(yè)插件(自寫(xiě))
這篇文章主要介紹了自己寫(xiě)的一款ajax分頁(yè)插件，用jquery+css3打造支持IE6+，但沒(méi)有動(dòng)畫(huà)效果,需要的朋友可以參考下
2014-06-06
jQuery內(nèi)容過(guò)濾選擇器用法示例
這篇文章主要介紹了jQuery內(nèi)容過(guò)濾選擇器用法,結(jié)合實(shí)例形式分析了jQuery中使用contains、empty、has、parent等進(jìn)行內(nèi)容過(guò)濾的操作技巧,需要的朋友可以參考下
2016-09-09
Validform驗(yàn)證時(shí)可以為空否則按照指定格式驗(yàn)證
這篇文章主要介紹了Validform驗(yàn)證時(shí)可以為空否則按照指定格式驗(yàn)證的相關(guān)資料,需要的朋友可以參考下
2017-10-10
jquery中有哪些api jQuery主要API
jquery有很多的API事件，本文小編給大家整理了jquery中最主要的API函數(shù)集合。
2017-11-11
ASP.NET jQuery 實(shí)例6 (實(shí)現(xiàn)CheckBoxList成員全選或全取消)
ASP.NET jQuery 實(shí)例6 (實(shí)現(xiàn)CheckBoxList成員全選或全取消) ，需要的朋友可以參考下。
2012-01-01
jQuery+HTML5實(shí)現(xiàn)圖片上傳前預(yù)覽效果
這篇文章主要介紹了jQuery+HTML5實(shí)現(xiàn)圖片上傳前預(yù)覽效果,涉及jquery操作圖片動(dòng)態(tài)顯示效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-08-08