2013년 11월 6일 수요일

제이쿼리모바일이란(jQUERY MOBILE) jQuery Mobile은 올해 초에 나온 모바일프레임워크로 센차터치(Sencha Touch)와 더블어 많이 사용되고 있는 ...

제이쿼리모바일이란(jQUERY MOBILE)

jQuery Mobile은 올해 초에 나온 모바일프레임워크로 센차터치(Sencha Touch)와 더블어 많이 사용되고 있는 모바일 자바스크립트 프레임워크 입니다. 모바일 웹 애플리케이션 개발을 목적으로 만들어진 자바스크립트프레임 워크로 웹에서 많이 사용을 하던 jQuery를 직접 개발한 프레임워크로 네이티브수준의 모바일 웹,웹앱을 개발하도록 각종 UI컨트롤과 이벤트 처리, 애니메이션 효과 및 자동 네비게이션, Ajax 통신 등 모바일에 최적화되어 기기지원과 브라우저 호환이 가능하여 성능을 취적화를 위해 코드사이즈를 최소화 하도록 하는등 주요 모바일 플랫폼에서 호환이 가능하도록 하고 있는 것입니다.
 
  jQuery Mobile은 위와 같지만은 jQuery Mobile은 어디까지나 라이브러이기때문에 단순히 기능 집합을 축소한 것이 아니라 오히려 모바일 환경에 알맞도록 확장시킨 일종의 확장팩에 해당된다고 생각을
하시면 됩니다.  그렇기때문에 jQuery Mobile이 제공하는 몇 가지 규칙에 맞추어 웹 페이지를
프로그래밍한다면 나머지 시각 효과, 간단한 검색 기능, 심지어 대화 상자 기능까지 자동으로 처리를
해주고 있습니다.
 
그렇기때문에 현재 하이브리드위주로 기술발전을 하고 있는 모바일기술현장에서 적합한 것이고
하이브리드형태로 개발을 하고자 한다면은 이 jQuery Mobile을 공부를 하시는 것도 하나의 선택이
되실 것입니다.
 
아래는 간단하 예제 애플리케이션 입니다. 참고하세요
 
<!DOCTYPE html> 
<html> 
        <head> 
        <title>Page Title</title>       
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head> 
<body> 
 
<div data-role="page" id="first" data-theme="a">
 
        <div data-role="header">
                <h1>Page Title1</h1>
        </div><!-- /header -->
 
        <div data-role="content">       
                <p>Page content goes here.</p>
                <a href="#second">Go to second page</a>
        </div><!-- /content -->
 
        <div data-role="footer">
                <h4>Page Footer1</h4>
        </div><!-- /footer -->
</div><!-- /page -->
 
<div data-role="page" id="second" data-add-back-btn="true" data-theme="b">
 
        <div data-role="header">
                <h1>Page Title2</h1>
        </div><!-- /header -->
 
        <div data-role="content">       
                <p>Page content goes here.</p>          
        </div><!-- /content -->
 
        <div data-role="footer">
                <h4>Page Footer2</h4>
        </div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
 

[개강임박강좌, 오프라인교육장에 오시면 보다 자세히 배울 수 있습니다.]

오라클자바커뮤니티에서 운영하는 개발자 전문교육 ,개인80%환급(www.onjprogramming.co.kr)

[주간]
  [11/13]SQL초보에서실전전문가까지
  [11/13]안드로이드개발자과정
  [11/18]Spring3.X, MyBatis, Hibernate실무과정
  [11/18]iPhone 하이브리드 앱 개발 실무과정

[평일야간]
  [11/08]C#,ASP.NET마스터
  [11/08]Spring3.X, MyBatis, Hibernate실무과정
  [11/12]iPhone 하이브리드 앱 개발 실무과정
  [11/14]JAVA&WEB프레임워크실무과정

[주말]
  [11/09]JAVA&WEB프레임워크실무과정
  [11/09]웹퍼블리싱 마스터
  [11/16]C#,ASP.NET마스터
  [11/16]PL/SQL,오라클힌트,SQL튜닝,사례연구
  [11/16]ASP.NET4.0 MVC 프로그래밍
  [11/16]Spring3.X, MyBatis, Hibernate실무과정


작성자: 시간:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)