jQuery插件制作

标签：

模板：
(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