JS :: 풀다운 메뉴

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

nkdk의 세상

JS :: 풀다운 메뉴 본문

My Programing/HTML and JavaScript

JS :: 풀다운 메뉴

nkdk 2008. 6. 16. 10:36

객체안에서 속성만들기

자바스크립트에서는 함수를 이용하여 속성과 메서드를 만들 수 있습니다.

|형식|
   function (매개변수1, ...) {
this.이름1 = 매개변수1;
   }

|예제|
   function menuStyle() {
this.menuDelta=3;
   }

this연산자

자기자신을 가리키는 연산자로 속성을 만드는 데 유용하게 사용됩니다.

|예제|
   <html>
   <script language="JavaScript">
   
   </script>

   <body>
   </body>
   </html>

style속성
CSS속성을 부여합니다.
- buttonhighlight : '화면배색'의 버튼highlight색상을 사용합니다.
- menu : '화면배색'의 메뉴색을 사용합니다.
event객체
이벤트를 처리합니다.
- srcElement : 이벤트가 발생한 객체를 반환합니다.
  - className : 클래스네임을 반환합니다.
  - getAttribute("속성") : 해당객체의 속성을 반환합니다.
  - url : 해당객체에 설정된 url값을 반환합니다.
document객체
문서내용을 담당합니다.
- writeln() : 문서내용을 출력합니다. write()와 달리 줄바꿈을 수행합니다.
style속성
CSS속성을 차용합니다.
- offsetLeft : 상위모체와의 상대적인 x좌표값을 반환합니다.
- offsetTop : 상위모체와의 상대적인 y좌표값을 반환합니다.
- offsetWidth : 객체의 스크립트가 적용되는 영역의 너비입니다.
- offsetheight : 객체의 스크립트가 적용되는 영역의 높이입니다.
- clientLeft : 객체의 스크립트가 표현되는 영역의 상대적인 x좌표입니다.
- clientTop : 객체의 스크립트가 표현되는 영역의 상대적인 y좌표입니다.
- clientWidth : 객체의 스크립트가 표현되는 영역의 너비입니다.
- clientHeight : 객체의 스크립트가 표현되는 영역의 높이입니다.
- posLeft : left속성값을 수치화합니다.
- posTop : top속성값을 수치화합니다.
- posWidth : width값을 수치화합니다.
- posHeight : height값을 수치화합니다.
- pixelLeft : left속성값을 pixel단위로 수치화합니다.
- pixelTop : Top속성값을 pixel단위로 수치화합니다.
- pixelWidth : width값을 pixel단위로 수치화합니다.
- pixelheight : height값을 pixel단위로 수치화합니다.
eval() : 해당문자열을 검색하여 스크립트화합니다.

<html>
<head>
<style type="text/css">

</style>
</head>
<body leftmargin=0 topmargin=0>

<script language="JavaScript">
\n"; // 메인항목이 들어갑니다.
strHTML += "</td></tr></table>\n";
strHTML += "</td></tr></table>\n";
strHTML += "</div>\n";
strHTML += "\n"; // 서브항목이 들어갑니다.
}

function add_item(idItem, text, hint, location, altLacation) { // 메인항목추가 (id, 항목명, 풍선말, URL, 설명)
var lookup = "";
if (strHTML.indexOf(lookup) != -1) { // 이미 항목이 존재한다면
alert(idParent + "항목을 찾을 수 없습니다.");
return false;
}

var menuItem = "";
menuItem += "\n\n";
menuItem += "<td>\n";
menuItem += "<div id='" + idItem + "' ";
menuItem += "onmouseout='inAll()' class='menuItem' ";

if (hint != null)
menuItem += "title=\"" + hint + "\" ";

if (location != null) {
menuItem += "href='" + location + "' ";
menuItem += "onmouseover='hideAll()'";
} else {
menuItem += "href='#' ";
menuItem += "onmouseover=\"hideAll(); dis_subMenu('" + idItem + "');\" "; // 선택항목표시, 서브메뉴좌표계산
menuItem += "onclick=\"return false;\" ";
}

menuItem += ">" + text + "\n";
menuItem += "</div>\n";
menuItem += "</td>\n";

menuItem += "\n\n";
menuItem += "\n";

strHTML = strHTML.replace("\n", menuItem); // 본문의 '메인메뉴'주석을 menuItem스크립트로 변경
}

