jquery自定义插件——以 选项卡插件为例

2019-08-29 09:09栏目:WRB前端

js自定义插件-选项卡

该功能比较简单,巩固一下jquery插件写法,注意引入的jquery.js 、 自定义插件路径代码如下:

页面:

 

  • 选项1
  • 选项2
  • 选项3

 

  • 选项1
  • 选项2
  • 选项3

 

  • 选项1
  • 选项2
  • 选项3

 

自定义插件:

 

该插件遵循固定模板:

;(function($){
/**入口函数**/
$.fn.optionChange = function(opts){

};
/**插件内部逻辑函数**/
$.fn.optionChange.methods = {

};
/**默认参数块**/
$.fn.optionChange.defaults = {

};
/**属性参数**/
$.fn.optionChange.parseOptions = function(target){

};
})(jQuery);

 

;(function($){
 /**入口函数**/
 $.fn.optionChange = function(opts){
  this.each(function(){
   opts.currObj = $(this);
   opts = $.extend({},$.fn.optionChange.defaults,opts,$.fn.optionChange.parseOptions);
   var tobjlen =  opts.currObj.find('.' opts.triggerObjClass).length;
   var lobjlen =  opts.currObj.find('.' opts.linkObjClass).length;
   if(tobjlen && lobjlen && tobjlen === lobjlen){
    $.fn.optionChange.methods.init(opts);
   }
  });
 };
 /**插件内部逻辑函数**/
 $.fn.optionChange.methods = {
  init:function(opts){
   var event = opts.event;
   var triggerObjClass = opts.triggerObjClass;
   var linkObjClass = opts.linkObjClass;
   var currObj = opts.currObj;
   var linkSelectFn = opts.linkSelectFn;
   currObj.find('.' triggerObjClass).on(event,function(){
    $this = $(this);
    $this.addClass(opts.triggerSelectCss).siblings().removeClass(opts.triggerSelectCss);
    var _linkObj = currObj.find('.' opts.linkObjClass).eq($this.index());
    _linkObj.addClass(opts.linkSelectCss).siblings().removeClass(opts.linkSelectCss);
   });
  }
 };
 /**默认参数块**/
 $.fn.optionChange.defaults = {
  event:'',
  triggerObjClass:'tiggerClass',
  triggerSelectCss:'',
  linkObjClass:'linkClass',
  linkSelectCss:'',
  currObj:{}
 };
 /**属性参数 该功能用不到属性参数 故返回空对象**/
 $.fn.optionChange.parseOptions = function(target){
  return {};
 };
})(jQuery);

该功能比较简单,巩固一下jquery插件写法,注意引入的jquery.js 、 自定义插件路径代码如下: 页面: 选项1 选项2 选项...

一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉。

我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识。

 


 

jquery自定义插件的两种方式:

一、jquery对象级插件——调用方法:$("#id").函数名(参数);

(function($){ 

  $.fn.extend({

    "函数名":function(自定义参数){ 

       //这里写插件代码        

     }    

});  })(jQuery);
或者

(function($){ 

  $.fn.函数名=function(自定义参数){

    //这里写插件代码

  }

})(jQuery);

二、jquery类级别的插件——调用方法:$.函数名(参数);

(function($){ 

  $.extend({ 

    "函数名":function(自定义参数){ 

      //这里写插件代码 

    }

  });

})(jQuery);

或者

(function($){  

  $.函数名=function(自定义参数){ 

    //这里写插件代码 

  } 

})(jQuery);


 

自定义tab插件

css(jquery.tabs.css)

/**
 *tab 容器
 */
 .tabs-diy {
    width: 500px;
    height: 350px;
    margin:auto;
    border:1px solid #ccc;
}
/**
 *tab 选项区
 */
.tabs-diy ul {
    width: 500px;
    height: 20px;
    list-style: none;
    margin:0px;
    padding:0px;
    background-color: #aaa;
}
.tabs-diy ul li{
    width: 100px;
    height: 20px;
    float: left;
    text-align: center;
}
.tabs-diy ul li a{
    display:block;
    width: 100%;
    height: 18px;
    color: #333;
    text-decoration:none;
}
/**
 *tab 内容区
 */
.tabs-diy div {
    box-sizing: border-box;
    width: 500px;
    height: 330px;
    background-color: #eee;
    padding:10px;
}
/**
 *tab 选中 样式
 */
.seleted-li {
    background-color: #ddd;
}

.seleted-li a {
    color:#369;
    border-radius:3px;
    border:1px solid #999;
}

js(jquery.tabs.js)

(function($) {
    $.fn.tabs = function(options) {
        var defualts = { };
        var opts = $.extend(defualts, options);
        var obj = $(this);
        var clickIndex = 0;
        $("ul li:first", obj).addClass("seleted-li");
        $("ul li", obj).not(":first").addClass("unSeleted-li");
        $("div", obj).not(":first").hide();
        $("ul li", obj).bind("click",function() {
            if (clickIndex != $("ul li", obj).index($(this))) {
                clickIndex = $("ul li", obj).index($(this));
                $(".seleted-li", obj).removeClass("seleted-li");
                $(this).addClass("seleted-li");
                var divId = $("a", $(this)).attr("content-id");
                $("div", obj).hide();
                $("#" divId, obj).show();
            };
        });
    };  
    $(document).ready(function () {
        $('.tabs-diy').each(function () {
          var $tabs = $(this);
          $tabs.tabs();
        });
    });  
})(jQuery);

html(tabs.html)

<!DOCTYPE html>
<html>
  <head>
    <title>自定义tab插件</title>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="jquery.tabs.css">
  </head>
 
  <body>
     <div id="mytabs" class="tabs-diy">
        <!--选项卡区域-->
        <ul>
            <li><a content-id="tabs1">选项1</a></li>
            <li><a content-id="tabs2">选项2</a></li>
            <li><a content-id="tabs3">选项3</a></li>
        </ul>
        <!--面板区域-->
        <div id="tabs1">选项11111111中的内容</div>
        <div id="tabs2">选项22222222中的内容</div>
        <div id="tabs3">选项33333333中的内容</div>
    </div>
    <script src="jquery.js"></script>
      <script src="jquery.tabs.js"></script>
  </body>
</html>***
效果图


图片 1

图片 2

注意事项:

  (1)js,css,html放在同一文件夹下,并要引入jquery.js

  (2)如果js,css,html不在同一文件夹下,请更改html中的引用路径。

  (3)此结果为试验版,如果觉得样式不好看,可以自己更改。

 

 

  (该文仅供学习交流。如有不同观点,欢迎留下宝贵意见~)

版权声明:本文由威尼斯人app发布于WRB前端,转载请注明出处:jquery自定义插件——以 选项卡插件为例