Leeyunhan » script

JS천하통일 이야기

leeyunhan — Thu, 08 Oct 2009 01:12:50 +0000

case1.
“제가 아무리 막아보았지만 그토록 빠른 이동을 하는 술수는 처음 보았습니다. 결국 전혀 맞설수 없었지요”
무투파의 수장인 기인은 그 소릴 듣고 말했다.
“마치… 발이 땅에서 떨어지지 않고 움직이는 그러한 보법말이더냐?”
“네 맞습니다. 순식간에 저와 거리가 없어지는듯 하다가도 어느새 저편으로 가 있었지요”
수장은 말했다.
“그건 어느 유파의 라이브러리를 사용하는거 같구나. 아마도 애니메이트 초식이었을게다”
작고 상처투성이인 청년은 다급히 물었다.
“저도 그런 기술을 쓸수 있을까요?”
잠시 생각에 잠긴 기인은 자신의 후계를 위해 이 청년을 수하로 들이기로 결정했다.
“너의 실력은 아직 원시코드로 간단한 함수를 호출할 정도일 터. 조금 내공(코어)을 끌어올린 다음 내가 알려주는 라이브러리를 익힐수 있도록 도와주마”

case2.
“들었는가? 자네. 네통에서는 얼마전부터 각 문하생들마다 더미아이디를 하나 더 생성하게 해주는 서비르를 시행하고 있다네”
“물론이지.. 꽤 되었다 하더군”
“내가 아는 친구는 그걸 이용해서 자신의 흔적을 남기지 않는다 하더구만”
“아니… 네통은 문파에 들아갈때 반드시 등록되지 않나?”
“그렇지… 내가 아는 그 친구는 바로 그 부계정으로 문파에 등록해 사용하다가 문파에서 비전을 수급 한 뒤에는 부계정을 바로 삭제한다고 하네. 본계정을 애초부터 숨기고 있던거지..”
“허.. 어찌 그런 생각을…”
“하기사 이젠 네통으로 각 문파의 문하생들이 자신의 라이브러리 비급을 전달하는건 일도 아니니 그다지 나무랄 일도 아닌거 같네”

case3.
‘존’ 대사부가 세운 제이코리파에서는 작은 소동이 일어났다.
“어찌 하여 새로운 라이브러리를 개발하고 있느냐?” 현철 사범이 가인에게 물었다.
“… 저희 라이브러리가 너무 편해서.. 내공정진을 함께 하기가 어렵습니다”
“무슨말이냐”
“쉬운 메소드와 애드온이 많기에 더욱 그러한것이 아닌가 합니다. 속하 제자가 좀더 내공을 연마코자 그런것이니 너그러이 용서해 주십시오”
가인은 대답하면서 자신이 적어놓은 라이브러리를 보여주었고 현철사범은 그 라이브러리를 펼쳐 천천히 읽어내려갔다.
“흠.. 어느때고 간에 mouseleave이벤트를 사용하도록 하고 있느냐?”
“네…”
“좋다, 물론 존사부님의 비급을 수급하기도 좋지만 너 자신의 라이브러리를 만드는것도 좋겠지. 정진하도록 하여라”

case4.
기롼이란 청년은 의기양양해져서 문파로 돌아왔다.
“헤헤 그 거지같은 녀석을 혼내줘서 속이 다 시원하네 흐흐”
같은방 소속인 문하생들에게 자랑하던 중, 결국 어플리케이션 제2사부인 동숙사범에게 자초지종을 들키게 되었다.
“이놈! 어디서 문파의 기술을 쓰고 다니라 했더냐. 너는 아직 그 정도 실력이 아니다!”
프로토파의 사범인 동숙사범이 기롼이를 꾸짖었다.
“우리같은 대 방파에서 괜한 사람을 핍박했다는 소리가 들리면 어쩌려고 그러느냐! 이 일은 ‘샘’ 노사께 이를터이니 넌 스터디방에서 자숙하고 있거라!”
기롼이는 풀이 죽어서 스터디방으로 향했고 프로토파의 비전을 펼쳐 그중에서 getElementsByClassName확장에 대해를 읽어내려갔다.
‘쳇.. 사범님은 구닥다리야. 어차피 이런 메소드도 조금만 지나면 굳이 라이브러리를 호출하지 않아도 될텐데..’

