모달윈도우 modal window-태그자동생성
핵심 point
특정 class에 css를 짜둔다.
특정태그를 변수에 담아서 생성하고, append, html 등으로 붙여서 화면에 뛰운다.
클릭전 화면
클릭후 화면
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>modalWindow</title>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<style type="text/css">
html,body{
margin:0;
padding:0;
height:100%;
}
h1{
margin:20px 50px;
font-size:large;
border-left:10px solid #7BAEB5;
border-bottom:1px solid #7BAEB5;
padding:10px;
width:600px;
}
ul{
width:700px;
}
ul li{
float:left;
list-style-type:none;
}
ul li img{
border:0;
margin:10px;
}
div#glayLayer{
display:none;
position:fixed;
left:0;
top:0;
height:100%;
width:100%;
background:black;
opacity:0;
}
* html div#glayLayer{
position:absolute;
}
#overLayer{
display:none;
position: fixed;
top:50%;
left:50%;
margin-top:-244px;
margin-left:-325px;
}
* html #overLayer{
position: absolute;
}
</style>
<script type="text/javascript">
$(document).ready(function(e) {
$("<div id='glayLayer'></div><div id='overLayer'></div>").appendTo($("body"))
// body 마지막에 배경을 가려주는 glayLayer 와 이미지를 보여주는 overLayer 를 생성 ( 배경색이나 각속성은 CSS스타일에서 미리적용 )
// 미리코드에 넣어두는것보다는 스크립트로 생성 ( 웹접근성 준수 )
$("a.modal").bind("click", onClick); // 섬네일이미지 ( 클래스이름 .modal) 를 클릭하면 onClick 함수실행
$("#overLayer").bind("click", onRemove);
// 큰이미지를 보여주는 overLayer 를 다시클릭하면 사라지게 해주는 onRemove 함수실행
});
function onClick(){
$("#glayLayer").show(); // glayLayer를 보여지게해서 배경을 흐리게한다.
$("#glayLayer").animate({opacity:0.9},300,"easeOutCubic");
$("#overLayer").show(); // 큰이미지를 보여주는 overLayer 도 보여준다.
$("#overLayer").html("<img src="+$(this).attr("href")+">");
// 보여준 overLayer에 클릭한 a테그의 경로를 얻어와서 해당되는 큰이미지를 넣어준다.
return false; // a링크가 적용안되도록
}
function onRemove(){
$("#overLayer").hide(); // 기존 overLayer 를 사라지게 해준다.
$("#glayLayer").animate({opacity:0},300,"easeOutCubic", function(){
$("#glayLayer").hide(); // 기존 glayLayer의 투명도를 0으로 에니메이션 해주고 끝나면 사라지게 한다.
// 주의) 사라지게 하지않으면 다시 섬네일이미지가 클릭적용이 안된다 .( glayLayer 가 가려서 )
})
}
</script>
</head>
<body>
<ul>
<li><a href="images/photo1.jpg" class="modal"><img src="images/photo1_thum.jpg" alt="" /></a></li>
<li><a href="images/photo2.jpg" class="modal"><img src="images/photo2_thum.jpg" alt="" /></a></li>
<li><a href="images/photo3.jpg" class="modal"><img src="images/photo3_thum.jpg" alt="" /></a></li>
<li><a href="images/photo4.jpg" class="modal"><img src="images/photo4_thum.jpg" alt="" /></a></li>
<li><a href="images/photo5.jpg" class="modal"><img src="images/photo5_thum.jpg" alt="" /></a></li>
<li><a href="images/photo6.jpg" class="modal"><img src="images/photo6_thum.jpg" alt="" /></a></li>
<li><a href="images/photo7.jpg" class="modal"><img src="images/photo7_thum.jpg" alt="" /></a></li>
<li><a href="images/photo8.jpg" class="modal"><img src="images/photo8_thum.jpg" alt="" /></a></li>
</ul>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
toolTip 설명화면-function(e), setTimeout, clearTimeout
핵심 point
마우스를 특정 링크 위에 갖다되면, tooltip(설명화면)이 마우스 옆에 나타난다.
시간이 지나면 자동으로 사라진다.
핵심 기술
function(e){
e.pageX // 이렇게 쓰이며, 이벤트가 발생한 x 좌표를 나타냄
e.pageY // 이렇게 쓰이며, 이벤트가 발생한 y 좌표를 나타냄
}
setTimeout : 몇초동안 이벤트가 지속됨
clearTimeout : Timeout setting한것을 제거해줌
최초화면
마우스 올린 화면
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>tooltip</title>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<script type="text/javascript">
var $sample;
var $tooltip;
var timer;
$(document).ready(function(e) {
$sample=$("#sample");
$tooltip=$("div.tooltip");
$tooltip.css({opacity:0, display:"none"})// 툴팁박스의 초기값을 안보이게 설정
$sample.bind("mouseenter",onOver);
$sample.bind("mousemove",onMove);
$sample.bind("mouseleave",onOut);
});
function onOver(e){
//alert(e.pageX) // 마우스의X좌표를 출력해본다.
$tooltip.show(); // 툴팁을 보여주게
$tooltip.css({left:e.pageX+10, top:e.pageY+10}); // 툴팁의좌표를 마우스의 좌표의 10간격을 두고 지정
// 중요) e.pageX : 페이지에서(body)부터의 마우스 x좌표
// 주의) 함수에서 e (이벤트를 반드시 붙여야 e.pageX, e.pageY 를 인식 )
$tooltip.stop();
$tooltip.animate({opacity:0.8},500,"easeOutCubic"); // 툴팁의 투명도를 0.8 로 에니메이션
timer=setTimeout(onOut,3000); // 중요) setTimerout() 함수 : 일정한시간후에 함수를 실행
}
function onMove(e){
$tooltip.css({left:e.pageX+10, top:e.pageY+10});
// 마우스를 움직일때도 툴팁의좌표를 마우스의 좌표의 10간격을 두고 따라다니게 지정
}
function onOut(){
clearTimeout(timer); // 진행되고있는 setTimeout을 멈춘다.
$tooltip.stop();
$tooltip.animate({opacity:0},500,"easeOutCubic", function(){
$tooltip.hide();
});
// 마우스가 아웃되면 툴팁의 투명도를 0 으로에니메니션 주고 사라지게함
}
</script>
<style type="text/css">
body{
background:#777;
color:white;
}
a{
color:#00CCFF; display:block; float:left; margin-right:5px;
}
h1{
width:80%;
margin:10px auto;
}
p{
margin:10px 10%; text-align:justify;
}
div.tooltip{
position:absolute;
line-height:1.5;
color:white;
width:200px;
background:#FF9900;
border:2px solid white;
padding:1em;
font-size:small;
}
</style>
</head>
<body>
<h1>tooltip sample</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed quam ac risus auctor pulvinar. Nullam tellus lorem, volutpat sit amet eleifend quis, semper pellentesque nunc. Aliquam eu tortor nec nisl suscipit vehicula et eu sapien. Maecenas at pretium diam. Proin non luctus diam. Pellentesque risus nisi, scelerisque eu ultricies quis, <a href="#" id="sample">tooltip sample</a> luctus rhoncus dui. Proin pharetra aliquet justo, vel scelerisque lorem scelerisque eget. Praesent pharetra magna sit amet diam sagittis ac dictum nunc imperdiet. Pellentesque posuere vulputate fermentum. Vivamus fringilla commodo elit, in ornare libero imperdiet sed.</p>
<p>Proin adipiscing faucibus felis eget auctor. Duis sed ante turpis. Cras sit amet euismod est. Vivamus tempus nibh sed odio pulvinar nec varius leo dignissim. Morbi nunc dui, rutrum vitae porttitor quis, semper in augue. Maecenas feugiat neque sit amet nisl euismod in imperdiet lorem iaculis. Suspendisse a convallis augue. Fusce faucibus sollicitudin dui, lobortis semper lacus elementum et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ullamcorper ipsum sit amet libero aliquet feugiat. Nulla facilisi. Cras tincidunt convallis felis, sed vulputate lorem blandit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque tortor leo, dapibus et vulputate in, laoreet sit amet odio. Nulla facilisi. Maecenas sit amet purus eu magna pellentesque sodales. In in velit sit amet sapien pharetra placerat non quis ante. Curabitur nisl tellus, aliquet quis facilisis non, congue eu lectus. Aenean lacinia, magna ut mattis aliquet, nisl augue posuere massa, ac bibendum nisi quam eu est.</p>
<p>Morbi faucibus condimentum dolor sed tristique. Suspendisse vel diam at purus sagittis pretium. Nulla dapibus arcu metus. Sed vulputate adipiscing dapibus. Nullam interdum turpis vitae massa venenatis pulvinar. Nulla commodo convallis augue ullamcorper facilisis. Nullam viverra sollicitudin mauris eget euismod. Suspendisse nec orci felis, non viverra quam. Nunc blandit neque arcu. Aenean dignissim auctor tortor, non hendrerit nisi semper sit amet. Donec vel quam sed arcu dignissim tempus. Sed lacus erat, cursus dapibus porta non, suscipit in odio. Morbi consequat condimentum lorem, dignissim interdum dui condimentum ac. Integer eros diam, lobortis in molestie vitae, ullamcorper eget enim. Pellentesque vel velit odio, non tincidunt turpis. Ut suscipit convallis odio, rhoncus vehicula dolor dignissim in. Phasellus consequat, turpis ut imperdiet tempus, turpis neque bibendum risus, non tempor nisl eros a risus. Aenean mi libero, placerat sed suscipit ut, tincidunt a mi.</p>
<div class="tooltip">이것은ASCII.jp<br /><strong>Web제작현장에서 사용한 jQuery<br />UI디자인 입문</strong><br />의 샘플 프로그램입니다.</div>
</body>
</html>
드래그 팝업 dragPopup - mousedown, mouseup, mousemove
요즘은 팝업창을 div로 해서 많이 구현함.
drag해서 팝업창이 이동하고 종료버튼 누르면 사라지게 하기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>dragPopup</title>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<script type="text/javascript">
var $popup;
var $dragBar;
var downX;
var downY;
$(document).ready(function(e) {
$popup=$("#floatWindow");
$dragBar=$("#floatWindow dt");
$popup.css("opacity", 0);
$popup.hide();
$(".open").bind("click", onShow);
$(".close").bind("click", onHide);
$dragBar.bind("mousedown", onDown);
$(document).bind("mouseup", onStop);
});
function onShow(){
$popup.show();
$popup.animate({"opacity":1}, 300, "easeOutCubic");
}
function onHide(){
$popup.animate({"opacity":0}, 300, "easeOutCubic",function(){
$(this).hide();
});
}
function onDown(e){
downX=e.pageX-$popup.position().left
downY=e.pageY-$popup.position().top
// 누른다음에 이동해야되므로, 이벤트를 onDown()임의 함수 내에 걸어둚.
$(document).bind("mousemove", onMove);
}
function onMove(e){
// 마우스가 이동한 좌표에 최초 마우스가 클릭된 지점의 값을 빼주어야지, 최초클릭된 부분의 좌표가 그대로 반영되어 이동됨.
$popup.css({"left":e.pageX-downX, "top":e.pageY-downY})
}
function onStop(){
$(document).unbind("mousemove", onMove);
}
</script>
<style type="text/css">
#floatWindow{
position:absolute;
width:500px;
height:400px;
top:100px;
left:100px;
}
#floatWindow a.close{
position:absolute;
right:20px;
top:1px;
}
#floatWindow a.close img{
border:none;
}
#floatWindow dl{
width:100%;
height:100%;
background:url("./images/floatWindow.png");
margin:0;
}
#floatWindow dl dt{
height:25px;
line-height:25px;
text-indent:1em;
color:white;
font-weight:bold;
cursor:move;
}
#floatWindow dl dd{
margin:0;
padding:2em;
line-height:1.5;
text-indent:1em;
}
</style>
</head>
<body>
<a class="open">플로우팅 윈도우 표시</a>
<div id="floatWindow">
<a class="close"><img src="./images/close.png" alt="닫힘" /></a>
<dl>
<dt>jQuery를 이용하여 플로우팅 윈도우 만들기</dt>
<dd>이번에는 jQuery를 이용하여 플로우팅 윈도우..(중략)...윈도우를 표시할 수 있습니다.</dd>
</dl>
</div>
</body>
</html>
슬라이드퀵메뉴 slideQuickMenu - scroll, resize, scrollTop
스크롤하면, 슬라이드효과로 퀵메뉴가 화면의 특정 좌표에 계속 붙어 있음
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>slideQuickMenu</title>
<div id="quick_menu" style="position:absolute; width:75px; height:235px;">
<img src="images/quick.gif" alt="" />
</div>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<script type="text/javascript">
var $quickMenu;
var topPosition=300;
var leftPosition=100;
$(document).ready(function(e) {
$quickMenu=$("#quick_menu");
$quickMenu.css({"left":$(document).innerWidth()/2+leftPosition, "top":topPosition});
$(window).bind("scroll", onScroll);
$(window).bind("resize", onResize);
});
function onScroll(){
$quickMenu.stop();
$quickMenu.animate({"top":$(document).scrollTop()+topPosition}, 1000, "easeOutCubic");
}
function onResize(){
$quickMenu.css({"left":$(document).innerWidth()/2+leftPosition, "top":topPosition});
}
</script>
</head>
<body>
<div id="wrap" style="width:70%;">
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>
</html>