jQuery 無(wú)限級(jí)菜單的簡(jiǎn)單實(shí)例
我將CSS完全分離出來(lái)用jQuery附加式樣,就是為了多級(jí)染色,并且生成目錄樹(shù)和控制式樣也很容易,生成時(shí)也不需要考慮式樣。數(shù)據(jù)表建議用事先Order排序的方式,不要讀取數(shù)據(jù)的時(shí)候才分級(jí)排序,這樣性能會(huì)較佳。
我把它做成了個(gè).Net的控件,作為輕量級(jí)的無(wú)限目錄樹(shù),還是相當(dāng)好用的。只是還不完善,我先慢慢修改,等差不多了再發(fā)布出來(lái)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>jQuery 無(wú)限級(jí)菜單</title>
<style type="text/css">
#menu a {
color:#fff;
}
#menu div {
/* text-align:center; */
}
#menu div a {
padding-left:20px;
}
#menu div.root {
display:block;
}
.list { background:url(list.gif) no-repeat 6px 6px; }
</style>
<script type="text/javascript" language="javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
//顏色列表,如果想支持無(wú)限級(jí),最好自動(dòng)生成顏色列表,不過(guò)我的配色一項(xiàng)很差,用生成的就更慘不忍睹了……
_cor = ['#003366', '#0066CC', '#3399FF', '#990000', '#CC0000', '#FF3300', '#FF9900', '#FFCC66', '#FFFFFF'];
//初始化類(lèi)
(function Init(i,obj){
i++;
//查找子節(jié)點(diǎn)
_obj = obj.children('div');
//若有子節(jié)點(diǎn),則增加一個(gè)專(zhuān)有式樣
if (_obj.length > 0)
obj.addClass('list');
$.each(_obj, function(j,o){
//若是子目錄則隱藏
if (i > 0)
$(o).hide();
//根據(jù)目錄級(jí)數(shù)查找顏色字典上背景色,可改為圖片什么的。
$(o).css('background-color',_cor[i]);
//查找子目錄
Init(i,$(o));
});
})(-1,$('#menu'));
});
//跳轉(zhuǎn)鏈接
function GotoURL(obj) {
//若鏈接最末一位不是符號(hào)“#”則跳轉(zhuǎn)鏈接,因?yàn)槿ref得到鏈接絕對(duì)路徑,所以只能取最后一位,其實(shí)可以傳值判斷或生成目錄樹(shù)時(shí)不產(chǎn)生onclick都是可以的
if (obj.href.substring(obj.href.length - 1, obj.href.length) != "#") return true;
//拉出和縮進(jìn)的特效
$.each($(obj).parent().children('div'), function(i,o){
$(o).slideToggle('slow');
});
return false;
}
</script>
</head>
<body>
<div id="menu">
<div> <a href="#" onclick="return GotoURL(this)">第一級(jí)</a> </div>
<div> <a href="#" onclick="return GotoURL(this)">第一級(jí)</a>
<div> <a href="#" onclick="return GotoURL(this)">第二級(jí)</a> </div>
<div> <a href="#" onclick="return GotoURL(this)">第二級(jí)</a>
<div> <a href="#" onclick="return GotoURL(this)">第三級(jí)</a>
<div> <a href="#" onclick="return GotoURL(this)">第四級(jí)</a> </div>
<div> <a href="#" onclick="return GotoURL(this)">第四級(jí)</a> </div>
</div>
<div> <a href="#" onclick="return GotoURL(this)">第三級(jí)</a>
<div> <a href="#" onclick="return GotoURL(this)">第四級(jí)</a> </div>
<div> <a href="#" onclick="return GotoURL(this)">第四級(jí)</a>
<div> <a href="#" onclick="return GotoURL(this)">第五級(jí)</a> </div>
<div> <a href="#" onclick="return GotoURL(this)">第五級(jí)</a> </div>
<div> <a href="#" onclick="return GotoURL(this)">第五級(jí)</a>
<div> <a href="#" onclick="return GotoURL(this)">第六級(jí)</a> </div>
<div> <a href="#" onclick="return GotoURL(this)">第六級(jí)</a> </div>
</div>
</div>
</div>
</div>
<div> <a href="#" onclick="return GotoURL(this)">第二級(jí)</a> </div>
</div>
<div> <a href="#" onclick="return GotoURL(this)">第一級(jí)</a>
<div> <a href="#" onclick="return GotoURL(this)">第二級(jí)</a> </div>
<div> <a href="#" onclick="return GotoURL(this)">第二級(jí)</a> </div>
<div> <a href="#" onclick="return GotoURL(this)">第二級(jí)</a>
<div> <a href="#" onclick="return GotoURL(this)">第三級(jí)</a>
<div> <a href="#" onclick="return GotoURL(this)">第四級(jí)</a> </div>
<div> <a href="#" onclick="return GotoURL(this)">第四級(jí)</a> </div>
</div>
<div> <a href="#" onclick="return GotoURL(this)">第三級(jí)</a>
<div> <a href="#" onclick="return GotoURL(this)">第四級(jí)</a> </div>
<div> <a href="#" onclick="return GotoURL(this)">第四級(jí)</a>
<div> <a href="#" onclick="return GotoURL(this)">第五級(jí)</a> </div>
<div> <a href="#" onclick="return GotoURL(this)">第五級(jí)</a> </div>
<div> <a href="#" onclick="return GotoURL(this)">第五級(jí)</a>
<div> <a href="#" onclick="return GotoURL(this)">第六級(jí)</a> </div>
<div> <a href="#" onclick="return GotoURL(this)">第六級(jí)</a> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
- jquery 無(wú)限級(jí)聯(lián)菜單案例分享
- jquery 無(wú)限級(jí)下拉菜單的簡(jiǎn)單實(shí)現(xiàn)代碼
- 使用jquery菜單插件HoverTree仿京東無(wú)限級(jí)菜單
- jquery實(shí)現(xiàn)無(wú)限分級(jí)橫向?qū)Ш讲藛蔚姆椒?/a>
- jQuery樹(shù)形下拉菜單特效代碼分享
- jquery+CSS實(shí)現(xiàn)的多級(jí)豎向展開(kāi)樹(shù)形TRee菜單效果
- json+jQuery實(shí)現(xiàn)的無(wú)限級(jí)樹(shù)形菜單效果代碼
- 基于jquery實(shí)現(xiàn)的樹(shù)形菜單效果代碼
- 輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建樹(shù)形菜單
- 基于jquery實(shí)現(xiàn)無(wú)限級(jí)樹(shù)形菜單
相關(guān)文章
Jquery無(wú)須瀏覽實(shí)現(xiàn)直接下載文件
這篇文章介紹了Jquery無(wú)須瀏覽實(shí)現(xiàn)直接下載文件的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-05-05jquery win 7透明彈出層效果的簡(jiǎn)單代碼
jquery win 7透明彈出層效果,點(diǎn)擊可以彈出一個(gè)透明層的jquery特效,插件可以調(diào)彈出框的寬度和高度,很不錯(cuò)的一個(gè)彈出層插件。2013-08-08jQuery操作選中select下拉框的值代碼實(shí)例
這篇文章主要介紹了jQuery操作選中select下拉框的值代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02fancybox1.3.1 基于Jquery的插件在IE中圖片顯示問(wèn)題
JQuery的彈出窗口插件也很多了,例如Lightbox…這個(gè)我們介紹比較優(yōu)秀的Plugin – Fancybox。2010-10-10jQuery maxlength文本字?jǐn)?shù)限制插件
相信大家對(duì)twitter類(lèi)的微博客都不陌生,作為一句話(huà)博客其字?jǐn)?shù)即時(shí)提示效果設(shè)計(jì)的非常人性化.2010-04-04JQuery 使用attr方法實(shí)現(xiàn)下拉列表選中
實(shí)現(xiàn)下拉列表選中的方法有很多,這篇文章主要介紹了JQuery 使用attr方法的具體實(shí)現(xiàn),需要的朋友可以收藏下2014-10-10