第一步：定义插件
$(function() {
$.fn.插件名称 = function(options) {
var defaults = {
Event : "click", //触发响应事件
msg : "Holle word!" //显示内容
};
var options = $.extend(defaults,options);
var $this = $(this); //当然响应事件对象
//功能代码部分
//绑定事件
$this.live(options.Event,function(e){
alert(options.msg);
});
}
});
第二步：调用插件
$(function() {
//绑定元素事件
$("#test").插件名称({
Event : "click", //触发响应事件
msg : "插件原来就是这么简单!" //显示内容
});
});
<input type="button" id="test" value="这是一个简单的插件调用" />
通过上一个基础篇我们知道插件的格式，这次我来写一个tab插件
$(function() {
$.fn.插件名称 = function(options) {
var defaults = {
Event : "click", //触发响应事件
msg : "Holle word!" //显示内容
};
var options = $.extend(defaults,options);
var $this = $(this); //当然响应事件对象
//功能代码部分
//绑定事件
$this.live(options.Event,function(e){
alert(options.msg);
});
}
});
直接贴代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
*{margin:0;padding: 0;}
li{list-style: none}
.lee_ul{overflow: hidden;zoom:1;}
.lee_ul1{overflow: hidden;zoom:1;}
li{width: 100px;height: 30px;float: left;}
li.active{background: red;}
li.current{background: red;}
.lee_main div{display: none;background: #ccc;width: 300px;}
.lee_main .active{display: block;}
.lee_main1 div{display: none;background: #ccc;width: 300px;}
.lee_main1 .current{display: block;}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
;(function($){
$.fn.lee_tab=function(options){
var defaults={
//各种参数，各种熟悉
activeClass:'active',
tabNav:'.lee_ul>li',
tabCon:'.lee_main>div',
eventType:'click'
}
var options=$.extend(defaults,options);
this.each(function(){
//实现功能的代码
var _this=$(this);
_this.find(options.tabNav).on(options.eventType,function(){
$(this).addClass(options.activeClass).siblings().removeClass(options.activeClass);
var index=$(this).index();
_this.find(options.tabCon).eq(index).show().siblings().hide();
});
});
return this;
alert(this);
}
})(jQuery);
$(function(){
$('.lee_tab').lee_tab();
$('.lee_tab2').lee_tab({
activeClass:'current',
tabNav:'.lee_ul1>li',
tabCon:'.lee_main1>div',
eventType:'mouseover'
});
})
</script>
</head>
<body>
<div class="lee_tab">
<ul class="lee_ul">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="lee_main">
<div class="active">11</div>
<div>22</div>
<div>33</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="lee_tab2">
<ul class="lee_ul1">
<li class="current">1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="lee_main1">
<div class="current">11</div>
<div>22</div>
<div>33</div>
</div>
</div>
</body>
</html>