화면은 아래와 같이 표현되며 구글라이브러리 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>
이 글은 스프링노트에서 작성되었습니다.
'J-Query' 카테고리의 다른 글
| JQuery 시계 (0) | 2012.06.13 |
|---|---|
| 조작하려는 엘리먼트 선택하기 (0) | 2012.06.07 |
| list 추출및 select 구현 (0) | 2012.05.08 |
| 9일차 XML문서 (0) | 2012.05.08 |
| 8일차 사용자정의객체&JSON표기법 (0) | 2012.05.08 |
