jquery, ajax, xml 활용한 도움말 layer 보여주기
제목 : jquery, ajax, xml 활용한 도움말 layer 보여주기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery, xml, layer, popup, help page</title>
<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
<!--
//매뉴얼(Start)
$(function(){
var MainDepth = "0"; //1 depth 메뉴 코드
var SubDepth = "0"; //2 depth 메뉴 코드
$( "#LayerHelp" ).click(function(){
$( "#guide_pop" ).toggle();
});
var help_title = "";
var help_subject = "";
$.ajax({
//contentType을 지정해줘야 합니다.
contentType : "application/xml",
url : "help.xml",
success : function(xml) {
//xml을 jQuery로 감싸고 sample 노드를 찾 은 후 name 노드의 값을 반환
help_title = $(xml).find("Items").find("Item[MainDepth='"+ MainDepth +"'][SubDepth='"+ SubDepth +"']").find("HelpTitle").text();
help_subject = $(xml).find("Items").find("Item[MainDepth='"+ MainDepth +"'][SubDepth='"+ SubDepth +"']").find("HelpContent").text();
$( "#guide_title" ).html(help_title);
$( "#guide_content" ).html(help_subject);
},
error : function() {
alert("에러 발생");
}
});
$( "#LayerClose" ).click(function(){
$( "#guide_pop" ).toggle();
});
});
//-->
</script>
</head>
<body>
<p>1 depth, 2 depth 의 메뉴 코드에 따라 해당페이지에 도움말 보여주기<br/>
jquery, ajax, xml 사용함<br/><br/>
xml item attribute 를 추적하는 방식으로 처리</p>
<div><a href="#" id="LayerHelp">도움말보기</a></div>
<!-- 도움말 팝업 -->
<div id="guide_pop" style="display:none;">
<div class="wrap">
<h1>•<span id="guide_title"></span></h1>
<h2><span id="guide_content"></span></h2>
<input type="button" id="LayerClose" value="close" />
</div>
</div>
<!-- //도움말 팝업 -->
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<xmlHelp>
<Items>
<Item MainDepth="0" SubDepth="0">
<HelpTitle><![CDATA[도움말 제목입니다.]]></HelpTitle>
<HelpContent><![CDATA[도움말 설명글입니다.<br/>( 0,0 메뉴코드 )]]></HelpContent>
</Item>
<Item MainDepth="0" SubDepth="1">
<HelpTitle><![CDATA[도움말 제목입니다.]]></HelpTitle>
<HelpContent><![CDATA[도움말 설명글입니다.<br/>( 0,1 메뉴코드 )]]></HelpContent>
</Item>
<Item MainDepth="0" SubDepth="2">
<HelpTitle><![CDATA[도움말 제목입니다.]]></HelpTitle>
<HelpContent><![CDATA[도움말 설명글입니다.<br/>( 0,2 메뉴코드 )]]></HelpContent>
</Item>
<Item MainDepth="1" SubDepth="0">
<HelpTitle><![CDATA[도움말 제목입니다.]]></HelpTitle>
<HelpContent><![CDATA[도움말 설명글입니다.<br/>( 1,0 메뉴코드 )]]></HelpContent>
</Item>
<Item MainDepth="1" SubDepth="1">
<HelpTitle><![CDATA[도움말 제목입니다.]]></HelpTitle>
<HelpContent><![CDATA[도움말 설명글입니다.<br/>( 1,1 메뉴코드 )]]></HelpContent>
</Item>
</Items>
</xmlHelp>
내용 : admin, 관리자 페이지 만들때, 도움말 layer 띄워주기를 클라이언트에게 요청받았다. DB사용안하고 처리해달라는...
그래서, xml 파일 생성 후, 해당 메뉴 코드별(메뉴는 1,2 depth) 도움말을 적고, 그것을 웹페이지에서 호출하는 형식으로 개발함.
뭐 별거 아니긴하지만, 구조 땜시 약간의 생각이 필요한...
1 depth code, 2 depth code 를 페이지별 부여하여, 그 값을 xml attribute에 넣고 그 값을 호출하는 ajax jquery.
var MainDepth = "0"; //1 depth 메뉴 코드
var SubDepth = "0"; //2 depth 메뉴 코드
두 변수의 값을 바꾸면 xml에서 도움말 title, subject 를 끌어온다.
layer show, hide 는 toggle을 사용함.
실제 개발할때는 css 로 하여 이쁘게 하였으나, 소스 짜르기도 귀찮고 하여, 테스트 페이지만 공유~
help_xml.zip출처 : 광고 좀 클릭해주세요. 보시는 건 많이들 보시는데...댓글도 없궁. 그냥 퍼가기만 하시니....