정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

JavaScript 기반 연속 탐색 시스템을 만드는 방법

쉽고 간편한 JavaScript를 사용하여 단일 파일로 정의되는 탐색 시스템(예: 왼쪽 탐색 막대)을 만듭니다.

크기 조절 가능한 웹 사이트의 경우 연결된 CSS 스타일시트(<link rel="stylesheet" type="text/css" href="mystyle.css" />)를 사용하면 전체 사이트의 스타일이 단일 파일로 정의된다는 주요 이점이 있습니다. 예를 들어 <p> 요소에 포함된 모든 텍스트의 글꼴을 Calibri로 색을 #333으로 지정하려는 경우 파일 하나(예: mystyle.css)만 변경하면 됩니다. 그러면 변경 사항이 전체 사이트에 계단식 배열됩니다(모든 페이지가 mystyle.css에 연결된다고 가정).

마찬가지로 크기 조절 가능한 웹 사이트에서 서버 쪽 기술(예: SSI[Server-Side Includes])이 적절하지 않거나 사용할 수 없는 경우 간단한 JavaScript 기반 연속 기술을 사용하여 단일 파일(예: leftNav.js)로 정의되는 탐색 시스템을 만들 수 있습니다. 그런 파일이 사이트의 페이지에 연결된 경우 leftNav.js에 정의된 탐색 시스템이 그런 모든 페이지에 표시됩니다. 탐색 시스템을 변경하려면 사이트의 모든 페이지에서 하드코드된 태그를 변경하는 대신 .js 파일만 변경하면 됩니다.

중요  이 기술은 편리하지만 사용자가 브라우저에서 JavaScript를 사용하지 않도록 설정한 경우에는 실패합니다. 이 경우 그런 JavaScript 기반 탐색을 사용하는 웹 사이트는 탐색 시스템을 사용하지 않고 렌더링됩니다.

이 JavaScript 기반 탐색 시스템을 설명하려면 다음 기존 페이지별 왼쪽 탐색 시스템(영문)(일부 HTML5 시맨틱 요소[영문] 사용)을 고려하세요.

기존 왼쪽 탐색


<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Traditional Left Nav</title>
<style>
  #leftNav {
    border-right: 1px grey dashed;
    width: 9.5em;
    margin-left: -2em;
  }
	
  #leftNav ul {
    list-style: none;
  }
	
  #leftNav ul ul li {
    margin-left: -1.5em;
  }	
</style>
</head>

<body>
  <nav id="leftNav">
    <ul id="outerUL">
      <li id="home"><a href="home.html">Home</a></li>
      <li id="portfolio"><a href="portfolio.html">Portfolio</a>
        <ul id="portfolioUL">
          <li id="thumbnails"><a href="thumbnails.html">Thumbnails</a></li>
          <li id="slideShow"><a href="slideShow.html">Slide Show</a></li>
        </ul>
      </li>
      <li id="tagCloud"><a href="tagCloud.html">Tag Cloud</a></li>
    </ul>
  </nav>
  <section>
    <!-- Page content here. -->
  </section>
</body>
  
</html>


이 마크업은 다음과 같이 렌더링됩니다.

기존 왼쪽 탐색 스크린샷

목표는 왼쪽 탐색 태그를 JavaScript 파일에 배치하고 다음과 같이 왼쪽 탐색이 필요한 페이지에 연결하는 것입니다.


<body>
  <nav id="leftNav"><!-- leftNav.js injected nav system. --></nav>
  <section>
    <!-- Page content here. -->
  </section>
  <script src="leftNav.js"></script>
</body>

예를 보면 알 수 있듯이 탐색 관련 태그는 <nav id=”leftNav”> 요소만 남아 있습니다. 나머지 탐색 태그는 leftNav.js에서 코드를 통해 DOM에 추가됩니다.

그런 중첩된 탐색 시스템을 빌드하는 데 상대적으로 간단한 2개의 JavaScript 함수만 필요합니다.


function appendUl(append_to_id, ul_id) {
  var ul = document.createElement('ul');
  ul.id = ul_id;
  
  var appendTo = document.getElementById(append_to_id);
  appendTo.appendChild(ul);
}


function appendLiA(append_to_id, li_id, a_href, a_text) {
  var a = document.createElement('a');
  a.href = a_href;
  a.textContent = a_text;
  
  var li = document.createElement('li');
  li.id = li_id;
  li.appendChild(a);
  
  var appendTo = document.getElementById(append_to_id);
  appendTo.appendChild(li);
}

appendUl(append_to_id, ul_id) 함수는 ID가 ul_id<ul> 요소를 만듭니다. 그런 다음 이 <ul> 요소는 ID가 append_to_id인 요소에 추가됩니다. 예를 들어 appendUl('leftNav', 'outerUL')<ul id="outerUL">을 만들어 ID가 leftNav인 요소에 추가합니다. 즉, 다음과 같은 DOM 구조를 나타냅니다.


<nav id="leftNav">
  <ul id="outerUL">
  </ul>
</nav>

