码迷,mamicode.com
首页 > Web开发 > 详细

jQuery插件制作

时间:2016-04-17 20:33:16      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:


模板:
(function($){
$.fn.plugins=function(options){


var defaults = {

}
var options = $.extend(defaults,options);
this.each(function(){

})
}
return this;
})(jQuery);


例子:做一个tab标签切换插件
<div class="tab">
<ul class="tabnav">
<li class="current">html</li>
<li>css</li>
<li>js</li>
</ul>
<div class="tabcontent">
<div style="display: block">html</div>
<div>css</div>
<div>js</div>
</div>
</div>
<style>
*{padding: 0;margin: 0}
.tabnav li{float: left;width: 150px;height: 26px;line-height: 26px;text-align: center;margin-right: 3px;border: 1px solid blue;border-bottom: none;list-style: none;cursor: pointer}
.tabcontent{clear:both}
.tabcontent div{border: 1px solid blue;display: none;width: 500px;height:200px }
.tabnav li.current{background: blue;color: white;font-weight: bold}
<script>
$.fn.tab=function(options){


var defaults = {
currentClass:"current",
eventType:"click",
tabNav:".tabnav>li",
tabContent:".tabcontent>div"
}
var options = $.extend(defaults,options);
this.each(function(){
var _this = $(this);
_this.find(options.tabNav).bind(options.eventType,function(){
$(this).addClass(options.currentClass).siblings().removeClass(options.currentClass)
var index = $(this).index();
_this.find(options.tabContent).eq(index).show().siblings().hide()
})
})
return this;
}

})(jQuery);

jQuery插件制作

标签:

原文地址:http://www.cnblogs.com/bhan/p/5401970.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!