一个web左侧菜单例子
生活随笔
收集整理的這篇文章主要介紹了
一个web左侧菜单例子
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一 左側菜單簡介并更換圖標
圖圖：
碼碼：
<link rel="stylesheet" type="text/css" href="js/tree_themes/SimpleTree.css"/> <script type="text/javascript" src="js/jquery-1.6.min.js"></script> <script type="text/javascript" src="js/SimpleTree.js"></script> <script type="text/javascript"> $(function(){$(".st_tree").SimpleTree({click:function(a){if(!$(a).attr("hasChild"))alert($(a).attr("ref"));}}); }); </script> </head> <body><div class="st_tree"> <ul><li><a href="#" ref="hyjm">歡迎界面</a></li><li><a href="#" ref="xtgl">系統管理</a></li><ul show="true"><li><a href="#" ref="yhgl">用戶管理</a></li><li><a href="#" ref="rzck">日志查看</a></li></ul><li><a href="#" ref="ckgl">倉庫管理</a></li><ul><li><a href="#" ref="kcgl">庫存管理</a></li><li><a href="#" ref="shgl">收貨管理</a></li><li><a href="#" ref="fhgl">發貨管理</a></li><ul><li><a href="#" ref="yhgl">用戶管理</a></li><li><a href="#" ref="rzck">日志查看</a></li></ul></ul> </ul> </div></body>? ? 這是一個較常用的網上可下載到的左側菜單例子；
? ? 圖1 是其運行效果；
? ? 首先定義div，其css類為st_tree;
? ? 然后定義列表ul；每個li為一個一級菜單；
? ? 下級菜單再在某個li下定義ul li列表；
? ? 下面改造一下，把圖標換成兔兔圖標看看；
? ? 換完之后一看，效果如圖2；圖標重疊了，兔子都看不到；黑兔子圖標并擋住了字；
? ? 先把黑兔子換成白兔子，然后調整css文件內容；
把相關的三個上或下邊距由0改為50；再運行；好了；效果如圖3、4；
兔子出來了；
現在可以查看兔子庫存、收兔子、發兔子......；
源碼下載：
http://pan.baidu.com/s/1CzwRk
看下我的兔子圖標，相當的可愛；
二?SimpleTree.js分析
$(function(){$.fn.extend({SimpleTree:function(options){//初始化參數var option = $.extend({click:function(a){ }},options);option.tree=this; /* 在參數對象中添加對當前菜單樹的引用，以便在對象中使用該菜單樹 */option._init=function(){/** 初始化菜單展開狀態，以及分叉節點的樣式*/ this.tree.find("ul ul").hide(); /* 隱藏所有子級菜單 */this.tree.find("ul ul").prev("li").removeClass("open"); /* 移除所有子級菜單父節點的 open 樣式 */this.tree.find("ul ul[show='true']").show(); /* 顯示 show 屬性為 true 的子級菜單 */this.tree.find("ul ul[show='true']").prev("li").addClass("open"); /* 添加 show 屬性為 true 的子級菜單父節點的 open 樣式 */}/* option._init() End *//* 設置所有超鏈接不響應單擊事件 */this.find("a").click(function(){ $(this).parent("li").click(); return false; });/* 菜單項 <li> 接受單擊 */this.find("li").click(function(){/** 當單擊菜單項 <li>* 1.觸發用戶自定義的單擊事件，將該 <li> 標簽中的第一個超鏈接做為參數傳遞過去* 2.修改當前菜單項所屬的子菜單的顯示狀態（如果等于 true 將其設置為 false，否則將其設置為 true）* 3.重新初始化菜單*/option.click($(this).find("a")[0]); /* 觸發單擊 *//* * 如果當前節點下面包含子菜單，并且其 show 屬性的值為 true，則修改其 show 屬性為 false* 否則修改其 show 屬性為 true*/if($(this).next("ul").attr("show")=="true"){$(this).next("ul").attr("show","false"); }else{$(this).next("ul").attr("show","true");}/* 初始化菜單 */option._init();});/* 設置所有父節點樣式 */this.find("ul").prev("li").addClass("folder");/* 設置節點“是否包含子節點”屬性 */this.find("li").find("a").attr("hasChild",false);this.find("ul").prev("li").find("a").attr("hasChild",true);/* 初始化菜單 */option._init();}/* SimpleTree Function End */}); });
主要是初始化參數和函數，a和li的點擊函數；樣式和屬性設置；
$.fn.extend({ 是什么：
jQuery為開發插件提拱了兩個方法，分別是：
jQuery.fn.extend();
jQuery.extend();
jQuery.extend(object)
為jQuery類添加類方法，可以理解為添加靜態方法
jQuery.fn.extend(object);
對jQuery.prototype進得擴展，就是為jQuery類添加“成員函數”。jQuery類的實例可以使用這個“成員函數”。
參閱
http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html
總結
以上是生活随笔為你收集整理的一个web左侧菜单例子的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用表格布局2个链接6个图片
- 下一篇： TCP/IP协议-概念、应用、开发、Ha