jooeungen-20111123-1x - SPARCS

sprocketexponentialMobile - Wireless

Dec 10, 2013 (3 years and 10 months ago)

162 views

jQuery

Mobile
세미나

스팍스

10
주은진





네이티브




iOS

-
> Objective
-
C


Android
-
> Java




웹앱




표준

기술로

네이티브



수준

까지

개발

목표
!


jQueryMobile
,
Sencha

Touch

jQueryMobile

jQTouch

jQuery


특징


HTML 5
마크업

중심의

개발언어





표준기술

HTML, CSS,
javascript



쉽다
!



웹앱
?


PhoneGap



Appspresso



jQueryMobile



사용하려면
?!



<link
rel
="
stylesheet
"
href
="http://code.jquery.com/mobile/1.0/jquery.mobile
-
1.0.min.css"
/>


<script
src
="http://code.jquery.com/jquery
-
1.6.4.min.js"></script>


<script
src
="http://code.jquery.com/mobile/1.0/jquery.mobile
-
1.0.min.js"></script>












있으면



!




<!DOCTYPE html>

<html>


<head>



<meta
charset
="UTF
-
8">



<title>
jQuery

Mobile</title>




<link
rel
="
stylesheet
"
href
="http://code.jquery.com/mobile/1.0/jquery.mobile
-
1.0.min.css" />




<script
src
="http://code.jquery.com/jquery
-
1.6.4.min.js"></script>




<script
src
="http://code.jquery.com/mobile/1.0/jquery.mobile
-
1.0.min.js"></script>


</head>


<body>


<div data
-
role="page" id="home">





<div data
-
role="header">





<h1>
jQueryMobile
</h1>




</div>





<div data
-
role="content">





<p>Hello World</p>





</div>




<div data
-
role="footer“>






<p>Hello world for
jQueryMobile
</p>





</div>


</div>

</body>

</html>


기본화면
!

페이지의

구조

<div data
-
role="page" id="home">



<div data
-
role="header">




<h1>
jQueryMobile
</h1>



</div>




<div data
-
role="content">





<p>Hello World</p>




</div>



<div data
-
role="footer“ >





<h3>Hello world for
jQueryMobile
</h3>



</div>

</div>


//data
-
position=“fixed”

내부
(internal)
페이지간

이동

<div data
-
role="page" id="home">



<div data
-
role="header">




<h1>
jQueryMobile
</h1>



</div>




<div data
-
role="content">




<p>Hello World</p>


<p>click <a
href
=“
page2
?Ée•Œ™ŒcVˆe›–G
move to internal page! </p>





</div>



<div data
-
role="footer“>




<p>Hello world for
jQueryMobile
</p>



</div>

</div>





<div data
-
role="page" id=“
page2
">



<div data
-
role="header">




<h1>This is next page!</h1>



</div>




<div data
-
role="content">




<p>Hello! Welcome to
Page2!</p>




</div>



<div data
-
role="footer“>




<p>Hello world for
jQueryMobile
</p>



</div>

</div>



Back button


필요성
?


Default
로는

없다
!



<div data
-
role=“page” id=“page2”



data
-
add
-
back
-
btn
=“true”>


이렇게

하면

생겨요
~

다른

버튼
!

<div data
-
role="header" data
-
position="inline">



<a
href
="index.html"
data
-
icon="delete">
Cancel</a>



<h1>Edit Contact</h1>


<a
href
="index.html"
data
-
icon="check">
Save</a>

</div>

Page Transition

<a
href
=“#page2"

data
-
transition="pop"
>I'll pop</a
>

<a
href
=“#page2"

data
-
transition=“
Lli=>up
"
㹉❬氠
灯p㰯愾

<a
href
=“#page2"

data
-
transition=“fade"
㹉❬氠灯瀼⽡p

<a
href
=“#page2"

data
-
transition=“flip"
㹉❬氠灯p㰯愾


외부페이지

<a
href
="
b.html
" data
-
role="button"
rel
="external"
>




click to go the external </a>



Internal page


기본적으로

page
-
transition
효과가

들어간다


로딩이

빠르다


Javascript



새로

로딩되지

않는다
!



External page


Page
-
transition
효과가

들어가지

않는다


조금

느리고

끊김

현상이

있다


Javascript



새로

로딩된다
.

리스트

Convention

<
ul

data
-
role="listview"
>


<li><a href="acura.html">Acura</a></li>


<li><a href="audi.html">Audi</a></li>


<li><a href="bmw.html">BMW</a></li>

</ul>



data
-
inset=“true”


d
ata
-
theme=“c”


<
li

data
-
role=“list
-
divider”>List divider</
li
>

리스트

응용
!


Count bubble


<
li
><a
href
="
index.html
">Inbox <span class="
ui
-
li
-
count">12</span></a></
li
>


Search filter


<
ul

data
-
role="
listview
" data
-
filter="true">





못다룬

리스트
..





못다룬

리스트
..

Collapsible Data


Basic

<div
data
-
role="collapsible"
>


<h3>I'm a header</h3>


<p>I'm the collapsible content. </p>

</div>


Not collapsed

<div data
-
role="collapsible"

data
-
collapsed="false
">



Nested collapsible


Collapsible List

네비게이션




<div data
-
role="footer">


<div data
-
role="
navbar
">



<
ul
>



<
li
><a
href
="
#
" data
-
icon="grid">Summary</a></
li
>



<
li
><a
href
="
#
" data
-
icon="star" >
Favs
</a></
li
>



<
li
><a
href
="
#
" data
-
icon="gear">Setup</a></
li
>




</
ul
>


</div><!
--

/
navbar

--
>

</div><!
--

/footer
--
>

Form


<div data
-
role="
fieldcontain
">


<label for="name">Text Input:</label>


<input type="text" name="name" id="name" value="" />

</div>


<div data
-
role="
fieldcontain
">



<label for="search">Search Input:</label>


<input type="search" name="password" id="search" value="" />


</div>


<div data
-
role="
fieldcontain
">


<label for="
textarea
">
Textarea
:</label>


<
textarea

cols="40" rows="8"
name="
textarea“id
="
textarea
"></
textarea
>

</div>




Form


<div data
-
role="
fieldcontain
">



<label for="slider2">Flip switch:</label>



<
select

name="slider2" id="slider2" data
-
role="slider">




<option value="off">Off</option>




<option value="on">On</option>



</select>


</div>





외의

Form…

Reference


공식싸이트


Docs


http://jquerymobile.com/demos/1.0/


공식


http://jquerymobile.com



설명


http://blog.naver.com/PostView.nhn?blogId=damanegi_kr&logNo=121710664

감사합니다

^0^