1 / 20

Jeon Yong ju

jQuery Mobile #3-1. Jeon Yong ju. 1, 2 장 에서는 …. <section><header><footer> 태그를 사용한 동작원리 내부페이지 , 외부페이지 , 대화상자 네비게이션과 히스토리 , 전환. 지금까지 사용해 본 j Q uery Moblie 속성. data-role=“page/header/content/footer” data-add-back- btn =“true” data- prefetch =“true” d ata- rel =“dialog”

briar
Download Presentation

Jeon Yong ju

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. jQuery Mobile #3-1 Jeon Yong ju

  2. 1, 2장 에서는… <section><header><footer>태그를 사용한 동작원리 내부페이지, 외부페이지, 대화상자 네비게이션과히스토리, 전환 지금까지 사용해 본 jQueryMoblie속성 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”

  3. jQuery플러그인과 위젯 jQuery플러그인과 위젯이란? 개발자가 본인의 필요에 맞게 작성한 사용자 정의 함수 (커스텀메서드) 쉽게 말하면, 단순한 형태 – 플러그인, 복잡한 형태 - 위젯 활용 원리? 커스텀메서드 작성-> 마크업 작성 -> 커스텀메서드 적용

  4. jQuery플러그인과 위젯 활용예시 – 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(){ varsame = this.checked; (중략) $(‘#billingAddress input’).setReadOnly(same); }) }) </script> </head> <body> 마크업작성 </body> </html> • jQueryMobile의 동작 원리

  5. 2. 목록 뷰- 1 기본적인 목록 뷰 기본적인 목록 뷰data-role=“listview” <h3>Unordered List</h3> <ul data-role="listview"> <li>Item</li> <li>Item</li> <li>Item</li> </ul> <h3>Ordered List</h3> <ol data-role="listview"> <li>Item</li> <li>Item</li> <li>Item</li> </ol>

  6. 2. 목록 뷰- 1 기본적인 목록 뷰 목록 뷰 버튼 – <a>속성 추가 <h3>Unordered List</h3> <ul data-role="listview"> <li><a herf="#">Item</a></li> <li><a herf="#">Item</a></li> <li><a herf="#">Item</a></li> </ul> <h3>Ordered List</h3> <ol data-role="listview"> <li><a herf="#">Item</a></li> <li><a herf="#">Item</a></li> <li><a herf="#">Item</a></li> </ol>

  7. 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><a herf="#">Item</a></li> <li><a herf="#">Item</a></li> <li data-role="list-divider">Stuff</li> <li><a herf="#">Item</a></li> <li><a herf="#">Item</a></li> <li data-role="list-divider">Miscellaneus</li> <li><a herf="#">Item</a></li> <li><a herf="#">Item</a></li> <li><a herf="#">Item</a></li> (중략) </ul>

  8. 2. 목록 뷰- 2 발전된 목록 뷰 중첩된 목록 <ul data-role="listview"> <li>Restaurants <ul> <li>French <ul> <li>Le Central</li> <li>Bistro Vandome</li> <li>Antonie's</li> </ul> </li> <li>Cajun an Creole <ul> (중략) </ul> </li> </ul>

  9. 2. 목록 뷰- 2 발전된 목록 뷰 목록 뷰 내 분할 버튼 - 목록 아이템 요소 안에 두개의<a>요소 <ul data-role="listview"> <li>Restaurants <ul> <li>French <ul> <li> <a href="#">Le Central</a> <a href="#">Make Reservations</a> </li> </ul> (후략)

  10. 2. 목록 뷰- 2 발전된 목록 뷰 썸네일 thumbnail 과 아이콘 - 엄지손톱, 미리보기용 이미지 <ul data-role="listview"> <li>Restaurants <ul> <li> <a href="#"> <imgsrc="images/icons/icon-french.png" alt="French flag icon“ class="ui-li-icon">French</a> <ul> <li> <imgsrc="images/logo-generic.png" alt="Le Central logo"> Le Central</a> <a href="#">Make Reservations</a> </li> </ul>(후략)

  11. 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="#"> <imgsrc="images/icons/icon-french.png" alt="French flag icon“ class="ui-li-icon">French</a> <ul> <li> <imgsrc="images/logo-generic.png" alt="Le Central logo"> Le Central</a> <a href="#">Make Reservations</a> </li> (후략)

  12. 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>

  13. 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>

  14. 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> (후략)

  15. 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>

  16. 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” 버튼의 너비를 글자에 맞춤

  17. 4. 버튼 – 1 버튼 컨트롤 그룹 버튼 컨트롤 그룹 - 버튼컨테이너에 넣고 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”> <a href="#" data-role="button">Yes</a> <a href="#" data-role="button">No</a> <a href="#" data-role="button">Cancel</a> </div> </div> * data-type=“horizontal” 가로로 표시(인라인 적용)

  18. 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> </div>

  19. 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이 알아서함.

  20. Thank you jQuery Mobile #3-1

More Related