jQuery Mobile #3-1 Jeon Yong ju
1, 2장 에서는… <section><header><footer>태그를 사용한 동작원리 내부페이지, 외부페이지, 대화상자 네비게이션과 히스토리, 전환 지금까지 사용해 본 jQuery Moblie 속성 data-role=“page/header/content/footer” data-add-back-btn=“true” data-prefetch=“true” data-rel=“dialog” data-transition=“fade/flip/pop/slide/slidedown/sildeup” data-direction=“reverse”
jQuery 플러그인과 위젯 jQuery 플러그인과 위젯이란? 개발자가 본인의 필요에 맞게 작성한 사용자 정의 함수 (커스텀 메서드) 쉽게 말하면, 단순한 형태 – 플러그인, 복잡한 형태 - 위젯 활용 원리? 커스텀 메서드 작성 -> 마크업 작성 -> 커스텀 메서드 적용
jQuery 플러그인과 위젯 jQuery Mobile의 동작 원리 활용예시 – setReadOnly라는 사용자 정의 함수 활용 jquery.setreadonly.js Index.html (function($){ $.fn.setReadOnly = function(readonly){ return this.filter(‘input:text’) .attr(‘readonly’, readonly) .css(‘opacity’, readonly? 0.5 : 1.0) } })(jquery); <html> <head> 중략 <script type=“text/javascript” src=“jquery.js”></script> <script type=“text/javascript” src=“jquery.setreadonly.js”> </script> <script type=“text/javascript”> $(function(){ $(‘#sameAddressControl’).click(function(){ var same = this.checked; (중략) $(‘#billingAddress input’).setReadOnly(same); }) </head> <body> 마크업작성 </body> </html> jQuery Mobile의 동작 원리
2. 목록 뷰 - 1 기본적인 목록 뷰 기본적인 목록 뷰 data-role=“listview” <h3>Unordered List</h3> <ul data-role="listview"> <li>Item</li> </ul> <h3>Ordered List</h3> <ol data-role="listview"> </ol>
2. 목록 뷰 - 1 기본적인 목록 뷰 목록 뷰 버튼 – <a>속성 추가 <h3>Unordered List</h3> <ul data-role="listview"> <li><a herf="#">Item</a></li> </ul> <h3>Ordered List</h3> <ol data-role="listview"> </ol>
2. 목록 뷰 - 1 기본적인 목록 뷰 목록 뷰 구분자 – data-role=“list-divider” <h3>Unordered List</h3> <ul data-role="listview"> <li data-role="list-divider">Things</li> <li><a herf="#">Item</a></li> <li data-role="list-divider">Stuff</li> <li data-role="list-divider">Miscellaneus</li> (중략) </ul>
2. 목록 뷰 - 2 발전된 목록 뷰 중첩된 목록 <ul data-role="listview"> <li>Restaurants <ul> <li>French <li>Le Central</li> <li>Bistro Vandome</li> <li>Antonie's</li> </ul> </li> <li>Cajun an Creole (중략)
2. 목록 뷰 - 2 발전된 목록 뷰 목록 뷰 내 분할 버튼 - 목록 아이템 요소 안에 두개의 <a>요소 <ul data-role="listview"> <li>Restaurants <ul> <li>French <li> <a href="#">Le Central</a> <a href="#">Make Reservations</a> </li> </ul> (후략)
2. 목록 뷰 - 2 발전된 목록 뷰 썸네일 thumbnail 과 아이콘 - 엄지손톱, 미리보기용 이미지 <ul data-role="listview"> <li>Restaurants <ul> <li> <a href="#"> <img src="images/icons/icon-french.png" alt="French flag icon“ class="ui-li-icon">French</a> <img src="images/logo-generic.png" alt="Le Central logo"> Le Central</a> <a href="#">Make Reservations</a> </li> </ul>(후략)
2. 목록 뷰 - 2 발전된 목록 뷰 Count Bubble – 숫자를 표시하는 비누방울 모양 <ul data-role="listview"> <li data-role="list-divider">Items<span class="ui-li-count">10</span></li> <li><a href="#">Restaurants</a><span class="ui-li-count">9</span> <ul> <li> <a href="#"> <img src="images/icons/icon-french.png" alt="French flag icon“ class="ui-li-icon">French</a> <img src="images/logo-generic.png" alt="Le Central logo"> Le Central</a> <a href="#">Make Reservations</a> </li> (후략)
2. 목록 뷰 – 3 이면에서 목록 뷰 갱신 – listview 위젯의 ‘refresh’메서드 사용 <script> $(’ul.twitter-feed’).listview(); //목록 뷰 초기화 var updateTweets = function(){ var strNewTweetsHtml = getNewTweets(); $(‘ul.tweeter-feed’).prepend(strNewTweetsHtml).listview(‘’refresh’’); //트윗 더 가져와서 ul.tweeter-feed목록 앞에 붙인 후 갱신(refresh) } </script>
3. 툴바 – 1 내비게이션 바 기본 내비게이션 바 – <nav data-role=“navbar> <section id="page1" data-role="page"> <header data-role="header"> <h1>jQuery Mobile</h1> <nav data-role="navbar"> <a href="#" class="ui-btn-active">First</a> <a href="#">Second</a> <a href="#">Third</a> <a href="#">Fourth</a> <a href="#">Fifth</a> </nav> </header> <div data-role="content"> <h3>Content</h3> </div> <footer data-role="footer"> <h1>O'reilly</h1> </footer> </section>
3. 툴바 – 1 내비게이션 바 버튼의 너비를 같게 – <ul>안에 담기 <section id="page1" data-role="page"> <header data-role="header"> <h1>jQuery Mobile</h1> <nav data-role="navbar"> <ul> <li><a href="#">First</a></li> <li><a href="#">Second</a></li> <li><a href="#">Third</a></li> <li><a href="#">Fourth</a></li> <li><a href="#">Fifth</a></li> </ul> </nav> </header> (후략)
3. 툴바 – 2 header와 footer의 위치조절 data-position=“___________”- 74~6쪽 예제 확인 Standard - 기본값 Fixed – header와 footer의 위치가 고정됨 Standard – 스크롤 시 header와 footer를 숨기고, 스크롤을 멈추면 보임 <section id="page1" data-role="page"> <header data-role="header“ data-position=“fixed”> <h1>jQuery Mobile</h1> <nav data-role="navbar"> <ul> <li><a href="#">First</a></li>
4. 버튼 jQuery mobile이 스타일 적용 후 버튼으로 바꾸는 경우 1. input 태그의 버튼, 2. button 태그, 3. data-role=“button”속성의 a 요소 <div data-role="content"> <h3>Buttons</h3> <a href="#" data-role="button">Link-Based button</a> <input type="submit" value="submit" data-inline="true"> <input type="reset" value="reset" data-inline="true"> </div> * data-inline=“true” 버튼의 너비를 글자에 맞춤
4. 버튼 – 1 버튼 컨트롤 그룹 버튼 컨트롤 그룹 - <div data-role="content"> 버튼 컨테이너에 넣고 data-role=“controlgroup” <div data-role="content"> <h3>Control Group Buttons</h3> <div data-role="controlgroup"> -컨테이너 <a href="#" data-role="button">Yes</a> <a href="#" data-role="button">No</a> <a href="#" data-role="button">Cancel</a> </div> <div data-role="controlgroup“ data-type=“horizontal”> * data-type=“horizontal” 가로로 표시(인라인 적용)
4. 버튼 – 2 버튼 아이콘 data-icon=“ ______”- 모양 data-iconpos=“______”- 위치 80쪽 표 3-1,2 data-icon 속성값, data-iconpos 속성값 확인 <div data-role="content"> <h3>Control Group Buttons</h3> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="home“ data-iconpos=“left”>Home</a> <a href="#" data-role="button" data-icon="gear">Config</a> <a href="#" data-role="button" data-icon="search">Search</a> </div>
4. 버튼 – 커스텀 아이콘 커스텀 아이콘 사용 절차 1. 아이콘 이미지 만들기 – 18 × 18 pixel, png 형식 권장 2. 나만의 CSS에 아이콘 이름과 이미지의 url 연결 - 단, 아이콘 이름은 기본 data-icon 속성값과 반드시 달라야 함. .ui-icon-mymail { background-image:url(images/icons/icon-mail.png); } 3. data-icon, data-iconpos 속성을 사용하여 적용 - 나머지 작업은 jQuery Mobile이 알아서함.
Thank you jQuery Mobile #3-1