case5.
규영과 을순은 서남지역으로 이동하던중 희안한 광경을 목격했다.
한 무리의 인력들이 한 남자를 둘러싸고 시비를 걸고 있었는데, 가운데 남자는 의연한 태도를 유지하고 있었다.
어느새인가 싸움이 벌어졌고 순식간에 한 남자만이 서 있었으며 불량배들은 모두 나가떨어져 있었다.
규영이 물었다.
“아니..보셨나요? 방금 저 남자가 사용한게 뭔지..”
을순이 대답했다.
“자신을 복제함과 동시에 팔괘에서 나타나게끔하여 마치 3차원의 요소처럼 공격하는것 말이냐”
“네 전 어떤일이 일어났는지도 잘 모르겠습니다”
을순은 조용히 말을 이었다.
“저건 마치 벼락이 지나간 뒤에나 알수 있다는 뜻으로 후뢰시(後雷始) 라는 이름을 가진 기술이지.
서역에서 들어온 기술로서 라이브러리와는 전혀 다른 언어로 만들어진단다.
플렉스라는 파는 그 정점에서 아직도 끊임없는 기술을 개발하고 있다고 들었다.”
규영의 부러워 하는 눈을 보고 을순은 덧붙였다.
“하지만 아무나 쓸수 없는 기술이기도 하지.. 모든곳에서 동등하게 사용하기도 어렵거니와 가장 중요한건 아도브산하에 속한자만이 허락받아 사용한단다. 여튼 우리와 같은 길을 걷고 있는것만은 틀림없지”

그때 저 멀리서 같은 광경을 보고 있던 한 노승이 눈에 띄였으나 순식간에 보이지 않게 되었다.
을순은 그를 놓지지 않으면서 속으로 뇌아렸다.
‘… 더글러스 크록포드경이 나타나다니… 큰 한파가 한번 몰아닥치겠구나…’

input type file에 style입히기

leeyunhan — Fri, 14 Aug 2009 06:30:29 +0000

input type file에 style입히기

javascript