function add_subItem(idParent, text, hint, location, frame) { // 서브항목추가 (id, 항목명, 풍선말, URL, 타겟)
var menuItem = "";

lookup = "";

if (strHTML.indexOf(lookup) == -1) { // 메인항목의 존재여부확인
alert(idParent + "(을)를 찾을 수 없습니다.");
return false;
}

lookup = "";

if (strHTML.indexOf(lookup) == -1) { // 서브메뉴항목이 처음이라면
menuItem += "\n";
menuItem += "<div onmouseover='highlight()' onmouseout='lowlight()' onclick='jump()' id='" + idParent + "subMenu' class='subMenus'>\n";
menuItem += "<table border='0' bgcolor='menu' width='100%'>\n";
menuItem += "\n";
menuItem += "</table>\n";
menuItem += "</div>\n";
menuItem += "\n";

strHTML = strHTML.replace("\n", menuItem);
}

lookup = "\n";

menuItem = "<tr><td><div class='selItem' url='" + location +"' ";

if (hint != null)
menuItem += " title='" + hint + "' ";
if (frame != null)
menuItem += " target='" + frame + "' ";

menuItem += ">" + text + "</div></td></tr>\n";
menuItem += lookup;

strHTML = strHTML.replace(lookup, menuItem);
}

function showMenu() { // 스크립트출력 및 상단좌표설정
document.writeln(strHTML);
dsp_updateIt(); // 최상단좌표 지속설정
}

function dis_subMenu(idMainMenu) { //서브메뉴 좌표설정(메인항목ID)
var menu = eval(idMainMenu); // 메인항목
var subMenu = eval(idMainMenu + "subMenu.style"); // 서브메뉴스타일
var smp = document.all["smartMenu"]; // 메인메뉴형식

subMenu.left = sum_offset(menu, 'offsetLeft'); // 서브메뉴의 left좌표 = 메인항목의 left좌표(지속적인)
subMenu.top = sum_offset(smp, 'offsetTop') + smp.offsetHeight + mstyle.menuDelta; // 메인top + 메인height + 메인-서브간격
subMenu.visibility = "visible";

var smp_sub = document.all[idMainMenu + "subMenu"]; //서브메뉴

leftX = smp_sub.style.posLeft;
rightX = leftX + smp_sub.offsetWidth;

topY = smp.offsetTop;
bottomY = topY + smp.offsetHeight + smp_sub.offsetHeight; // 하단좌표 = 메인top + 메인height + 서브height

lastMenu = subMenu;
}

function sum_offset(idItem, offset_name) { // 좌표검색
var total_offset = 0;
var item = eval('idItem');

do { // 부모노드까지의 좌표를 검색합니다.
total_offset += eval('item.' + offset_name);
item = eval('item.offsetParent');
} while (item != null);

return total_offset;
}

function updateIt() { // 해당컨테이너를 벗어난 범위에서 이벤트를 발생(클릭)시키면 서브메뉴가 숨겨집니다.
var x = window.event.clientX;
var y = window.event.clientY + document.body.scrollTop;

if (x>rightX || x<leftX)
hideAll();
else if (y<topY || y>bottomY)
hideAll();
}

function dsp_updateIt() { // 스크롤시 상단좌표를 재설정합니다.(지속적인)
document.all["smartMenu"].style.top = document.body.scrollTop;
setTimeout("dsp_updateIt()", 200);
}

document.body.onclick = hideAll;
document.body.onscroll = hideAll;
document.body.onmousemove = updateIt;

function show_allMenu() { // 전체함수를 호출/제어합니다.
mstyle = new menuStyle();
mstyle.menuDelta = 1;

menu = new main_menu();
menu.add_item("mn1", "포털", "포털", null, null);
menu.add_item("mn2", "검색", "검색", null, null);

menu.add_subItem("mn1", "네이버", "네이버", "http://www.naver.com");
menu.add_subItem("mn1", "엠파스", "엠파스", "http://www.empas.com");
menu.add_subItem("mn2", "Google", "Google", "http://www.Google.co.kr", "newFrm");

menu.showMenu();
}

show_allMenu();

// -->
</script>

<br><br><br>
<center>
메뉴만들기
</center>
</body>
</html>

'My Programing/HTML and JavaScript' Related Articles

nkdk의 세상

JS :: 풀다운 메뉴 본문

JS :: 풀다운 메뉴

객체안에서 속성만들기

this연산자

티스토리툴바