一、自定义插件规范
-
命名jquery.插件名.js,实验是否有效alert($.nav),弹出undefined表示可以用。
-
避免插件内部使用$,如果使用$,传入jquery对象。
3.所有插件必须以分号结尾;(function($){})前面加分号表示防止上一个js没有以分号结尾
4.返回一个jquery对象
5.
实例
jquery.nav.js
;(function($){ $.fn.extend({ 'nav':function(color){ //设置css样式 $(this).find('.nav').css({ 'list-style':'none', 'margin':0, 'padding':0, 'display':'none', 'color':color }); //设置下拉,上拉动画 $(this).find('.nav').parent().hover(function(){ $(this).find('.nav').slideDown('normal'); },function(){ $(this).find('.nav').stop().slideUp('normal'); }); return this; } }); })(jQuery);
style.css
.list{
list-style:none;
margin:0;
padding:0;
font-size:13px;
width:500px;
margin:50px auto;
color:#fff;
}
.list li{
float:left;
width:100px;
height:30px;
background:#333;
line-height:30px;
text-align:center;
cursor:pointer;
}
// JavaScript Documeb $(function(){ //全局$.nav(); //局部 $('.list').eq(0).nav('orange'); });
test.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.min-1.11.3.js"></script>
<script src="jquery.nav.js"></script>
<script src="test.js" ></script>
<link type="text/css" href="style.css" rel="stylesheet"></link>
<title>无标题文档</title>
</head>
<body >
<ul class="list">
<li>导航列表
<ul class="nav">
<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>
</ul>
</li>
<li>导航列表
<ul class="nav">
<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>
</ul>
</li>
<li>导航列表
<ul class="nav">
<li>导航列表5</li>
<li>导航列表5</li>
<li>导航列表5</li>
<li>导航列表5</li>
</ul>
</li>
</ul>
<br/><br/><br/><br/><br/><br/><br/><br/>
<ul class="list">
<li>导航列表
<ul class="nav">
<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>
</ul>
</li>
<li>导航列表
<ul class="nav">
<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>
</ul>
</li>
<li>导航列表
<ul class="nav">
<li>导航列表5</li>
<li>导航列表5</li>
<li>导航列表5</li>
<li>导航列表5</li>
</ul>
</li>
</ul>
</body>
</html>