집 > 기사 > 웹 프론트엔드 > Jquery 플러그인 개발을 위한 탭 제작 기술 공유

Jquery 플러그인 개발을 위한 탭 제작 기술 공유

小云云원래의: 2017-12-29 17:53:301419검색

이 글은 주로 jquery 플러그인 개발에서 탭 생성을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.

jquery에서 일반적인 플러그인 개발 방법은 다음과 같습니다.

하나는 $ 함수 자체에 대한 메서드를 확장하는 것입니다. 이것은 정적 확장(클래스 확장이라고도 함)입니다.

메소드도 있습니다. 프로토타입 객체 $.fn에 확장하고, 개발된 플러그인을 dom 요소에 사용합니다.

1. 클래스 수준 확장

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

참고하세요. 위의 예는 $ 함수에 showMsg 메소드를 추가한 후 $.showMsg()

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

로 호출할 수 있는 플러그인입니다. 일반적으로 jquery의 $.trim, $.isArray와 같은 도구 메소드를 개발하는 데 사용됩니다. () 잠깐

둘째, $.fn에서 기능을 확장하고,

이런 종류의 플러그인은 요소에 사용됩니다. 예를 들어, 함수를 확장하고 버튼을 클릭하고 현재 버튼의 값을 표시합니다

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

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

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

$.fn에 showValue 메소드를 추가하여 페이지 입력 요소의 값을 반환하고 이벤트를 바인딩하면 이 메소드를 호출하여 "click me" 버튼의 값을 표시할 수 있습니다. 실제 플러그인 개발에서는 다음으로 이 확장 메커니즘을 사용하여 간단한 탭 플러그인을 개발하겠습니다.

페이지 레이아웃 및 스타일:

<!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>

tab2.js 파일

;(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);

1, 자체 실행 기능, 플러그인을 모듈로 캡슐화하고 jQuery 개체를 형식 매개변수 $

에 전달합니다.

2, 3행은 기본 구성, 탭의 트리거 유형을 정의합니다. 기본값은 클릭 이벤트입니다.

3, 4행, opt가 매개변수를 전달하는 경우 opt 구성을 사용하고, 그렇지 않으면 3행의 기본 구성을 사용합니다. 이 줄의 목적은 플러그인 소스 코드를 변경하지 않고 플러그인의 표현을 구성하는 것입니다.

4, 7- 9번째 줄, 탭의 첫 번째 p를 표시하고 나머지는 숨기도록 합니다. class='active'. 노란색으로

5를 강조 표시하고, 11~16행에서 해당 탭을 클릭하고 해당 p를 표시하고 숨깁니다.

Jquery 플러그인 개발을 위한 탭 제작 기술 공유

관련 기사