JavaScript 탭 플러그인 예제 code_javascript 기술
- WBOY원래의
- 2016-05-16 15:14:221299검색
오늘은 기존 탭 전환 기능을 자바스크립트 플러그인으로 다시 작성하는 가장 간단한 것부터 시작해 보겠습니다.
네이티브 함수 작성 방법
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 탭 플러그인 예제 코드입니다. 많은 분들께 도움이 되었으면 좋겠습니다!