브라우저 간 공통적이고 재사용 가능한 탭 전환 js code_javascript 기술
- WBOY원래의
- 2016-05-16 18:01:571180검색
최근에 js를 좀 배웠기 때문에 멋진 척 했어요. . . 별로 어렵지 않습니다. . . 표시 속성만 변경하시겠습니까? 반 친구들은 나를 무시했습니다. . 그는 보편적인 것을 만들고 싶다고 말했습니다. . . 왜 Ajax와 상호 작용합니까? . ? ? ? 나는 이해하지 못했습니다. . . 도대체 무슨 일이 일어나고 있는 걸까요? . . 연습삼아 직접 만들어봤습니다.
수요: 반 친구들이 말하는 '일반'이 무슨 뜻인지 모르겠어요. . . 그러면 나는 내 자신의 이해를 따르겠습니다. .
①크로스 브라우저, IE6, FF, Chrome, Safari, Opera
②같은 페이지에서 같은 js를 사용해 다른 탭을 설정할 수 있습니다.
말을 너무 많이 해도 소용없으니, 코드를 살펴보겠습니다.
1. HTML 부분(사실 별로 흥미롭지 않습니다. 세 가지 설정이 있습니다. 처음 두 개는 동일하며 클릭 이벤트에 의해 트리거되고 마지막은 마우스 움직임에 의해 트리거됩니다)
코드 복사 코드는 다음과 같습니다.
="이름"> ;
프로젝트 1
프로젝트 2
프로젝트 3
/ul>
/ul>
- 클래스는"tab1""클릭"을 통한 항목 1 콘텐츠입니다. / em>Trigger
- 클래스는"tab1"두 번째 항목 콘텐츠는"click"Trigger ;/ul>
- / li>
- 프로젝트 2
< li>클래스는"tab1"항목 2 콘텐츠는"클릭"
- "tab2" ;"mouseover"
- 클래스는"tab2"< /em>항목 2의 내용은"mouseover"< ;/em>
- 클래스는"tab2""항목 3 콘텐츠,"마우스 오버"< /li>
저는 초보자이기 때문에 제가 작성한 js는 특정 구조에서만 작동합니다. (정말 좋아요! ), 궁극적인 보편적 메커니즘을 만드는 방법에 대해서는 생각하지 않았습니다. 이 js에는 어떤 구조가 필요합니까? 이는 가장 바깥쪽 div 컨테이너이고 제목은 ul 목록으로 표시되며 내용도 ul 목록입니다. 이 형식이 아니면 제가 작성한 초보자 코드가 실행되지 않을 것입니다. 이를 실행하려면 js 몇 줄을 변경해야 합니다. . .
2. 스타일 CSS
코드 복사
코드는 다음과 같습니다.
body{ text-align:center; } .tab1, .tab2 { 너비:350px 여백:0 5px; 배경:#CC9933; 0.5;
border-radius:5px 5px 5px; box-shadow: #CCC 4px 4px 4px;
text-align:left;
float:inline;
}
.name {
list-style:none;
overflow:hidden;
}
.name li {
width:90px
font:bold 16px/30px Verdana, Geneva, sans-serif;
text-align:center;
margin-right:5px; >float: 왼쪽;
cursor:pointer;
}
li.selected{
Background:#FF9900;
.content li{
높이:500px;
디스플레이:없음
}
이에 대해서는 할 말이 없는 것 같아서 간단한 CSS3를 추가하고 실행했습니다(아트가 너무 형편없습니다).
3.js 코드
/* *
* 이벤트 처리 일반 기능
*/
var EventUtil = {
//브라우저에서 이벤트 객체 가져오기 event
getEvent : function(event){
return event : window.event
} ,
//Browser는 이벤트 객체의 대상 DOM 노드를 가져옵니다.
getTarget: function(event){
return event.target||event.srcElement;
},
//Cross -browser 이벤트를 노드에 바인딩
addHandler: function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false)
}else if (element.attachEvent){
element.attachEvent("on" type,handler);
}else{
element["on" type] = handler
}
}
};
//탭 전환 방법 설정
tabSwitch("tab1","click")
tabSwitch("tab2","mouseover")
/**
* 탭 공통 기능
*/
// 들어오는 매개변수 inClassName은 바인딩된 탭 클래스 이름으로 설정되고 매개변수 TriggerType은 트리거 스위치 유형으로 설정됩니다.
function tabSwitch(inClassName,triggerType){
//모두 가져오기 옵션 카드 영역
if(document.querySelectorAll){
var tabs = document.querySelectorAll("." inClassName);
}else{
var divs = document.getElementsByTagName("div");
var tabs = new Array();
for(var k=0,lenDiv=divs.length; kif(divs[k].className.indexOf(inClassName) > ; -1){
tabs.push(divs[k]);
}
}
}
//각 탭에 대한 전환 기능 생성
for(var j = 0,len=tabs.length; j//제목 및 내용 목록 가져오기
var tab = tabs[j]
//각 옵션 카드 생성 스위치
(function(){
var nameUl = tab.getElementsByTagName("ul")[0];
var content = tab.getElementsByTagName("ul")[1];
//초기화 tab
nameUl.getElementsByTagName("li")[0].className = "selected";
content.getElementsByTagName("li")[0].style.display = "block"
// 이벤트 대리자 추가
EventUtil.addHandler(nameUl,triggerType,function(event){
//이벤트 객체 가져오기
event = EventUtil.getEvent(event);
var target = EventUtil .getTarget(event );
//탭 전환
if(target.nodeName.toLowerCase() == "li"){
//제목 목록 항목과 콘텐츠 목록 항목을 각각 가져옵니다
var nameList = nameUl .getElementsByTagName("li");
var contentList = content.getElementsByTagName("li")
//선택한 클래스를 제목에 추가하고 내용을 표시합니다.
for(var i=0, len =nameList.length; inameList[i].className = ""
contentList[i].style.display = "없음"
if(nameList[i ] == 대상){
nameList[i].className = "선택됨";
contentList[i].style.display = "차단"
}
}
});
})();
}
}
이 js 기능을 확장해 보겠습니다. . . 먼저, 브라우저 간 사용에 대처하기 위해 이벤트 객체의 몇 가지 공통 기능을 정의합니다. 다음 두 줄은 탭 전환 기능입니다. 하나의 매개변수는 탭의 컨테이너로 정의될 클래스이고, 다른 하나는 스위치를 트리거하는 유형입니다.
결론은 실제 js입니다. 특정 클래스로 정의된 컨테이너가 탭에 바인딩되고 전환 방법도 사용자 정의할 수 있다는 아이디어입니다. tabSwitch("tab1","click");은 모든 tab1 클래스가 탭에 바인딩되고 클릭 이벤트를 통해 전환됨을 의미합니다.
전환을 구현하는 데는 여러 가지 기술이 사용됩니다. 첫째, IE6 및 7과 호환되도록 클래스 선택기를 통해 동일한 유형을 선택합니다(매우 비효율적임). 대리자는 제목 목록 ul에 트리거 이벤트를 바인딩합니다.
ul의 DOM 요소를 검색할 때 name을 변수 이름으로 사용했기 때문에 Chrome 및 Safari에서 이벤트를 바인딩할 수 없었습니다. 이것! 매우 우울합니다. . .
마지막으로 언급할 것은 효과입니다. 그것은 단지 탭 전환일 뿐입니다(말도 안되는 소리...). 스타일 설정을 용이하게 하기 위해 선택한 탭 제목에 "선택됨" 클래스가 추가됩니다.
마지막으로 개선할 부분이 정말 많다는 점을 말씀드리고 싶습니다(물론 당신은 오줌의 신이 아닙니다). 예를 들어, 클래스를 추가할 때 클래스 이름을 문자열로 연결하면 원래 클래스 이름을 덮어쓰지 않게 됩니다. 예를 들어, 구조적 변화에 대한 적응성을 다룰 수 있습니다. 예를 들어 (질문이 너무 많습니다). . .
또 뭐가 문제인지 지도 부탁드립니다.
데모를 올리는 것이 합리적인가요?
예제를 다운로드하려면 여기를 클릭하세요
text-align:left;
float:inline;
}
.name {
list-style:none;
overflow:hidden;
}
.name li {
width:90px
font:bold 16px/30px Verdana, Geneva, sans-serif;
text-align:center;
margin-right:5px; >float: 왼쪽;
cursor:pointer;
}
li.selected{
Background:#FF9900;
.content li{
높이:500px;
디스플레이:없음
}
이에 대해서는 할 말이 없는 것 같아서 간단한 CSS3를 추가하고 실행했습니다(아트가 너무 형편없습니다).
3.js 코드
코드 복사 코드는 다음과 같습니다.
/* *
* 이벤트 처리 일반 기능
*/
var EventUtil = {
//브라우저에서 이벤트 객체 가져오기 event
getEvent : function(event){
return event : window.event
} ,
//Browser는 이벤트 객체의 대상 DOM 노드를 가져옵니다.
getTarget: function(event){
return event.target||event.srcElement;
},
//Cross -browser 이벤트를 노드에 바인딩
addHandler: function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false)
}else if (element.attachEvent){
element.attachEvent("on" type,handler);
}else{
element["on" type] = handler
}
}
};
//탭 전환 방법 설정
tabSwitch("tab1","click")
tabSwitch("tab2","mouseover")
/**
* 탭 공통 기능
*/
// 들어오는 매개변수 inClassName은 바인딩된 탭 클래스 이름으로 설정되고 매개변수 TriggerType은 트리거 스위치 유형으로 설정됩니다.
function tabSwitch(inClassName,triggerType){
//모두 가져오기 옵션 카드 영역
if(document.querySelectorAll){
var tabs = document.querySelectorAll("." inClassName);
}else{
var divs = document.getElementsByTagName("div");
var tabs = new Array();
for(var k=0,lenDiv=divs.length; k
tabs.push(divs[k]);
}
}
}
//각 탭에 대한 전환 기능 생성
for(var j = 0,len=tabs.length; j
var tab = tabs[j]
//각 옵션 카드 생성 스위치
(function(){
var nameUl = tab.getElementsByTagName("ul")[0];
var content = tab.getElementsByTagName("ul")[1];
//초기화 tab
nameUl.getElementsByTagName("li")[0].className = "selected";
content.getElementsByTagName("li")[0].style.display = "block"
// 이벤트 대리자 추가
EventUtil.addHandler(nameUl,triggerType,function(event){
//이벤트 객체 가져오기
event = EventUtil.getEvent(event);
var target = EventUtil .getTarget(event );
//탭 전환
if(target.nodeName.toLowerCase() == "li"){
//제목 목록 항목과 콘텐츠 목록 항목을 각각 가져옵니다
var nameList = nameUl .getElementsByTagName("li");
var contentList = content.getElementsByTagName("li")
//선택한 클래스를 제목에 추가하고 내용을 표시합니다.
for(var i=0, len =nameList.length; i
contentList[i].style.display = "없음"
if(nameList[i ] == 대상){
nameList[i].className = "선택됨";
contentList[i].style.display = "차단"
}
}
});
})();
}
}
결론은 실제 js입니다. 특정 클래스로 정의된 컨테이너가 탭에 바인딩되고 전환 방법도 사용자 정의할 수 있다는 아이디어입니다. tabSwitch("tab1","click");은 모든 tab1 클래스가 탭에 바인딩되고 클릭 이벤트를 통해 전환됨을 의미합니다.
전환을 구현하는 데는 여러 가지 기술이 사용됩니다. 첫째, IE6 및 7과 호환되도록 클래스 선택기를 통해 동일한 유형을 선택합니다(매우 비효율적임). 대리자는 제목 목록 ul에 트리거 이벤트를 바인딩합니다.
ul의 DOM 요소를 검색할 때 name을 변수 이름으로 사용했기 때문에 Chrome 및 Safari에서 이벤트를 바인딩할 수 없었습니다. 이것! 매우 우울합니다. . .
마지막으로 언급할 것은 효과입니다. 그것은 단지 탭 전환일 뿐입니다(말도 안되는 소리...). 스타일 설정을 용이하게 하기 위해 선택한 탭 제목에 "선택됨" 클래스가 추가됩니다.
마지막으로 개선할 부분이 정말 많다는 점을 말씀드리고 싶습니다(물론 당신은 오줌의 신이 아닙니다). 예를 들어, 클래스를 추가할 때 클래스 이름을 문자열로 연결하면 원래 클래스 이름을 덮어쓰지 않게 됩니다. 예를 들어, 구조적 변화에 대한 적응성을 다룰 수 있습니다. 예를 들어 (질문이 너무 많습니다). . .
또 뭐가 문제인지 지도 부탁드립니다.
데모를 올리는 것이 합리적인가요?
예제를 다운로드하려면 여기를 클릭하세요
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.