약간 복잡하지만 appendLiA(append_to_id, li_id, a_href, a_text)<a><li>의 두 요소를 만듭니다. <a> 요소의 href 특성은 a_href로 설정되고 내부 텍스트는 a_text로 설정됩니다. <li> 요소의 ID는 li_id이며 <a> 요소를 포함합니다. 그런 다음 <li><a> 요소는 ID가 append_to_id인 요소에 추가됩니다. 이전 DOM 구조(즉, 이전 <nav id="leftNav"><ul id="outerUL"> 태그)를 가정할 때 appendLiA('outerUL', 'home', 'home.html', 'Home')를 호출하면 결과는 다음과 같습니다.


<nav id="leftNav">
  <ul id="outerUL">
    <li id="home"><a href="home.html">Home</a></li>
  </ul>
</nav>

이제 다음 왼쪽 탐색 태그(외부 <nav> 요소 제외)를 모두 빌드하려면


<nav id="leftNav">
  <ul id="outerUL">
    <li id="home"><a href="home.html">Home</a></li>
    <li id="portfolio"><a href="portfolio.html">Portfolio</a>
      <ul id="portfolioUL">
        <li id="thumbnails"><a href="thumbnails.html">Thumbnails</a></li>
        <li id="slideShow"><a href="slideShow.html">Slide Show</a></li>
      </ul>
    </li>
    <li id="tagCloud"><a href="tagCloud.html">Tag Cloud</a></li>
  </ul>
</nav>

두 함수를 다음 순서로 호출합니다.


appendUl('leftNav', 'outerUL'); 
appendLiA('outerUL', 'home', 'home.html', 'Home');
appendLiA('outerUL', 'portfolio', 'portfolio.html', 'Portfolio');
appendUl('portfolio', 'portfolioUL'); 
appendLiA('portfolioUL', 'thumbnails', 'thumbnails.html', 'Thumbnails');
appendLiA('portfolioUL', 'slideShow', 'slideShow.html', 'Slide Show');
appendLiA('outerUL', 'tagCloud', 'tagCloud.html', 'Tag Cloud');

이 코드 예제의 네 번째 줄인 appendUl('portfolio', 'portfolioUL')는 미리 보기 및 슬라이드 쇼의 중첩을 허용합니다.

기존 왼쪽 탐색 스크린샷

따라서 웹 사이트 페이지에 왼쪽 탐색 시스템을 삽입하려면 다음 전체 예제(영문)와 같이 <script src=”leftNav.js”></script><body> 태그 바로 앞에 추가하면 됩니다.

연속 왼쪽 탐색


<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Cascading Left Nav</title>
<style>
  #leftNav {
    border-right: 1px grey dashed;
    width: 9.5em;
    margin-left: -2em;
	}
	
  #leftNav ul {
    list-style: none;
	}
	
  #leftNav ul ul li {
    margin-left: -1.5em;
	}	
</style>
</head>

<body>
  <nav id="leftNav"><!-- leftNav.js injected nav system. --></nav>
  <section>
    <!-- Page content here. -->
  </section>
  <script src="leftNav.js"></script>
</body>
  
</html>

appendUlappendLiA를 이해했다면 leftNav.js의 나머지 내용은 간단합니다.

leftNav.js


window.addEventListener('load', leftNav, false);

function leftNav() {
  appendUl('leftNav', 'outerUL'); 
  appendLiA('outerUL', 'home', 'home.html', 'Home');
  appendLiA('outerUL', 'portfolio', 'portfolio.html', 'Portfolio');
  appendUl('portfolio', 'portfolioUL'); 
  appendLiA('portfolioUL', 'thumbnails', 'thumbnails.html', 'Thumbnails');
  appendLiA('portfolioUL', 'slideShow', 'slideShow.html', 'Slide Show');
  appendLiA('outerUL', 'tagCloud', 'tagCloud.html', 'Tag Cloud'); 
  
  function appendUl(append_to_id, ul_id) {
  /* 
    Creates a <ul> element whose ID is ul_id. This <ul> element is then 
    appended to the element whose ID is append_to_id.
  */
    var ul = document.createElement('ul');
    ul.id = ul_id;
	  
    var appendTo = document.getElementById(append_to_id);
    appendTo.appendChild(ul);
  } // appendUl
	
  function appendLiA(append_to_id, li_id, a_href, a_text) {
  /* 
    Creates two elements, an <a> element and an <li> element. The <a> element's
    href attribute is set to a_href and its inner text to a_text. The <li> 
    element's ID becomes li_id and contains the <a> element. The <li><a> 
    elements are then appended to the element whose ID is append_to_id.
  */
    var a = document.createElement('a');
    a.href = a_href;
    a.textContent = a_text;
	  
    var li = document.createElement('li');
    li.id = li_id;
    li.appendChild(a);
	  
    var appendTo = document.getElementById(append_to_id);
    appendTo.appendChild(li);
  } // appendLiA 	 
} // leftNav

태그에서 알 수 있듯이 leftNav 함수에 의한 appendUlappendLiA 줄 바꿈으로 인해서만 복잡도가 증가했으며 leftNavwindow.addEventListener('load', leftNav, false)를 통해 페이지가 완전히 로드된 이후에만 호출됩니다.

중요 정보를 고려하여 이제 appendUlappendLiA에 대한 적절한 호출을 여기에 표시된 순서대로 함께 연결하여 사용자 웹 사이트에 대한 거의 모든 연속 탐색 시스템을 빌드할 수 있습니다.

관련 항목

Contoso 이미지 사진 갤러리
Internet Explorer 10 샘플 및 자습서

 

 

표시:
© 2014 Microsoft