Side Tab

JavaScript 2010. 10. 9. 18:10 |
종종 나오는 케이스라서 기록해 놓는다. C&P방법론 적용하여 구현하자.
모양은 아래와 같다.
우측 탭 마우스 오버시 왼쪽 이미지가 변한다.



한 방에 긁어 성공하려면 이미지 이름이 다음과 같이 되어야 한다.
왼쪽 큰 이미지 >> 이미지 이름 끝에 1~n까지의 순번 부여 
<img id="changeImage" src="/images/fortune/gunghap_box1.gif" />
(gunghap_box2, gunghap_box3, gunghap_box4 ...)

오른 쪽 탭 이미지 >> over이미지일 경우이미지 명이  ov.gif, 아닐경우 or.gif로 끝나게
<img src="/images/fortune/gunghap_index_tab01ov.gif" class="imgOv" />
<img src="/images/fortune/gunghap_index_tab02or.gif" class="imgOv"  />
<img src="/images/fortune/gunghap_index_tab03or.gif" class="imgOv"  />
<img src="/images/fortune/gunghap_index_tab04or.gif" class="imgOv"  />


구현 소스는 다음과 같다.
----------------------------------------------------------------------------------
$("img.imgOv")
.addClass("pointer")
.bind('mouseover', function(){
$("img.imgOv").map(function(){
$(this).attr('src',$(this).attr('src').replace('ov.gif','or.gif'));
});
$(this).attr('src',$(this).attr('src').replace('or.gif','ov.gif'));


var idx = $("img.imgOv").index(this); $("#changeImage").attr('src', '/images/fortune/gunghap_box'+(idx+1)+'.gif'); $("#changeImage").show();
});

저작자표시

'JavaScript' 카테고리의 다른 글

jquery live  (0) 2011.05.20
세션유지  (0) 2010.12.20
팝업 띄우기 주소보안 방법.  (0) 2010.10.07
유용한 놈들  (0) 2010.09.26
jQuery Plug-in  (0) 2010.09.12
Posted by 기계식키보드
:

div가운데 정렬

Tip 2010. 10. 9. 00:05 |
from 네이년 지식인

<div style="height:200px; margin:0 auto; border:1px solid #000000;text-align:center">
  <div style="width:500px; border:1px solid #000000;">test</div>
</div>

안먹히는 이유는!! 아주 간단합니다.

부모 div에 margin:0 auto;를 아무리 줘도 소용이 없습니다.
이유는 부모 div에 width값이 없기 때문이죠.
자식 div에 margin:0 auto;를 줘보세요.

수정된 코드는 아래와 같습니다.

<div style="height:200px; border:1px solid #000000;text-align:center">
  <div style="width:500px; margin:0 auto; border:1px solid #000000;">test</div>
</div>

저작자표시

'Tip' 카테고리의 다른 글

크로스도메인 쿠키문제  (0) 2011.01.21
MySql insert select  (0) 2010.11.06
말풍선 그럴싸한거  (0) 2010.09.26
JSP 달력 만들기  (0) 2010.09.10
CSS 말줄임표(...) div 와 table 에 적용하기  (0) 2010.09.01
Posted by 기계식키보드
:

팝업 띄우기 주소보안 방법.

JavaScript 2010. 10. 7. 15:25 |
 


음 이건 그냥 동료에게 배운 편법이다.

현재 보통 팝업창을 뛰울때 
window.open(url,name,option); 
을 이용해서 팝업을 띄우기 마련이다.

하지만 url에 parameter들을 달고 가면 IE7부터는 주소창 보안에 걸리기 마련이다.

자 이츰해서 과연 어떻게 해야될까...

방법은 의외로 간단하다.
window.open('',name,option)
document.form 네임.target = name;
document.form 네임.method = post;
document.form 네임.action = 페이지;
document.form 네임.submit();

이렇게 되면 먼저 name이라는 이름을 가지는 팝업을 띄운 다음에
그 창을 타겟삼아서 submit을 시켜버린다.
이렇게 되면 일일히 parameter를 달고 갈 필요가 없어서 주소창 보안이 된다.
parameter가 많이 선언된 경우에는 속도쪽 문제를 감안해야되지만 
parameter의 값이 한글인 경우에도 어느정도 편하게 사용 할 수 있습니다!!
저작자표시

'JavaScript' 카테고리의 다른 글

세션유지  (0) 2010.12.20
Side Tab  (0) 2010.10.09
유용한 놈들  (0) 2010.09.26
jQuery Plug-in  (0) 2010.09.12
jQuery UI Tab Header 없애기  (1) 2010.08.31
Posted by 기계식키보드
:

티스토리툴바