웹퍼블리셔 활용 8일차 - 스토리지+로드 예제 1, 2, 3

2021bong 2021. 10. 21. 19:05

페이지에 따라 메뉴 활성화

<!--index.html-->
<body>
  <header>
    <nav>
      <a href="index.html">HOME</a>
      <a href="about.html">ABOUT</a>
      <a href="work.html">WORK</a>
    </nav>
  </header>
  <main>
    <h2>index page</h2>
  </main>
  <footer>ⓒ2021.Copyright</footer>
</body>

<!--about.html-->
<body>
  <header>
    <nav>
      <a href="index.html">HOME</a>
      <a href="about.html">ABOUT</a>
      <a href="work.html">WORK</a>
    </nav>
  </header>
  <main>
    <h2>about page</h2>
  </main>
  <footer>ⓒ2021.Copyright</footer>
</body>

<!--work.html-->
<body>
  <header>
    <nav>
      <a href="index.html">HOME</a>
      <a href="about.html">ABOUT</a>
      <a href="work.html">WORK</a>
    </nav>
  </header>
  <main>
    <h2>work page</h2>
  </main>
  <footer>ⓒ2021.Copyright</footer>
</body>

localStorage 사용

let idx = localStorage.idx; // localStorage 사용

$('header nav a').eq(idx).css('color','red');

$('header nav a').on('click', function(e){
  localStorage.idx = $(this).index();
});

파일을 나누고 로드해서 사용하기

(리액트 컴포넌트 파일나눠서 관리하는 형식이랑 비슷한듯)

<!--index.html-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script defer src="./common.js"></script>
  <title>Document</title>
</head>

<body>
  <header>

  </header>
  <main>
    <h2>index page</h2>
  </main>
  <footer>

  </footer>
    
</body>

</html>

<!--inc.html-->
<header>
  <nav>
    <a href="index.html">HOME</a>
    <a href="about.html">ABOUT</a>
    <a href="work.html">WORK</a>
  </nav>
</header>

<footer>
  <div>
  ⓒ2021.Copyright
  </div>
</footer>

// inc.html 파일을 load
$('header').load('inc.html header nav');
$('footer').load('inc.html footer');

페이지에 맞게 메뉴 활성화 추가

인덱스 번호를 받아오기

$('header').load('inc.html header nav'); // load는 비동기 방식
$('footer').load('inc.html footer');

setTimeout(function(){ // load 때문에 setTimeout 설정, setTimeout도 비동기 방식
  $('header nav a').on('click',function(){
    localStorage.idx = $(this).index();
  })
}, 500);

load가 언제 끝날지 알 수 없는데 setTimeout을 사용하는 건 적절하지 않음

콜백함수를 사용

$('header').load('inc.html header nav',menu); // load가 끝나면 menu를 실행시켜라
$('footer').load('inc.html footer');

function menu(){
  $('header nav a').on('click',function(){
    localStorage.idx = $(this).index();
  })
}

$('header').load('inc.html header nav',menu);
$('footer').load('inc.html footer');

function menu(){
  $('header nav a').eq(localStorage.idx).css('color','red'); // index대로 색상 변경
  $('header nav a').on('click',function(){
    localStorage.idx = $(this).index();
  })
}

페이지 내용도 로드 되도록 하기

<!--index.html-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script defer src="./common.js"></script>
  <title>Document</title>
</head>

<body>
  <header>

  </header>
  <main>
  </main>
  <footer>

  </footer>
    
</body>

</html>

<!--main.html-->
<body>
  <h2>index page</h2>
</body>

<!--about.html-->
<body>
  <h2>about page</h2>
</body>

<!--work.html-->
<body>
  <h2>work page</h2>
</body>

<!--inc.html-->
<header>
  <nav>
    <a href="main.html">HOME</a>
    <a href="about.html">ABOUT</a>
    <a href="work.html">WORK</a>
  </nav>
</header>

<footer>
  <div>
  ⓒ2021.Copyright
  </div>
</footer>

$('header').load('inc.html header nav',menu); // header load
$('footer').load('inc.html footer'); // footer load
$('main').load('main.html h2'); // main load

function menu(){
  $('header a').on('click', function(e){
    e.preventDefault(); // load되므로 a태그 속성 막기

    let path = $(this).attr('href'); // a태그의 href속성을 가져다가
    $('main').load(path) // load 해라
    .hide().fadeIn(1000); // 숨겼다가 보이게 효과

    let i = $(this).index(); // this의 index 받아오기
    $('header a')
    .css('color','black') // a태그가 검정색이다가
    .eq(i).css('color','red'); // 클릭한 a태그만 빨간색으로
  });
}
// href값을 받아오기 때문에 localStorage를 쓸 필요가 없음

728x90

저작자표시 (새창열림)