#1. 131228 스터디에서 보여준 홈페이지는 보안사항이 걸려있는 홈페이지이기 때문에, 이와 같은 기법을 사용하여 만들어진 공개된 홈페이지 중 집밥의 홈페이지를 예로 들어 설명하려고 합니다.



특정 버튼을 누르면 배경이 불투명처리 되면서 알림창이 위로 보여지는 효과는 이렇게 만들어진다고 합니다.


1. 검은색 div를 창 전체에 덮은 다음 rgba값을 줘서 불투명처리 한다.


2. 창으로 띄울 div를 만든다. 이 때 1과 2의 z-index를 높여서(2의 z-index가 더 높아야 한다.) 서로 중첩되게 한다.






#2. 같은 li와 다른 li를 모두 Toggle하는 효과를 실전에서 만들려고 했다가 헤맸다는 조원의 이야기를 듣고 제가 약간의 시간을 들여서 이 효과를 만들어 봤습니다. jquery를 사용했으며 소스는 다음과 같습니다.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>ul li toggle and 다른 ul 전환 같이하기</title>

<style>

#clc { background:#A4A4A4; margin:0; padding:0; }

#clc li { border:1px solid black; list-style-type:none; margin:0; padding:10px; }

#clc li ul { display:none; background:yellow; }

#clc li ul.display { display:block; }

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>

var $clc_clicked = null;

var $clc_clicked_past = null;

$(document).ready(function(){

$("#clc li").click(function(){

$clc_clicked = $(this);

if($clc_clicked_past == null || $clc_clicked.index() == $clc_clicked_past.index()){

$clc_clicked.find("ul").slideToggle(1000, function(){

$clc_clicked.find("ul").toggleClass("display");

});

} else {

//console.log($clc_clicked.index());

//console.log($clc_clicked_past.index());

$clc_clicked_past.find("ul").slideUp(1000, function(){

$clc_clicked_past.find("ul").removeClass("display");

});

$clc_clicked.find("ul").slideDown(1000, function(){

$clc_clicked.find("ul").addClass("display");

});

}

$clc_clicked_past = $(this);

});

});

</script>

</head>

<body>

<ul id="clc">

<li>대메뉴1

<ul>

<li>소메뉴1</li>

<li>소메뉴2</li>

</ul>

</li>

<li>대메뉴2

<ul>

<li>소메뉴1</li>

<li>소메뉴2</li>

</ul>

</li>

<li>대메뉴3

<ul>

<li>소메뉴1</li>

<li>소메뉴2</li>

</ul>

</li>

</ul>

</body>

</html>


의외로 간단하게 만들 수 있습니다.(...)


근데 실제로 조원이 실전에 사용했던 소스는 ul li를 사용한 게 아니라 테이블을 사용한 것이었는데, table의 tr은 jquery의 index()값을 반환하지 않는다고 합니다. 그래서 for문을 돌려서 각각의 tr에 일일히 문자와 숫자를 조합한 class를 새로 추가한 다음, 해당 class값이 같은지 다른지를 체크하여 toggle을 시켜야 한다고 이야기 되었습니다.






#3. 숫자값을 사용자에게 받아서 동작을 시켰을 때 console.log에서는 분명히 숫자값이 뜨는데 값이 적용되지 않는 경우, 생긴건 숫자값이지만 실제로는 문자 type를 가졌는지를 의심해볼 필요가 있습니다. parseInt로 문자 > 숫자 변환이 가능하며, alert(typeof 변수); 형태로 사전에 확인하는게 가능합니다.






#4. HeadFirst Javascript 교재 챕터4의 스토리텔링 알고리즘에서 사용자의 선택된 변수를 받는 것은 html로 만들어진 button으로 받는 것이지 prompt로 변수를 받아서 하는게 아니라고 합니다.





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

티스토리 툴바