paran/[ Script ] XML을 이용한 메뉴 스크립트 webdress 2004. 11. 16. 09:30 이 스크립트는 XML을 이용한 메뉴 스크립트이다.브라우저: 인터넷 익스플로러 5.0 이상라이센스: freeware사용언어: Javascript<HTML><HEAD><p><center><font color="white"><b>▶ </b></font><a href="http://korea.internet.com/channel/list.asp?cid=189&zid=12"><b>코리아인터넷닷컴 자바스크립트 소스/예제 모음</b></a></center><p><br><br><!--- Javascript Start Here ----> <style type="text/css"> a:link {color:blue ; text-decoration:none} a:visited {color:blue ; text-decoration:none} a:active {color:blue ; text-decoration:none} a:hover {color:blue ; text-decoration:none} table.menu {font-family: arial; font-size: 11px; margin: 2px 2px 2px 2px; padding: 2px 2px 2px 2px } table.sub {font-family: arial; font-size: 11px; margin: 0px; padding: 0px; cursor: default } td.menu {margin: 2px 10px 1px 10px; vertical-align: center; padding: 2px 10px 1px 10px; border: 1px solid #cccccc; cursor: default} td.line {margin: 2px; padding: 2px; border-top: 3px outset white; width: 500px} .submenu {margin: 2px; vertical-align: center; padding: 2px; text-align: left; cursor: default} .subsubmenu {margin: 2px; vertical-align: center; padding: 2px; text-align: left; cursor: default} </style> <script language=javascript> <!-- var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); var isClicked=false, current=null, menu, prevSub; function load_menu(xmlFile) { xmlDoc.async="false"; xmlDoc.onreadystatechange=verify; xmlDoc.load(xmlFile); menu=xmlDoc.documentElement; build_menu(); } function verify() { if (xmlDoc.readyState != 4) { return false; } } function build_menu() { var menuBuilder, menuArea; if (document.all) { menuArea=document.all('menu'); menuBuilder=ie_menu(); menuArea.innerHTML=menuBuilder; } } function ie_menu () { var builder,menutxt; builder="<table class=menu border=0 cellspacing=2 cellpadding=0 width=100%><tr>"; for (var i=0; i<menu.childNodes.length; i++) { menutxt=menu.childNodes(i).firstChild.text; builder+="<td id=menu"+i+" class=menu onClick='menu_click(this,"+'"menu.childNodes('+i+')"'+")' onMouseover='menu_over(this,"+'"menu.childNodes('+i+')"'+")' onMouseout='menu_out(this)' nowrap>"+menutxt+"</td>"; } builder += "<td width=100%></td><tr><td colspan="+(menu.childNodes.length+1)+" class=line> </td></tr></table>"; return builder } function menu_over(menuObj,menuStr) { var menuid="sub"+menuObj.className,menuDom=eval(menuStr); while(document.all("sub"+menuid)) { document.all("sub"+menuid).style.visibility="hidden"; menuid="sub"+menuid; } if (prevSub) { prevSub.style.backgroundColor = "#cccccc"; prevSub.style.color = "black"; } if (isClicked&¤t) { current.style.borderColor="#cccccc"; current.style.borderStyle="solid"; } menuObj.style.borderColor="white"; menuObj.style.borderStyle=isClicked?"inset":"outset"; if (current!=menuObj) { if (isClicked) { move_sub(menuObj,menuStr); } current=menuObj; } } function menu_click(menuObj,menuStr) { var menuDom=eval(menuStr); isClicked=!(isClicked); menuObj.style.borderStyle=isClicked ? "inset":"outset"; if (isClicked) { show_sub(menuObj,menuStr); } else { if (document.all("sub"+menuObj.className)) { hide_sub(document.all("sub"+menuObj.className)); } } event.cancelBubble = true; } function menu_out(menuObj) { if (!isClicked) { menuObj.style.borderColor="#cccccc"; menuObj.style.borderStyle="solid"; } } function show_sub(menuObj,menuStr) { var menuDom=eval(menuStr); move_sub(menuObj,menuStr); document.all('sub'+menuObj.className).style.visibility = "visible"; } function move_sub(menuObj,menuStr) { var menuDom=eval(menuStr); var ytop =0, xleft=0, pwidth=menuObj.style.width; if (document.all('sub'+menuObj.className)) { document.all('sub'+menuObj.className).innerHTML=build_sub(menuObj,menuStr); } for (var p=menuObj; p&&p.tagName!='BODY'; p=p.offsetParent){ xleft+=p.offsetLeft; ytop+=p.offsetTop; } if (menuObj.className=="menu") { document.all('sub'+menuObj.className).style.top = menuObj.offsetHeight + ytop; document.all('sub'+menuObj.className).style.left = xleft - 1; } else { document.all('sub'+menuObj.className).style.top = ytop; document.all('sub'+menuObj.className).style.left = xleft + menuObj.offsetWidth; } } function build_sub(menuObj,menuStr) { var builder, content, selected, more, hasChild, subStr, subOut; var menuDom=eval(menuStr); if (menuObj&&menuDom) { builder="<table class=sub border=0 cellspacing=0 cellpadding=0>"; for (var i=0; i<menuDom.childNodes.length; i++) { selected="<font face=webdings> </font>"; more="<font face=webdings> </font>"; hasChild=false; subStr=menuStr+".childNodes("+i+")"; subOut='document.all("subsub'+menuObj.className+'")'; if (menuDom.childNodes(i).firstChild) { if (menuDom.childNodes(i).hasChildNodes()) { for (var k=0; k<menuDom.childNodes(i).childNodes.length; k++) { if (menuDom.childNodes(i).childNodes(k).nodeType==1) { more="<font face=webdings> 4</font>"; hasChild=true; break; } } } if (menuDom.childNodes(i).getAttribute('toggle')=="true") { selected="<font face=webdings>a </font>"; } builder +="<tr class='sub"+menuObj.className+"' onMouseover='sub_over(this,"+'"'+(hasChild?subStr:"false")+'"' +")' onMouseout='sub_out(this,"+(hasChild?subOut:"false")+")' " +"onClick='sub_click(this,"+'"'+subStr+'",'+(hasChild?"true":"false")+")'><td id=toggle align=left>"+selected +"</td><td nowrap>"+menuDom.childNodes(i).firstChild.text+"</td><td align=right>"+more+"</td></tr>"; } else { if (menuDom.childNodes(i).nodeType==1&&menuDom.childNodes(i).getAttribute('type')=="rule") { builder+="<tr><td colspan=3><hr size=2></td></tr>"; } } } builder += "</table>"; } return builder; } function sub_click(menuObj,menuStr,hasSub) { var menuDom=eval(menuStr); if (menuDom.getAttribute('toggle')=="true") { menuDom.setAttribute('toggle','false'); } else if (menuDom.getAttribute('toggle')=="false") { menuDom.setAttribute('toggle','true'); } if (menuDom.getAttribute('action')>"") { eval(menuDom.getAttribute('action')); } if (hasSub) { event.cancelBubble = true; } } function sub_over(menuObj,menuStr) { var menuDom=eval(menuStr); if (prevSub&&prevSub.className==menuObj.className) { prevSub.style.backgroundColor = "#cccccc"; prevSub.style.color = "black"; prevSub=null; } if (menuObj) { menuObj.style.backgroundColor = "navy"; menuObj.style.color = "white"; } if (menuDom) { show_sub(menuObj,menuStr); prevSub=menuObj; } else { if (document.all('sub'+menuObj.className)) { hide_sub(document.all('sub'+menuObj.className)); } } } function sub_out(menuObj,subMenu) { if (menuObj!=prevSub) { menuObj.style.backgroundColor = "#cccccc"; menuObj.style.color = "black"; } } function hide_sub(menuObj) { if (menuObj) { menuObj.style.visibility = "hidden"; } } //--> </script></head><body bgcolor="#CCCCCC" leftmargin=30 topmargin=60 onLoad="load_menu('http://korea.internet.com/images/nid_file/menu.xml')"><script language=javascript event=onclick() for=document><!-- if (isClicked) { var menuid="menu"; current.style.borderColor="#cccccc"; current.style.borderStyle="solid"; isClicked=false; current==null; while(document.all("sub"+menuid)) { document.all("sub"+menuid).style.visibility = "hidden"; document.all("sub"+menuid).style.visibility = "hidden"; menuid="sub"+menuid; } } //--></script><div id=menu style="position:absolute; left: 0px; top: 0px; z-index: -1"></div><div id=submenu style="position:absolute; background-color: #cccccc; border: 2px outset white; margin: 1px; padding: 1px; left: 0px; top: 0px; z-index: 1; visibility: hidden"></div><div id=subsubmenu style="position:absolute; background-color: #cccccc; border: 2px outset white; margin: 1px; padding: 1px; left: 0px; top: 0px; z-index: 2; visibility: hidden"></div><br><br><br><br><center><input type=button value="View XML File" style="background-color: gray; color: blue; font-size: 14pt; font-family: arial; font-weight: bold;" onClick="document.location='http://korea.internet.com/images/nid_file/menu.xml'"></center> <!--- Javascript End Here ----><p align="center"><a href="/channel/content.asp?kid=13&nid=20045#test"><img src="/images/w_list3.gif" border="0"></a></p></body></html> 공유하기 게시글 관리 UX : 노트필기 'paran/[ Script ]' Related Articles 팝업 윈도우를 쉽게 만들어주는 HTML 코드 생성기 뉴스 속보창 역할을 할 수 있는 스크립트 다양한 기능이 지원되는 풍선도움말 스크립트 주민등록번호 검사 스크립트