Please Enable JavaScript!
Gon[ Enable JavaScript ]

반응형

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>

 


반응형
Posted by 녹두장군

댓글을 달아 주세요