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进去
扫一扫
471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
