基于jquery的一個OutlookBar類,動態(tài)創(chuàng)建導(dǎo)航條
圖示效果:
演示地址:http://demo.jb51.net/js/menu_jquery/index.html
下載地址:http://xiazai.jb51.net/201011/yuanma/menu_jquery.rar
OutlookBar.js
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)航條
<script type="text/javascript">
$(function(){
var cc=new OutlookBar('BoardList');//targetName:右側(cè)iframe的name
cc.AddTitle('a','搜索引擎',true);//ID名,顯示名,是否打開狀態(tài)
cc.AddItem('a','百度','http://baidu.com');
cc.AddItem('a','google','http://google.com');
cc.AddTitle('b','門戶網(wǎng)站',false);
cc.AddItem('b','腳本編程','http://www.dbjr.com.cn');
cc.AddItem('b','素材','http://sc.jb51.net');
$("div").addClass("divwidth");
});
</script>
- jquery scrollTop方法根據(jù)滾動像素顯示隱藏頂部導(dǎo)航條
- jquery簡單實(shí)現(xiàn)鼠標(biāo)經(jīng)過導(dǎo)航條改變背景圖
- jQuery關(guān)于導(dǎo)航條背景切換效果實(shí)現(xiàn)示例
- jquery 導(dǎo)航條的效果(css選擇器控制)
- jquery實(shí)現(xiàn)的藍(lán)色二級導(dǎo)航條效果代碼
- jQuery側(cè)邊欄實(shí)現(xiàn)代碼
- jQuery固定浮動側(cè)邊欄實(shí)現(xiàn)思路及代碼
- Jquery實(shí)現(xiàn)側(cè)邊欄跟隨滾動條固定(兼容IE6)
- 博客側(cè)邊欄模塊跟隨滾動條滑動固定效果的實(shí)現(xiàn)方法(js+jquery等)
- jQuery實(shí)現(xiàn)智能判斷固定導(dǎo)航條或側(cè)邊欄的方法
相關(guān)文章
JQuery解析HTML、JSON和XML實(shí)例詳解
JQuery具有強(qiáng)大的解析數(shù)據(jù)的能力,本文詳細(xì)介紹HTML、JSON和XML格式的文件的數(shù)據(jù)如何解析2014-03-03JQuery點(diǎn)擊按鈕跳轉(zhuǎn)頁面的方法
這篇文章主要介紹了JQuery點(diǎn)擊按鈕跳轉(zhuǎn)頁面的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12jquery中交替點(diǎn)擊事件toggle方法的使用示例
jquery中交替點(diǎn)擊事件toggle方法中有兩個參數(shù),分別是要交替執(zhí)行的事件。如果不傳參默認(rèn)是顯示隱藏功能,下面有個不錯的示例,感興趣的朋友可以參考下2013-12-12幾種二級聯(lián)動案例(jQuery\Array\Ajax php)
這篇文章主要為大家詳細(xì)介紹了幾種二級聯(lián)動案例(jQuery\Array\Ajax php),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08jquery簡單實(shí)現(xiàn)縱向的無縫滾動代碼實(shí)例
這篇文章主要介紹了jquery簡單實(shí)現(xiàn)縱向的無縫滾動,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04jquery toolbar與網(wǎng)頁浮動工具條具體實(shí)現(xiàn)代碼
toolbar 網(wǎng)頁浮動工具條非常實(shí)用的一個功能,下面為大家介紹下使用jquery如何快速做到2014-01-01