jQuery導航的插件
此代碼可以實現鼠標滑動時導航滑下，鼠標移開時導航收回。
此代碼運用jQuery插件實現，可以整體的使用，也可以部分的使用。
代碼實現如下：
在整體部分實現
主代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>導航插件</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.nav.js"></script>
調用jQuery中自定義的導航插件
<style>
.list{
list-style:none;
margin:0;
padding:0;
color:#FFF;
font-size:20px;
width:500px;
height:50px;
margin:100px auto;
}
.list li{
float:left;
width:100px;
height:50px;
line-height:50px;
text-align:center;
background:pink;
cursor:pointer;
}
</style>
</head>
<body>
<ul class="list">
<li>導航列表
<ul class="nav">
<li>導航列表1</li>
<li>導航列表1</li>
<li>導航列表1</li>
<li>導航列表1</li>
<li>導航列表1</li>
</ul>
</li>
<li>導航列表
<ul class="nav">
<li>導航列表2</li>
<li>導航列表2</li>
<li>導航列表2</li>
<li>導航列表2</li>
<li>導航列表2</li>
</ul>
</li>
<li>導航列表
<ul class="nav">
<li>導航列表3</li>
<li>導航列表3</li>
<li>導航列表3</li>
<li>導航列表3</li>
<li>導航列表3</li>
</ul>
</li>
<li>導航列表
<ul class="nav">
<li>導航列表4</li>
<li>導航列表4</li>
<li>導航列表4</li>
<li>導航列表4</li>
<li>導航列表4</li>
</ul>
</li>
<li>導航列表
<ul class="nav">
<li>導航列表5</li>
<li>導航列表5</li>
<li>導航列表5</li>
<li>導航列表5</li>
<li>導航列表5</li>
</ul>
</li>
</ul>
<script>
$.nav(); //此方法爲全局的方法 在主頁面中要對jQuery中的方法進行調用 纔可以執行
</script>
</body>
</html>
jQuery的代碼：
;(function($){
$.extend({
//$.extend()方法爲擴展jQuery類本身的方法 爲jQuery類添加新的方法 多用於插件中 給全局屬性設置插件
'nav':function(){
$('.nav').css({
'listStyle':'none',
'margin':0,
'padding':0,
'color':'#CCC',
'display':'none'
});
$('.nav li').css({
'backgroundColor':'yellow',
});
//在jQuery中改變元素的背景色用backgroundColor進行改變 改變字體的顏色用color進行改變
$('.nav').parent().hover(function(){
//在自定義插件時 不能使用插件外面的元素查找插件元素 只能通過插件裏面的元素對插件外面的元素進行查找
$(this).find('.nav').slideDown('normal');
//find() 方法獲得當前元素集合中每個元素的後代 搜索所有與指定表達式匹配的元素
//此語句的含義是查找所有li下面的class="nav"的元素
},function(){
$(this).find('.nav').stop().slideUp('normal');
//stop()函數是停止當前正在進行的動畫 開始下一個動畫內容
});
}
});
})(jQuery);
可以部分的實現
主頁面的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>導航插件</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.nav.js"></script>
調用jQuery中自定義的導航插件
<style>
.list{
list-style:none;
margin:0;
padding:0;
color:#FFF;
font-size:20px;
width:500px;
height:50px;
margin:100px auto;
}
.list li{
float:left;
width:100px;
height:50px;
line-height:50px;
text-align:center;
background:pink;
cursor:pointer;
}
</style>
</head>
<body>
<ul class="list">
<li>導航列表
<ul class="nav">
<li>導航列表1</li>
<li>導航列表1</li>
<li>導航列表1</li>
<li>導航列表1</li>
<li>導航列表1</li>
</ul>
</li>
<li>導航列表
<ul class="nav">
<li>導航列表2</li>
<li>導航列表2</li>
<li>導航列表2</li>
<li>導航列表2</li>
<li>導航列表2</li>
</ul>
</li>
<li>導航列表
<ul class="nav">
<li>導航列表3</li>
<li>導航列表3</li>
<li>導航列表3</li>
<li>導航列表3</li>
<li>導航列表3</li>
</ul>
</li>
<li>導航列表
<ul class="nav">
<li>導航列表4</li>
<li>導航列表4</li>
<li>導航列表4</li>
<li>導航列表4</li>
<li>導航列表4</li>
</ul>
</li>
<li>導航列表
<ul class="nav">
<li>導航列表5</li>
<li>導航列表5</li>
<li>導航列表5</li>
<li>導航列表5</li>
<li>導航列表5</li>
</ul>
</li>
</ul>
<hr /><hr />
<ul class="list">
<li>導航列表
<ul class="nav">
<li>導航列表1</li>
<li>導航列表1</li>
<li>導航列表1</li>
<li>導航列表1</li>
<li>導航列表1</li>
</ul>
</li>
<li>導航列表
<ul class="nav">
<li>導航列表2</li>
<li>導航列表2</li>
<li>導航列表2</li>
<li>導航列表2</li>
<li>導航列表2</li>
</ul>
</li>
<li>導航列表
<ul class="nav">
<li>導航列表3</li>
<li>導航列表3</li>
<li>導航列表3</li>
<li>導航列表3</li>
<li>導航列表3</li>
</ul>
</li>
</ul>
<script>
$('.list').eq(0).nav('red'); //此方法爲局部的方法
//可以通過傳參改變裏面的屬性的值
</script>
</body>
</html>
jQuery中的代碼如下：
;(function($){
$.fn.extend({
//$.fn.extend()方法爲給jQuery對象添加方法 可以用於設置局部的插件
'nav':function(color){
$(this).find('.nav').css({
'listStyle':'none',
'margin':0,
'padding':0,
// 'color':'#CCC',
'color':color,
'display':'none'
});
$(this).find('.nav li').css({
'backgroundColor':'yellow',
});
//在jQuery中改變元素的背景色用backgroundColor進行改變 改變字體的顏色用color進行改變
$(this).find('.nav').parent().hover(function(){
//在自定義插件時 不能使用插件外面的元素查找插件元素 只能通過插件裏面的元素對插件外面的元素進行查找
$(this).find('.nav').slideDown('normal');
//find() 方法獲得當前元素集合中每個元素的後代 搜索所有與指定表達式匹配的元素
//此語句的含義是查找所有li下面的class="nav"的元素
},function(){
$(this).find('.nav').stop().slideUp('normal');
//stop()函數是停止當前正在進行的動畫 開始下一個動畫內容
});
}
});
})(jQuery);
jQuery中自己編寫插件需要注意的問題：
1.插件名推薦使用jquery(插件名).js，避免和其他js文件或者其他庫相沖突
2.局部對象附加jquery.fn對象上，全局對象附加在jquery上
3.插件內部，this指向是當前的局部對象
4.可以通過this.each 來遍歷所有元素
5.所有的方法或插件，必須用分號結尾，避免出現問題(在程序中有多個分號不會出現錯誤，但是一個方法結束後沒有分號的出現會出現錯誤)
6.插件應該返回的是jQuery對象，以保證可鏈式連綴
7.避免插件內部使用$，避免與其他插件或庫重複，如果要使用，可以通過傳參的方法，傳遞jQuery進去