지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

JavaScript 탭 플러그인 예제 code_javascript 기술

WBOY
풀어 주다： 2016-05-16 15:14:22
원래의
1352명이 탐색했습니다.

오늘은 기존 탭 전환 기능을 자바스크립트 플러그인으로 다시 작성하는 가장 간단한 것부터 시작해 보겠습니다.

네이티브 함수 작성 방법

Javascript 메소드를 js 플러그인으로 다시 작성하는 가장 쉬운 방법은 이 메소드를 창 전역 객체 아래에 마운트하는 것입니다

먼저 함수를 사용하여 작성된 가장 독창적인 코드를 살펴보겠습니다.

tab.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<title>jquery_hjb_tab插件demo</title>
<link rel="stylesheet" href="h.css"/>
</head>
<body>
<div id="tab">
<div class="tabs">
<ul>
<li><a href="#">tab1</a></li>
<li><a href="#">tab2</a></li>
<li><a href="#">tab3</a></li>
<li><a href="#">tab4</a></li>
</ul>
</div>
<div class="tabCons">
<section>内容一</section>
<section>内容二</section>
<section>内容三</section>
<section>内容四</section>
</div>
</div>
<script>
window.onload = h_tab('tab');
function h_tab(tabId){
var oLinks = document.getElementById(tabId).getElementsByTagName("a");
var oCons = document.getElementById(tabId).getElementsByTagName("section");
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}

}
}
</script>
로그인 후 복사

h.css

