Sharing of tab production technology for jquery plug-in development-JS Tutorial-php.cn

Sharing of tab production technology for jquery plug-in development

小云云

Release： 2017-12-29 17:53:30

Original

1417 people have browsed it

This article mainly introduces the tab production of jquery plug-in development in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

In jquery, common plug-in development methods include:

One is to extend a method for the $ function itself. This is a static extension (also called a class extension). This kind of plug-in is usually Tool method,

There is also one that extends on the prototype object $.fn. The developed plug-in is used on the dom element

1. Class level extension

$.showMsg = function(){
   alert(&#39;hello,welcome to study jquery plugin dev&#39;);
  }
  // $.showMsg();

Copy after login

Be careful to introduce the jquery library in advance. In the above example, a method showMsg is added to the $function, then it can be called with $.showMsg()

$.showName = function(){
   console.log( &#39;ghostwu&#39; );
  }
  $.showName();

Copy after login

This kind of plug-in is relatively rare and is generally used to develop tool methods, such as $.trim, $.isArray(), etc. in jquery

2. Expand the function on $.fn.

This kind of plug-in is used on elements. For example, if I extend a function and click a button, the value of the current button will be displayed.

$.fn.showValue = function(){
  return $(this).val();
}

  $(function(){
   $("input").click(function(){
    // alert($(this).showMsg());
    alert($(this).showMsg());
   });
  });

<input type="button" value="点我">

Copy after login

Add a showValue method on $.fn to return the value of the current element. After obtaining the page input element and binding the event, you can call this method to display the button The value "click me" is commonly used in actual plug-in development. Next, we will use this extension mechanism to develop a simple tab plug-in:

Page layout and style:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.js"></script>
 <style>
  #tab {
   width:400px;
   height:30px;
  }
  #tab li, #tab ul {
   list-style-type:none;
  }
  #tab ul {
   width:400px;
   height: 30px;
   border-bottom:1px solid #ccc;
   line-height: 30px;
  }
  #tab ul li {
   float:left;
   margin-left: 20px;
   padding:0px 10px;
  }
  #tab ul li.active {
   background: yellow;
  }
  #tab ul li a {
   text-decoration: none;
   color:#666;
  }
  #tab p {
   width:400px;
   height:350px;
   background-color:#ccc;
  }
  .clearfix:after{
   content: &#39;&#39;;
   display: block;
   clear: both;
   height: 0;
   visibility: hidden;
  }
 </style>
 <script src="tab2.js"></script>
 <script>
  $(function(){
   $("#tab").tabs( { evType : &#39;mouseover&#39; } );
  });
 </script>
</head>
<body>
 <p id="tab">
  <ul class="clearfix">
   <li><a href="#tab1">选项1</a></li>
   <li><a href="#tab2">选项2</a></li>
   <li><a href="#tab3">选项3</a></li>
  </ul>
  <p id="tab1">作者:ghostwu(1)
   <p>博客: http://www.php.cn/ghostwu/</p>
  </p>
  <p id="tab2">作者:ghostwu(2)
   <p>博客: http://www.php.cn//ghostwu/</p>
  </p>
  <p id="tab3">作者:ghostwu(3)
   <p>博客: http://www.php.cn//ghostwu/</p>
  </p>
 </p>
</body>
</html>

Copy after login

tab2.js file

;(function ($) {
 $.fn.tabs = function (opt) {
  var def = { evType: "click" }; //定义了一个默认配置
  var opts = $.extend({}, def, opt);
  var obj = $(this);

  $("ul li:first", obj).addClass("active");
  obj.children("p").hide();
  obj.children("p").eq(0).show();

  $("ul li", obj).bind(opts.evType, function () {
   $(this).attr("class", "active").siblings("li").attr("class","");
   var id = $(this).find("a").attr("href").substring(1);
   obj.children("p").hide();
   $("#" + id, obj).show();
  });
 };
})(jQuery);

Copy after login

1, a self-executing function that encapsulates the plug-in into a module and converts the jQuery object Pass to the formal parameter $

2, line 3, to define a default configuration, the trigger type of the tab, the default is click event

3, line 4, if opt passes the parameter, then Use the opt configuration, otherwise use the default configuration in line 3. The purpose of this line is to configure the plug-in’s representation without changing the plug-in source code

4, lines 7-9 , let the first p of the tab be displayed, and hide the rest. Add class='active' to the first tab. Highlight

5, lines 11-16, in yellow, and click the corresponding tab. , let the corresponding p show and hide

Related recommendations:

About JavaScript plug-in Tab effect sharing

implementation WeChat applet with tab function

JS+jQuery example of writing a simple tab

The above is the detailed content of Sharing of tab production technology for jquery plug-in development. For more information, please follow other related articles on the PHP Chinese website!