|
Javascript 에서 jQuery API 를 이용한 버튼이벤트시 레이어 새창으로 표현 |
|
개발환경 :JDK 1.6, window XP, Eclipse-indigo |
|
화면설명 |
화면은 아래와 같이 표현되며 구글라이브러리 jQuery API 인 js 파일을
상단에 링크해준다. 그리고 Style 을 원하는 형태로 정한뒤 폼레이어에
적용하자.
|
소스 |
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<!-- Style 선언 -->
<style type="text/css">
#divLangSelect {
position:absolute;
display:none;
background-color:#FFCC00;
border:solid 2px #d0d0d0;
width:350px;
height:150px;
padding:10px;
}
</style>
<!-- //Style 선언 -->
</head>
<body>
<!-- 버튼 이미지 -->
<img src='1286960090_home.png' alt="버튼1" width="48" height="48" class='imgSelect' />
<img src='synchronize48.png' alt="버튼2" width="48" height="48" class='imgSelect' />
<img src='1286960551_yahoo-buzz-logo-square2.png' alt="버튼3" width="40" height="40" class='imgSelect' />
<!-- //버튼 이미지 -->
<!-- 폼 레이어 -->
<div id="divLangSelect">
<div style="position:absolute;top:5px;right:5px">
<span onClick="javascript:document.getElementById('divLangSelect').style.display='none'" style="cursor:pointer;font-size:1.5em" title="닫기">X</span>
</div> 표현하고자 하는 내용을 넣으면 된다. 오른쪽엔 닫기 버튼이다. 적당한 아이콘 넣어서
이쁘게 표현해보자.
</div>
<!-- //폼 레이어 -->
<script type="text/javascript">
//-- 버튼 클릭시 버튼을 클릭한 위치 근처에 레이어 생성 --//
$('.imgSelect').click(function(e) {
var divTop = e.clientY + 10; //상단 좌표
var divLeft = e.clientX + 10; //좌측 좌표
$('#divLangSelect').css({
"top": divTop
,"left": divLeft
, "position": "absolute"
}).show();
});
</script>
</body>
</html>
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| Easy Slider 를 이용하여 이미지 슬라이더 구현하기 (2) | 2013.06.14 |
|---|---|
| javascript 개발을 위한 Visual Web Developer 2010 Express 설치 (0) | 2012.10.22 |
| Javascript 자바스크립트에서 배열사용하여 프로그램하기 (0) | 2012.09.19 |
| 자바스크립트를 개발하기 위한 에디터 종류 (1) | 2012.09.15 |
| Javascript 를 이용한 동적테이블 구성 (1) | 2011.04.14 |
| javascript 에서 input 값에 숫자이외의 글 입력막기 (0) | 2010.11.19 |
| javascript 의 showModalDialog 사용해서 새창 제어하기 (1) | 2010.08.07 |
| 자식창과 부모창의 관계, iframe 내부와 메인페이지와의 관계제어 (5) | 2009.09.15 |
