총 게시물 62건, 최근 0 건 안내 RSS 글쓰기
이전글  다음글  목록 글쓰기
[강좌]

1. JQuery Mobile - 개발환경 설정 및 Hello AndroidSide - build: Beta 3 2011.9.17

글쓴이 : 집게사장 날짜 : 2011-09-17 (토) 03:21 조회 : 21250
글주소 : http://www.androidside.com/B57/8
 
  알지오 JQUERY
IT전문교육 실무중심 JQUERY, 원격평생교육시설 정식인가.
www.alzio.co.kr/
  JQUERY 컴스쿨닷컴
JQUERY 인강만으로 합격가능, 단기완성, 무한반복 전 강좌 스마트폰 학습가능
www.컴스쿨.com
  SBS아카데미컴퓨터학원손일구
방학특강 40 % 할인, 취업포트폴리오, 수강료조회, 국비지원JQUERY
daejeon-sbsedu.com
신청하기


안녕하세요 ^_^ 집게사장입니다 ..

하하 그럼 가볍게 시작하겟습니다 ^^


1. JQuery Mobile - 개발환경 설정 및 Hello AndroidSide - build: Beta 3  2011.9.17

build: Beta 3  2011.9.17 - 현재 최신버전이 Beta3 정식 버전이 아니기때문에 
조금씩 틀려질수도 있습니다. ^_^ 

-1. JQM ( JQuery Mobile ) lib ( 라이브러리 ) download
1.1    주소줄    : http://jquerymobile.com 접속
1.2    상단 바   : Download 클릭


-2 query.mobile-1.0b3.zip  File 의 역활
*.js       file = useful for debugging (디버깅에 유용한 File)
*.min.js  file = ready to deploy file 
-----------------------------------------------------------------------------------------
*.js      file = Widget 생성, Event listener 등록, API 활성화 정의.

*.css  file = JQuery Mobile Page 요소의 Layout 그리고 외관 을 정의.
         css3의 변형( transform ), 전환 ( transition ),  애니메이션( animation )

*.png  file =  UserInterface 를 위한 Image 묶음.

압축 해제시 내용물
 
jquery.mobile-1.0b3.js
jquery.mobile-1.0b3.min.js
jquery.mobile-1.0b3.css
jquery.mobile-1.0b3.min.css

-3. Eclipse lib 적용
1.1    Java Resources 하단의 src 에  JS, CSS file 위치시킨다.
1.2    WebContent 하단에 폴더를 만든후 Html 파일 생성 (예제화면)



  1. <!DOCTYPE html >
  2. <html>
  3. <head>
  4. <title>JQuery Mobile Application</title>
  5. <meta  name="viewport" content="width=device-width, initial-scale=1">
  6. <link  href="http://code.jquery.com/mobile/latest/jquery.mobile.css"
  7. rel="stylesheet" type="text/css" />
  8. <script src="http://code.jquery.com/jquery-1.6.2.js"></script>
  9. <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js">
  10. </script>
  11. <body>
  12. </body>
  13. </html>

JQM 은 HTML5가 기준이 되기 때문에 header, footer, section 
     같은 새로 운 Tag 를 모두 사용이 가능하다.
JQM 의 경우는 특정 마크업을 요구하지를 않지만 어떤 방법으로든 내용의 역활을 JQM에게 알려줘야 하기 때문에 
HTML5의 data-role 을 통해 내용 영역을 인식하게 된다.
data-role 속성 유효값은 page, header, content, footer 등이 있다.

하단의 소스의 경우는 View를 Device 의 넓이 만큼 아이콘의 scale 을 1로 지정해주겟다는 소리이다.
  1. <meta  name="viewport" content="width=device-width, initial-scale=1">

src 폴더에 위치되어있는 js, css file을 가르키는 소스이다.
  1. <link  href="http://code.jquery.com/mobile/latest/jquery.mobile.css"
  2. rel="stylesheet" type="text/css" />
  3. <script src="http://code.jquery.com/jquery-1.6.2.js"></script>
  4. <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js">
  5. </script>



data-role을 이용하여, JQM의 해더, 푸터 영역을 지정한 소스와 화면이다.





  1. <!DOCTYPE html >
  2. <html>
  3. <head>
  4. <title>JQuery Mobile Application</title>
  5. <meta  name="viewport" content="width=device-width, initial-scale=1">
  6. <link  href="http://code.jquery.com/mobile/latest/jquery.mobile.css"
  7. rel="stylesheet" type="text/css" />
  8. <script src="http://code.jquery.com/jquery-1.6.2.js"></script>
  9. <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js">
  10. </script>
  11. </head>
  12. <body>
  13. <section id="page1" data-role="page">
  14. <!--  해더 부분  -->
  15. <header data-role="header"><h1>Hello AndroidSide</h1></header>
  16. <div class="content">
  17. <p align="center">집게사장  JQuery Mobile Test</p>
  18. </div>
  19. <!--  푸터 부분  -->
  20. <footer data-role="footer"><h1>JQuery Mobile</h1></footer>
  21. </section>
  22. </body>
  23. </html>



