3초기억력

jquery, ajax, xml 활용한 도움말 layer 보여주기 본문

코딩_jquery

jquery, ajax, xml 활용한 도움말 layer 보여주기

잠수콩 2013. 1. 22. 10:43
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.



제목 :  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>&bull;<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


출처 : 광고 좀 클릭해주세요. 보시는 건 많이들 보시는데...댓글도 없궁. 그냥 퍼가기만 하시니....


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

'코딩_jquery' 카테고리의 다른 글

랭킹 scroll. nth-child 사용한 css 제어  (0) 2013.03.28
반응형 테이블, 소스코드 첨부  (0) 2013.03.28
jquery, jstree 사용. 자식노드 선택시 부모노드 선택하는 스크립트  (0) 2013.01.15
jquery - editor : tinymce editor ( jquery 용 )  (0) 2011.03.25
jquery - detach() : 줄 삭제(버퍼에 남음?)  (0) 2011.03.25
'코딩_jquery' Related Articles more
Comments