자바스크립트를 통해 이벤트를 처리할 경우는 참 많다.
그리고 개발자를 위해서 디자이너가 이벤트를 다 만들어서
제공하는 nice한 경우도 있지만,
정말... 디자인만 주는 디자이너도 존재하기 때문에 해당 이벤트를 내가 컨트롤 해줘야 하는 경우도 존재한다.
한가지 예를 들면 ,
붉은 동그라미친 + - 이미지를 바꾸는 일을 하는 이벤트를 만들어야 한다면?
가장 심플한 방식으론 다음과 같다.
근데.. 세상이 이렇게 단순한 형태만 지원되길 원하지 않는다.
암 그렇고 말고
맨날 id 노가다로 해결하던 유저에게 가치관의 혼란이 오기 시작한다. 뭔가 방법은 없을까?
하지만, 몇번끄적거리다가,,,, 많은 사람들은 jsp, php에서
다음과 같이 이중포문으로 id 를 막 달고 이벤트를 걸기 시작한다 (-ㅅ-)
for (int i=0; i<cnt1; i++) {
for (int j=0; j<cnt2; j++)
{
<img id = "imgid_<%=i%>_<%=j%>" .... />
}
}
중요한 사실이 있다...
우리는 웹으로 개발할때 종종...
웹에서의 특성으로 해결 할 수 있는걸... id남발을 하는 경우도 있다.
(사실 html은 계층적 구조라서 하위 노드 접근도 가능하다)
사실 위 소스는...
고정된 내용에 대해 에러체크도 없이 만든 ..
즉 쉽게 말하면 조금 후진소스다...
그래도 html의 각 태그별 하위 계정에 접근할 수 있다는걸 보여주는 아주 simple한 예제...
id를 남발해서 처리하기보다는...
자바스크립트에서 하위계정으로 접근해서 바꾸는 방식으로
한번쯤 해보는것도 나쁘지 않을듯...
그리고 개발자를 위해서 디자이너가 이벤트를 다 만들어서
제공하는 nice한 경우도 있지만,
정말... 디자인만 주는 디자이너도 존재하기 때문에 해당 이벤트를 내가 컨트롤 해줘야 하는 경우도 존재한다.
한가지 예를 들면 ,
붉은 동그라미친 + - 이미지를 바꾸는 일을 하는 이벤트를 만들어야 한다면?
가장 심플한 방식으론 다음과 같다.
>>자바스크립트
function treeshowhidden(imgid)
{
var imgobj = document.getElementById(imgid);
if ( imgobj.getAttribute("src").indexOf("hide.gif") > 0 )
{
imgobj.src = imgobj.getAttribute("src").replace("hide.gif","show.gif");
}
else
{
imgobj.src = imgobj.getAttribute("src").replace("show.gif","hide.gif");
}
}
>> HTML샘플
<dl>
<dt><a href="javascript:treeshowhidden('taxtree_<%=++idx%>')">
<img id = "taxtree_<%=idx%>"src="/images/btn/btn_hide.gif" alt="hide"/></a>
</dt>
</dl>
대충 이런식으로 id를 jsp, php 단에서 달아주고,
id로 컨트롤 하는 방식... 사실 이경우가 제일 단순한 방법이긴 하다.
자바스크립트에서 이미지 파일 이름 비교할때,
if ( imgobj.getAttribute("src") =="/images/btn/btn_hide.gif") 로 안하고
if ( imgobj.getAttribute("src").indexOf("hide.gif") > 0 )
하는 이유는, 실제 src가 리턴될때 http:/xxxx.xxx/adsf/images/bin/btn_hide.gif 처럼
full 주소로 나오기 때문에 이렇게 비교함 !!!!
사실 간단한 사실인데... 막상 처리할때 헤맨다 -_-;
function treeshowhidden(imgid)
{
var imgobj = document.getElementById(imgid);
if ( imgobj.getAttribute("src").indexOf("hide.gif") > 0 )
{
imgobj.src = imgobj.getAttribute("src").replace("hide.gif","show.gif");
}
else
{
imgobj.src = imgobj.getAttribute("src").replace("show.gif","hide.gif");
}
}
>> HTML샘플
<dl>
<dt><a href="javascript:treeshowhidden('taxtree_<%=++idx%>')">
<img id = "taxtree_<%=idx%>"src="/images/btn/btn_hide.gif" alt="hide"/></a>
</dt>
</dl>
대충 이런식으로 id를 jsp, php 단에서 달아주고,
id로 컨트롤 하는 방식... 사실 이경우가 제일 단순한 방법이긴 하다.
자바스크립트에서 이미지 파일 이름 비교할때,
if ( imgobj.getAttribute("src") =="/images/btn/btn_hide.gif") 로 안하고
if ( imgobj.getAttribute("src").indexOf("hide.gif") > 0 )
하는 이유는, 실제 src가 리턴될때 http:/xxxx.xxx/adsf/images/bin/btn_hide.gif 처럼
full 주소로 나오기 때문에 이렇게 비교함 !!!!
사실 간단한 사실인데... 막상 처리할때 헤맨다 -_-;
근데.. 세상이 이렇게 단순한 형태만 지원되길 원하지 않는다.
암 그렇고 말고
맨날 id 노가다로 해결하던 유저에게 가치관의 혼란이 오기 시작한다. 뭔가 방법은 없을까?
하지만, 몇번끄적거리다가,,,, 많은 사람들은 jsp, php에서
다음과 같이 이중포문으로 id 를 막 달고 이벤트를 걸기 시작한다 (-ㅅ-)
for (int i=0; i<cnt1; i++) {
for (int j=0; j<cnt2; j++)
{
<img id = "imgid_<%=i%>_<%=j%>" .... />
}
}
중요한 사실이 있다...
우리는 웹으로 개발할때 종종...
웹에서의 특성으로 해결 할 수 있는걸... id남발을 하는 경우도 있다.
(사실 html은 계층적 구조라서 하위 노드 접근도 가능하다)
<script>
function treeshow(id)
{
var ulobj = document.getElementById(id);
var liobj = ulobj.getElementsByTagName("li");
var cnt = liobj.length;
function treeshow(id)
{
var ulobj = document.getElementById(id);
var liobj = ulobj.getElementsByTagName("li");
var cnt = liobj.length;
for(var i=0; i < cnt; i++)
{
if ( liobj[i].getElementsByTagName("img")[0].getAttribute("src").indexOf("hide.gif") > 0 )
{
liobj[i].getElementsByTagName("img")[0].src = liobj[i].getElementsByTagName("img")[0].getAttribute("src").replace("hide.gif","show.gif");
}
else
{
liobj[i].getElementsByTagName("img")[0].src = liobj[i].getElementsByTagName("img")[0].getAttribute("src").replace("show.gif","hide.gif");
}
}
}
</script>
{
if ( liobj[i].getElementsByTagName("img")[0].getAttribute("src").indexOf("hide.gif") > 0 )
{
liobj[i].getElementsByTagName("img")[0].src = liobj[i].getElementsByTagName("img")[0].getAttribute("src").replace("hide.gif","show.gif");
}
else
{
liobj[i].getElementsByTagName("img")[0].src = liobj[i].getElementsByTagName("img")[0].getAttribute("src").replace("show.gif","hide.gif");
}
}
}
</script>
<div>
<dl>
<dt><a href="javascript:treeshow('tree_1');">1. 하위 내용만 이미지변경</a></dt>
<dd>
<ul id="tree_1">
<li>일.<img src="/images/btn/btn_hide.gif"/></li>
<li>이.<img src="/images/btn/btn_hide.gif"/></li>
<li>삼.<img src="/images/btn/btn_hide.gif"/></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="javascript:treeshow('tree_2');">2. 하위 내용만 이미지변경</a></dt>
<dd>
<ul id="tree_2">
<li>일.<img src="/images/btn/btn_hide.gif"/></li>
<li>이.<img src="/images/btn/btn_hide.gif"/></li>
</ul>
</dd>
</dl>
</div>
<dl>
<dt><a href="javascript:treeshow('tree_1');">1. 하위 내용만 이미지변경</a></dt>
<dd>
<ul id="tree_1">
<li>일.<img src="/images/btn/btn_hide.gif"/></li>
<li>이.<img src="/images/btn/btn_hide.gif"/></li>
<li>삼.<img src="/images/btn/btn_hide.gif"/></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="javascript:treeshow('tree_2');">2. 하위 내용만 이미지변경</a></dt>
<dd>
<ul id="tree_2">
<li>일.<img src="/images/btn/btn_hide.gif"/></li>
<li>이.<img src="/images/btn/btn_hide.gif"/></li>
</ul>
</dd>
</dl>
</div>
사실 위 소스는...
고정된 내용에 대해 에러체크도 없이 만든 ..
즉 쉽게 말하면 조금 후진소스다...
그래도 html의 각 태그별 하위 계정에 접근할 수 있다는걸 보여주는 아주 simple한 예제...
id를 남발해서 처리하기보다는...
자바스크립트에서 하위계정으로 접근해서 바꾸는 방식으로
한번쯤 해보는것도 나쁘지 않을듯...
num2img.zip