등푸른_망둥어

집게사장 님의 웹(WEB) 최신글 [더보기]


추천/비추천 클릭하면 추천받으신 분, 추천하신 분 모두에게 포인트가 지급됩니다.

별명이란없다 2015-02-09 (월) 12:18
좋은 정보 감사!
댓글주소
can훈 2015-02-12 (목) 00:47
좋은 강좌 감사합니다 ^^
댓글주소
처음  1  2
이전글  다음글  목록 글쓰기

총 게시물 62건, 최근 0 건 안내 RSS
번호 분류 제목 글쓴이 날짜 추천 비추천 조회
62 소스코드
 $scope.page = 0;   $scope.total = 1;   $scope.restaurants = [];   $scope.getRestaurants = function () {     $scop…
조각 08-10 1 0 643
61 소스코드
감사합니다.
우리큰형님 07-08 2 1 1687
60 강좌
Store에 저장된 Model 객체를 each()메소드로  Model객체당 패널를 하나씩 만드는 방법도 있지만 DataView(Ext.dataview.Dat…
이카루스031 06-02 4 0 3386
59 강좌
Store에 저장할 Model 객체 타입을 정의하고 프록시 Ext.data.proxy.Memory를 사용해서 인라인 데이터를 읽고 인라인 데이…
이카루스031 06-02 3 0 3135
58 강좌
스토어는(Ext.data.Store)는  클라이언트측 데이터 캐쉬 저장소 역할을 한다. Store는 처음 생성될 때만 서버나 HTML5…
이카루스031 06-02 1 0 3059
57 소스코드
페이지 링크 : https://github.com/Flipboard/react-canvas 사용언어 : javascript Introductory blog post Flipboard는 모바일 웹 앱…
카이로 03-18 2 0 3484
56 TIP&TECH
A self-hosted chat app for small teams built by Security Compass. Features and Stuff BYOS (bring your own server) Persistent messages M…
카이로 03-18 3 0 5361
55 TIP&TECH
IO.JS 링크 : https://github.com/iojs/io.js io.js 는 node.js의 커미터들이 대거 이동해서 만든 npm compatible platform 입니다.…
카이로 03-18 1 0 3706
54 TIP&TECH
아래 사이트에서 퍼온 자료입니다. http://blackfrost.blog.me/40210784439 필자가 최근 php에서 좀 깔끔한 그래프를 …
카이로 03-05 5 0 15542
53 TIP&TECH
$sudo apt-get install python-software-properties python g++ make  $sudo add-apt-repository ppa:chris-lea/node.js  $sudo apt-get update…
카이로 12-18 4 0 4969
52 소스코드
50+ FREE BEAUTIFUL JQUERY CSS3 MENU PLUGINS & TUTORIALS Free beautiful jQuery CSS3 menu navigation plugin and tutorials that it is an important…
카이로 11-28 3 0 4762
51 TIP&TECH
구굴 웹사이트 서핑 중  좋은 정보 인듯 해서 공유 차원에서 글을 적습니다. CSS 관련 해서 참고 하시고 많은…
등푸른망둥어 06-24 4 0 8256
50 TIP&TECH
젠 코딩 정말 나이스 하네요. 긴 HTML 등들은 TAG, CLASS, ID 속명만으로 html tag를 자동으로 한방에 생성해주…
등푸른망둥어 06-24 2 0 5371
49 강좌
출처 http://sir.co.kr/bbs/board.php?bo_table=wa_forum&wr_id=110 웹 접근성 이슈 정리 목차 들어가기 장차법과 웹 접…
카이로 01-05 2 0 6385
48 소스코드
크롬의 실험정신이 돋보이는 테스트 사이트입니다. 제가 보기엔 무조건 신기할 따름이네요!  근처에 갈 수…
집게사장 10-08 4 0 11999
47 강좌
1. 기본 Tabs의 Index를 로컬스토리지를 이용하여, 사용자가 마지막에 사용한 Index를 기억시키고, 화면에 보여줍…
집게사장 10-08 1 0 5457
46 TIP&TECH
http://dsiol.blog.me/120177646288 강력한 기능을 제공합니다.. 프리웨어이고 전 불법적인(?) 용도로 사용하고 있…
은빛파도 09-17 1 0 4988
45 자료
일단 소스 함 보세요
레오니아 08-23 6 0 7223
44 강좌
10년it트렌드 View more presentations from Kim jeehyun 온오프융합 View more presentations from Kim jeehyun
카이로 07-13 2 0 6539
43 강좌
Building HTML based mobile phone applications View more presentations from Mikko Ohtamaa
카이로 07-12 1 0 6126
 1  2  3  4  맨끝
 


Copyright ⓒ www.androidside.com. All rights reserved.
채팅 권한: 글쓰기 1개
2레벨 이상만 대화 가능
공개 채팅: 평일 !(9시 ~ 17시),토,일
안사2 변경사항 보러가기 챗방이 잘 안보이면 크롬에서 접속해주세요
챗방 숨기기 |  챗방 보이기