@charset "utf-8";
/*
//author:hjb2722404
//description:
//date:2016/2/18
*/
.tabs ul { width: 100%; list-style-type: none;}
.tabs ul li { width: 48%; display: inline-block; margin: 0; padding: 0;}
.tabs ul li a {border-bottom: 3px solid #cccccc; width: 100%; height: 100%; display: block; text-align: center; min-height: 40px; line-height: 40px; text-decoration: none; font-family: "微软雅黑"; color: #a94442}
.tabs ul li a.cur { border-bottom: 3px solid #f26123;}
.tabCons section { display: none;}
.tabCons section:nth-child(1) { display: block;}
로그인 후 복사

위 두 코드는 기본 코드이며, 이 코드를 기반으로 차근차근 개선해 나가겠습니다.

네이티브 플러그인 작성 방법

이제 이 메서드를 창 개체 아래에 마운트된 플러그인으로 다시 작성해 보겠습니다.

tab.html

……
// 下面是第一次改动
<script type="text/javascript" src="h_tabs.js"></script>
<script>
H_tab("tab");
</script>
</body>
</html>
로그인 후 복사

h_tabs.js

window.H_tab = function(tabId){
var oLinks = document.getElementById(tabId).getElementsByTagName("a");
var oCons = document.getElementById(tabId).getElementsByTagName("section");
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
};
로그인 후 복사

그러나 이 작성 방법은 매우 간단하지만 문제도 있다는 것을 발견했습니다. 창은 전역 개체입니다. 그 아래에 모든 메서드를 마운트하고 플러그인으로 사용하면 너무 많을 때입니다. 플러그인의 경우 충돌이 발생하기 쉽습니다. 반면에 네이티브 js를 사용하면 외부 종속성을 줄일 수 있지만 코드의 양은 여전히 ​​상대적으로 많고 작성 방법도 상대적으로 번거롭습니다.

jquery 작성 방법

jquery 라이브러리를 도입하고 이 플러그인을 jquery 플러그인으로 다시 작성하려고 합니다.

jquery 플러그인에는 클래스 수준 형식, 개체 수준 형식, jquery UI 구성 요소 형식의 세 가지 형식이 있습니다

jquery 클래스 수준 플러그인 작성 방법 - 단일 방법

먼저 클래스 레벨 플러그인의 형태를 살펴보겠습니다.

첫 번째 카테고리 수준 플러그인 형태로 이 메소드는 도구 메소드로 jquery의 루트 공간에 직접 마운트됩니다.

tab.html

……
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="h_tabs.js"></script>
<script>
$.h_tab('tab');
</script>
</body>
</html>
로그인 후 복사

h_tabs.js

$.h_tab = function(tabId){
var oLinks = document.getElementById(tabId).getElementsByTagName("a");
var oCons = document.getElementById(tabId).getElementsByTagName("section");
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
};
로그인 후 복사

jquery 클래스 수준 플러그인을 작성하는 방법 - 다양한 방법

jquery 루트 공간에 여러 메서드를 바인딩하려면 다음과 같이 작성하세요.

tab.html

……
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="h_tabs.js"></script>
<script>
$.h_tab('tab');
$.h_hello('hjb');
</script>
</body>
</html>
로그인 후 복사

h_tabs.js

$.extend({
h_tab:function(tabId){
var oLinks = document.getElementById(tabId).getElementsByTagName("a");
var oCons = document.getElementById(tabId).getElementsByTagName("section");
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
},
h_hello :function(name){
console.log("hello,",name);
}
});
로그인 후 복사

$.extend() 도구 메서드를 사용하여 자신의 기능을 jquery 루트 네임스페이스에 직접 마운트하는 것이 간단하고 문제가 없지만, 안타깝게도 이 방법은 jquery의 강력한 sizzle 엔진, 즉 이 기능을 활용할 수 없습니다. 선택한 DOM 요소에는 메서드를 적용할 수 없습니다.

그래서 객체 수준의 플러그인 개발 방법을 사용해야 합니다.

jquery 객체 레벨 플러그인 작성 방법

객체 수준 플러그인 개발 방법은 $.fn.extend() 메서드를 사용하여 자체 메서드를 jquery 프로토타입에 바인딩하여 모든 jquery 개체 팀이 이 메서드를 적용하여 해당 작업을 수행할 수 있도록 하는 것입니다

코드는 다음과 같습니다.

tab.html

……
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="h_tabs.js"></script>
<script>
//对象级别的插件引用方法，注意和上面类级别插件的写法上的区分
$('#tab').h_tab('tab');
</script>
</body>
</html>
로그인 후 복사

h_tabs.js

(function($){
$.fn.extend({
h_tab:function(tabId){
var oLinks = document.getElementById(tabId).getElementsByTagName('a');
var oCons = document.getElementById(tabId).getElementsByTagName('section');
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
}
});
})(jQuery);
로그인 후 복사

여기에서는 네임스페이스 오염을 방지하기 위해 클로저를 사용하여 플러그인을 캡슐화합니다

여기에는 여전히 몇 가지 문제가 있습니다. 즉, 메소드를 실행하기 전에 매개변수를 전달해야 합니다. 이로 인해 호출 시 $('#tab')를 사용하여 탭 ID가 있는 div를 선택하게 됩니다. 그런 다음 플러그인에서 전달된 ID를 기반으로 요소를 다시 얻습니다.

이제 jquery의 선택기를 사용했으므로 이를 도입하여 반복적으로 요소를 가져오는 중복 문제를 해결할 수 있습니다.

jquery 객체레벨 플러그인 작성방법 - 소개

tab.html

……
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="h_tabs.js"></script>
<script>
$('#tab').h_tab();
</script>
</body>
</html>
로그인 후 복사

h_tabs.js

(function($){
$.fn.extend({
h_tab:function(){
//在这里引入this
var oLinks = this.find('a');
var oCons = this.find('section');
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
}
});
})(jQuery);
로그인 후 복사

여기서 주목해야 할 점은 우리가 플러그인이라고 부르는 요소 객체가 ('tab')이므로 이때 this.find()를 직접 사용하는 것은 ('tab').find()와 동일하다는 점입니다. $ (this).find()가 아닌 , 두 쓰기 방법의 차이를 구별하기 위해 대체 방법을 사용하는 데 주의하세요.

플러그인으로서 개발자가 제어할 수 있어야 하므로 사용자에게 일부 구성 인터페이스도 제공해야 합니다.

jquery 객체 레벨 플러그인 작성 방법 - 구성 항목 추가

tab.html

……
<ul>
<!--对照文章开始的代码， 注意这里的改动 -->
<li><a href="#" class="current">tab1</a></li>
<li><a href="#">tab2</a></li>
……
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="h_tabs.js"></script>
<script>
$('#tab').h_tab({
//使得当前选项卡标签的样式名称可自定义的配置
curName:'current'
});
</script>
</body>
</html>
로그인 후 복사

초기 "현재 탭 레이블 스타일 클래스 이름"을 "cur"에서 "current"로 변경하고 이를 구성 항목으로 플러그인에 전달했습니다.

h.css

.tabs ul { width: 100%; list-style-type: none;}
.tabs ul li { width: 48%; display: inline-block; margin: 0; padding: 0;}
.tabs ul li a {border-bottom: 3px solid #cccccc; width: 100%; height: 100%; display: block; text-align: center; min-height: 40px; line-height: 40px; text-decoration: none; font-family: "微软雅黑"; color: #a94442}
/*注意下面一行与之前的样式代码的对比变化之处*/
.tabs ul li a.current { border-bottom: 3px solid #f26123;}
.tabCons section { display: none;}
.tabCons section:nth-child(1) { display: block;}
로그인 후 복사

스타일시트에 해당 변경사항을 적용했습니다.

h_tabs.js

(function($){
$.fn.extend({
//给方法传入一个对象作为参数
h_tab:function(opts){
//定义默认的配置
var defaults ={
curName : 'cur'
};
//将传入的参数覆盖默认参数中的默认项，最终合并到一个新的参数对象上
var Opt = $.extend({},defaults,opts);
var oLinks = this.find('a');
var oCons = this.find('section');
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
//在这里使用配置项的值
this.className = Opt['curName'];
oCons[this.index].style.display ="block";
}
}
}
});
})(jQuery);
로그인 후 복사

여기에서는 jquery의 $.extend() 메서드의 병합 개체 기능을 사용하여 기본 구성 항목을 사용자가 전달한 구성 항목으로 덮어쓰고 마지막으로 후속 프로그램에서 사용할 수 있도록 새 구성 항목으로 병합합니다.

위는 에디터가 소개한 JavaScript 탭 플러그인 예제 코드입니다. 많은 분들께 도움이 되었으면 좋겠습니다!

관련 라벨：
js_tab选项卡插件 tab选项卡插件 javascript_tab选项卡
원천：php.cn
이전 기사：JQUERY의 AJAX 요청에서 데이터 문제 처리 다음 기사：JavaScript_Basic 지식에서 이것의 암시적 바인딩에 대해 간략하게 이야기해 보세요.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 웹 애플리케이션을 개발 중입니다. 웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 저는 semantic versioning을 사용하고 있고 이미 ...
에서 2024-04-06 19:13:16
0
2
476
깊은 물체를 제거하는 데 문제가 있음 내 Vue 구성 요소는 개체 내부의 개체를 사용하여 요소를 표시합니다. 페이지에서 버튼을 클릭하면 중첩된 개체 중 하나를 삭제하고 싶습니다. 삭제된 것 같은데, ...
에서 2024-04-03 21:48:14
0
1
302
3. JS 3D 모델이 추가되었으나 보이지 않습니다. 내 웹사이트에 3D 모델을 추가하려고 합니다. 저는 세 개의 .js를 사용하고 있습니다. 모든 것을 시도했지만 3D 모델을 표시할 수 없었습니다. 개발자 도구의 ...
에서 2024-04-03 19:06:13
0
1
264
Phaser가 타일 맵을 로드하지 못했고 화면에 검은색 화면만 표시되었습니다. 타일 ​​맵 편집기에서 생성된 타일 맵을 로드하려고 합니다. 이를 json 파일로 내보내 타일 세트와 함께 공용 폴더의 자산 폴더에 배치했습니다. 캔버스에 나타나...
에서 2024-03-30 20:38:02
0
1
399
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