JQTouch - 메뉴 생성, 링크 걸기

안드로이드 웹앱 국내도서>컴퓨터/인터넷 저자 : 조나단 스타크(Jonathan Stark) / 변정훈역 출판 : 한빛미디어 2011.07.29 상세보기

Opening by jurvetson

이제 해야할 것은 메뉴를 다듬는 일입니다.

index.html 파일을 보시면 아래와 같이 메뉴

<div class="scroll"> 아래 초기화면에서 보이는 메뉴들이 나와있습니다. 

최대한 코딩없이 가기 위해서 이 중 한 줄을 카피하여 최상단에 붙여넣은 다음 수정합니다.

타이틀을 News 로 바꾸고 링크를 #news 로 걸어둡니다. 

 <li class="arrow"><a href="#news">News<small class="counter">4</small></a></li>

그러면 링크는 어떻게 걸어야 하는지 살펴보겠습니다.

1) 아래와 같이 외부 링크를 걸거나, 

      <h2>External Links</h2>

                    <ul class="rounded">

                    <li class="forward"><a target="_blank" href="http://twitter.com/#!/jqtouch">Twitter</a></li>

                        <li class="forward"><a target="_blank" href="http://github.com/senchalabs/jQTouch">GitHub</a></li>

                    </ul>

2) 계층구조를 이용해서 파일을 걸거나

                    <ul class="rounded">

                        <li class="forward"><a target="_blank" href="../ext_location/index.html">Geo Location</a></li>

                        <li class="forward"><a target="_blank" href="../ext_offline/index.html">Offline Utility</a></li>

                        <li class="forward"><a target="_blank" href="../ext_floaty/index.html">Floaty Bar</a></li>

                        <li class="forward"><a target="_blank" href="../ext_autotitles/index.html">Auto Titles</a></li>

                    </ul>

3) 아니면 현재 index.html 에서 사용하고 있듯이 index.html 파일내에서 해결하는 방식이 있겠습니다.

                    <ul class="rounded">

                        <li class="arrow"><a href="#news">News<small class="counter">4</small></a></li>

                        <li class="arrow"><a href="#ajax">About<small class="counter">4</small></a></li>

                        <li class="arrow"><a href="#ui">User Interface <small class="counter">5</small></a> </li>

                        <li class="arrow"><a href="#animations">Animations <small class="counter">7</small></a></li>

                        <li class="arrow"><a href="#ajax">AJAX <small class="counter">4</small></a></li>

                        <li class="arrow"><a href="#callbacks">Events <small class="counter">4</small></a></li>

                        <li class="arrow"><a href="#extensions">Extensions <small class="counter">4</small></a> </li>

                        <li class="arrow"><a href="#demos">Demos <small class="counter">2</small></a></li>

                        <li class="arrow"><a href="#themes">Themes <small class="counter">2</small></a></li>

                    </ul>

마찬가지로 기존에 걸려있는 <a href="#ajax"> 가 어디를 가리키는지 살펴봅시다.

검색창(Ctrl+F)에 div id="ajax" 라고 치면 위의 링크의 도착점이 검색됩니다. 

살펴보면 타이틀이 있고 back 버튼, 그리고 하위 메뉴가 보입니다.

            <div id="ajax">

                <div class="toolbar">

                    <h1>AJAX</h1>

                    <a class="back" href="#home">Home</a>

                </div>

                <div class="scroll">

                    <ul class="rounded">

                        <li class="arrow"><a href="#ajax_post">POST Form Example</a></li>

                        <li class="arrow"><a href="ajax.html">GET Example</a></li>

                        <li class="arrow"><a href="ajax_long.html">Long GET Example</a></li>

                        <li class="arrow"><a href="#callback">With Callback</a></li>

                    </ul>

                </div>

            </div>

위의 News 링크를 걸기위해서, 위의 내용을 카피하여 아래와 같이 <div id="ajax"> 상단에 붙입니다. 그리고 div id 를 "news" 로 수정하고 타이틀도 수정합니다. 물론 아래 하위 메뉴도 수정해야겠지요. 그러니깐 아래 보이는 파란색 박스 안의 내용을 고치면 되겠습니다.

저장 후 새로고침을 해보면 News 메뉴가 생겼고 클릭해보면 오른쪽과 같이 나오고 Home 버튼을 통해 다시 돌아갈 수 있습니다. 

 

안드로이드 웹앱 국내도서>컴퓨터/인터넷 저자 : 조나단 스타크(Jonathan Stark) / 변정훈역 출판 : 한빛미디어 2011.07.29 상세보기