function initFileUploads(classname,position,size,fakewidth) {
	if (!W3CDOM) return;
	var fakeFileUpload = document.createElement('div');
	fakeFileUpload.className = 'fakefile';
	fakeFileUpload.style.width = 100 + "%";
	fakeFileUpload.style.textAlign = position;
	fakeFileUpload.appendChild(document.createElement('input'));
	var image = document.createElement('img');
	image.src='filesearch.gif';
	image.style.verticalAlign = 'middle';
	fakeFileUpload.appendChild(image);
	var x = document.getElementsByTagName('input');
	for (var i=0;i
html

	
		
			
		
		
		
			<script type="text/javascript">initFileUploads('file','center',40,310);</script>
		

		
			
		
		
		
			<script type="text/javascript">initFileUploads('file2','left',60,390);</script>
		
	



*사이트내에서 파일업로드 필드의 가로값이 두개 이상일경우, 각각 클래스로 사이즈를 제어하도록 함
*실제 input과 가상 input의 사이즈를 비교하기위해 opacity값을 조절해서 비교하면 쉽습니다.


디자인 입힐 input type=”file”에 특정 클래스 지정 (예제에서는 class=”file”)
해당 input을 div class=”fileinputs” 으로 감쌈
스크립트 호출- initFileUploads(classname,size,fakewidth) 
classname : 지정한 클래스 이름
position: 정렬 (left, center, right 사용)
size : 실제 input 사이즈 지정
fakewidth : 가상으로 보일 input 박스의 width값

미리보기

GNB

leeyunhan — Fri, 14 Aug 2009 06:23:24 +0000

기본적인 글로벌 네비게이션

javascript

var _d = document;
function getClass(classname, tagname, tarID) {}
function addClass(element,value) {}
function removeClass(element,value) {}

var gnbNavi = function(gnbID, currentNum, subCurrentNum, noscript){
	var wrapper = _d.getElementById(gnbID);
	if (noscript) removeClass(wrapper,noscript);	// 스크립트가 로딩되면 wrapper의 class중 'noscript'를 삭제합니다.

	var menu = getClass('depth1','li',wrapper);
	var menuLink = [];			// 이벤트를 발생시킬 대메뉴의 a들
	var submenu = [];			// 대메뉴의 하위에 위치한 ul들
	var submenuLink = [];		// 서브메뉴의 a들

	var initialize = function(){
		for (var i=0; i
hml

	
		
			menu01
			menu0101
		
		
			menu02
			menu0201
		
		
			menu03
		
		
			menu04
			
				menu0401
			
		
		
			menu05
			
				menu0501
			
		
		
			menu06
		
	




활성화 된 대메뉴에 ‘visible’ class 추가
대메뉴, 서브메뉴에 이미지인 경우 “~.gif”, “~on.gif”로 이미지 변환
활성화 된 대메뉴, 서브메뉴 지원 (currentNum, subCurrentNum)
getClass(), addClass(), removeClass(); 함수 사용
서브메뉴 각각의 위치는 css등 이용 권장
js로딩시 gnbID의 class값 제거 : js없을경우 별도의 디자인 view 가능

미리보기

select box처럼 보이는 radio목록

leeyunhan — Fri, 14 Aug 2009 06:06:19 +0000

검색 옵션처럼 select를 사용할 곳에 디자인이 입혀진 경우 마크업을 라디오 버튼으로 대체하여 작성한 예

javascript

function getClass(classname, tagname, tarID) {}	// 라이브러리 참조
function addEvent( obj, type, fn ) {}	// 라이브러리 참조
function removeEvent( obj, type, fn ) {}	// 라이브러리 참조
function stopBubble(e){}	// 라이브러리 참조

function selectMore(wrapper){
	var _d = document;
	var wrapper = _d.getElementById(wrapper);				// 링크박스
	var pointer = getClass('title','span',wrapper)[0];		// 타이틀
	var linkBox = getClass('linkbox','div',wrapper)[0];		// 목록
	var linkBoxList = linkBox.getElementsByTagName('label');	// 목록의 모든 라벨
	//	linkBox.style.display = 'none';		// 목록 숨김 초기화는 css로 지정함 : js제거시엔 작동 안함.

	function hideLinks(){			// 목록을 숨기는 함수
		if (linkBox.style.display == ''){
			linkBox.style.display = 'none';
		}
	}

	function toggleLinks(e){		// 목록 토글 함수
		if (linkBox.style.display == 'none'){
			linkBox.style.display = '';
			stopBubble(e);
			addEvent(document,'click',hideLinks);
		} else {
			linkBox.style.display = 'none';
			stopBubble(e);
			removeEvent(document,'click',hideLinks);
		}
		return false;
	}

	for (var i=0; i
html

	통합검색
	
		
			 통합검색
			 직원
			 업무
		
	
	
	



미리보기

family site처럼 바로가기 링크

leeyunhan — Fri, 14 Aug 2009 05:51:57 +0000

셀렉트 박스 디자인의 단순 링크 목록 펼침/숨김

javascript

function getClass(classname, tagname, tarID) {}	// 라이브러리 참조
function addEvent( obj, type, fn ) {}			// 라이브러리 참조
function removeEvent( obj, type, fn ) {}			// 라이브러리 참조
function stopBubble(e){}					// 라이브러리 참조

function linksMore(wrapper){
	var _d = document;
	var wrapper = _d.getElementById(wrapper);		// 링크박스
	var pointer = getClass('title','a',wrapper)[0];			// 타이틀
	var linkBox = wrapper.getElementsByTagName('ul')[0];	// 링크목록
	var linkBoxList = linkBox.getElementsByTagName('a');	// 링크목록의 모든 링크
	linkBox.style.display = 'none';		//링크목록 숨김 초기화

	function hideLinks(){			// 링크목록을 숨기는 함수
		if (linkBox.style.display == ''){
			linkBox.style.display = 'none';
		}
	}

	function toggleLinks(e){		// 링크목록 토글 함수
		if (linkBox.style.display == 'none'){
			linkBox.style.display = '';
			stopBubble(e);
			addEvent(document,'click',hideLinks);
		} else {
			linkBox.style.display = 'none';
			stopBubble(e);
			removeEvent(document,'click',hideLinks);
		}
		return false;
	}

	for (var i=0; i
html

	links more...
	
		link1
		link2
		link3
	



	links more...
	
		link1
		link2
		link3
	




id를 가진 wrapper안에서 class=”title” 클릭시 wrapper안의 첫번째 ul을 보여줌.
프로세스

펼침 메뉴(링크목록)은 기본적으로 숨김 처리.
링크(타이틀) 클릭시 펼침메뉴 보이고 숨김 토글 함수 실행
링크목록의 마지막 링크에서 포커스 아웃(블러)시 링크목록 숨김
링크목록이 보이는 상태라면 링크목록 바깥쪽(document)클릭시 링크목록 숨김 처리
링크목록 영역은 클릭해도 사라지지 않음.

사용한 함수

토글함수 – toggleLinks(e)
목록숨김함수 – hideLinks()
class선택자 함수 – getClass(classname, tagname, tarID) (
이벤트리스터추가 함수 – addEvent( obj, type, fn )
이벤트리스터제거 함수 – removeEvent( obj, type, fn )
이벤트 버블 멈춤 함수 – stopBubble(e)

미리보기

select박스 덮기 (for IE6)

leeyunhan — Fri, 14 Aug 2009 05:44:25 +0000

IE6에서 셀렉트박스가 z-index에 무관하게 최상위로 보이는 현상

조건부 주석으로 IE6에서만 적용되도록 감쌌음.

아래의 사용법

레이어등이 보이는경우 – showPopup();에 selectFix(layerID)를 추가해 주고,
레이어를 없앨경우 – hidePopup(); 에 removeSelectFix(layerID)를 추가함.

select를 단순 박스형태로 덮는경우에 사용 가능
동적으로 움직이는 레이어나 box형태가 아닌 레이어에 대해 iframe의 한계가 있음.
투명한 플래쉬일 경우 역시 iframe의 한계가 있음.

미리보기

Tab menu

leeyunhan — Fri, 14 Aug 2009 04:58:22 +0000

Tab메뉴

javascript

function tabMenu(id,currentNum) {
	var objAnchor = [], objLink = [];
	var ID = document.getElementById(id);
	var objLI = ID.getElementsByTagName('li');

	var initialize = function() {
		for (var i=0; i
html



	
		notice 1
		notice 2
		notice 3
	
	
		notice 1
	
	
		notice 2222
	
	
		notice 3333
	




컨테이너 id값과 현재 보여주고 싶은 메뉴를 인수로 갖는다.

탭메뉴가 이미지일 경우 “~.gif”와 “~_on.gif”로 작동됨.
탭메뉴가 이미지에 관계없이 활성화 된 li에 class=”visible”로 설정
내용 중 감춰지는 박스의 class=”hidden”
스크립트 중 currentNum 은 초기 활성화 시킬 인수.

접근성을 향상을 위해 숨겨지는 목록에 대해 display:none에서 visibility를 사용했음.

이경우 position기법이 아닐때는 영역문제가 생김에 주의.
미리보기

removeClass(element,value)

leeyunhan — Fri, 14 Aug 2009 04:17:58 +0000

removeClass함수
엘리먼트의 class를 제거하는 함수

function removeClass(element,value) {
	if (element.className == value) {
		element.className = "";
	} else if (element.className.indexOf(value) != -1) {
		element.className = element.className.replace(value,"");
	}
}

* class가 복수일 때 해당 class만 제거.
* addClass와 함께 자주 사용.

var divElement = document.getElementById('div_wrap');
removeClass(divElement, 'redBorder');
// 혹은
listElement[i].onclick = function(){
	removeClass(this,'redBorder');
}

addClass(element,value)

leeyunhan — Fri, 14 Aug 2009 04:15:12 +0000

addClass함수
엘리먼트에 class를 추가해주는 함수.

function addClass(element,value) {
	if (!element.className) {
		element.className = value;
	} else {
		newClassName = element.className;
		newClassName += " ";
		newClassName += value;
		element.className = newClassName;
	}
}

* 기존에 class가 있으면 공백으로 class를 추가해 줌.
* removeClass와 함께 자주 사용.

var divElement = document.getElementById('div_wrap');
addClass(divElement, 'redBorder');
// 혹은
listElement[i].onclick = function(){
	addClass(this,'redBorder');
}

getClass(classname, tagname, tarID)

leeyunhan — Fri, 14 Aug 2009 04:07:20 +0000

getClass 함수
class를 기준으로 문서내에서 원하는 엘리먼트에 대해 반환하는 함수.

function getClass(classname, tagname, tarID) {
	if (tarID == undefined) tarID = document;
	var element = this.nodeType == 1 ? this : tarID;
	var elements = [], nodes = tagname ? element.getElementsByTagName(tagname) : element.getElementsByTagName('*');
	for(var i=0; i 0 && (elementClassName == arguments[0] || new RegExp("(^|\\s)" + arguments[0] + "(\\s|$)").test(elementClassName))) {
			elements.push(nodes[i]);
		}
	}
	return elements;
}

전달인자로는 (class명, tag명, 영역)을 가지며 해당 인자가 없을경우 문서 전체 혹은 모든 엘리먼트에서 검색한다.

wrapper = document.getElementById(‘div_wrap’);
var popElement = getClass(‘popup’, ‘a’, wrapper);
결과는 popElement에 id가 div_wrap인 div영역 안의 a태그 중 class가 popup인 요소들만 배열형태로 갖는다.