jQuery Mobile 사용법 익히기 01

ttp://ajaxdump.com/?tqSDBVlK 

JQuery Mobile의 매력은 디자인에 고민할 필요가 없이 세련된 UI를 가질 수 있다. 
물론 안드로이드 앱 개발시 기기별 파편화도 신경쓸 필요가 없다.

PC용 웹브라우저에서 테스트해 보니
IE : CSS 가 잘 안먹힌다...한마디로 꽝
크롬 : 음...에러나는 기능이 발견된다...
파폭 : 아주 잘~ 돌아간다.

1. 기본 HTML 작성

 	
타이틀 : jQuery Mobile Test
	

	
jQueryMobile 시작
	About jQueryMobile
	
	
	

	
About jQueryMobile
	
jQuery Mobile를 배워보자~
	
얘는 다른 페이지에 보이고 싶다..
	
		
	
꼬리말은 여기에

2. jQuery Mobile CSS, JavaScript 추가하기

아직까지 아무런 변화가 없다.

3. data-* 사용

HTML div태그에서 jQuery Mobile 속성값 data-role 값을 지정한다.

data-role="page" data-role="header" data-role="content" data-role="footer"

		

			
타이틀 : jQuery Mobile Test
		

		

			
jQueryMobile 시작
			About jQueryMobile
		
		

			
꼬리말은 여기에
		

	
	

	
		

			
타이틀 : jQuery Mobile Test
		

		

			
About jQueryMobile
			
jQuery Mobile를 배워보자~
			
얘는 다른 페이지에 보이고 싶다..
		
		

			
꼬리말은 여기에
		

	
		

사랑스럽다~~^^
data-role="page" 지정으로 화면이 나눠지고
자동으로 [Back] 버튼이 생겨나고
data-role="button" 으로 <A> 태그가 버튼으로 변했다~~

*

*