오후 초반내용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
 
</script>
 
</head>
 
<body>
    <!-- page 지정 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>Checkbox and Radio</h1>
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">        
            <h4>Form elements</h4>
            <form>
                <div class="ui-field-contain">
                    <label for="date">Date Input</label>
                    <input type="date" data-role="date" id="date">                    
                </div>
                <div class="ui-field-contain">
                    <label for="name">Text Input</label>
                    <input type="text" name="name" id="name"> 
                </div>
                <div class="ui-field-contain">
                    <label for="textarea">TextArea</label>
                    <textarea rows="8" cols="40" name="textarea" id="textarea"></textarea>
                </div>
                <div class="ui-field-contain">
                    <label for="search">사용자 검색</label>
                    <input type="search" name="search" id="search">
                </div>
                <!-- flip 스위치 구현 select를 사용하여 구현 -->
                <div class="ui-field-contain">
                    <label for="slider2">Flip switch</label>
                    <select name="slider2" id="slider2" data-role="slider">
                        <option value="off">Off</option>
                        <option value="on" selected>On</option>                        
                    </select>                    
                </div>
            </form>                    
        </div>
        <div class="ui-field-contain">
            <label for="slider">Slider</label>
            <input type="range" name="slider" id="slider" value="50" min="0" 
            max="100" data-highlight="true">
        </div>
        
        <div class="ui-field-contain">
            <fieldset data-role="controlgroup" data-mini="true">
                <legend>Checkbox</legend>
                <input type="checkbox" name="checkbox" id="checkbox-1a">
                <label for="checkbox-1a">서울</label>
                <input type="checkbox" name="checkbox" id="checkbox-1b">
                <label for="checkbox-1b">천안</label>                
            </fieldset>
        </div>
        <div class="ui-field-contain">
            <label for="select-a">Select</label>
            <!-- <select name="select" id="select-a"> 브라우저 제공 원래형태처럼 표현-->
            <select name="select" id="select-a" data-native-menu="false"> 
                <option>도시선택</option>
                <option value="서울">서울</option>
                <option value="부산">부산</option>
                <option value="천안">천안</option>
                <option value="인천">인천</option>
            </select>
        </div>        
        <!-- footer  -->
        <div data-role="footer" data-position="fixed" data-fullscreen="true">
            <h1>화면 하단</h1>
        </div>
    </div>
 
</body>
</html>
cs


JQuery Mobile 화면이동하는 방법에는 세가지가 있다 

1. 한페이지에 통합적으로 처리(디자인 중심 페이지에 적합)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
 
</script>
 
</head>
 
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page" id="first_page">
        <!-- header  -->
        <div data-role="header" data-theme="b">
            <h1>화면이동 -first</h1>
            
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            <a href="#second_page" class="ui-btn ui-corner-all ui-shadow ui-icon-forward ui-btn-icon-left ui-btn-icon-notext">두번째화면으로 이동</a>
                                                                        
        </div>
        
        <!-- footer  -->
        <div data-role="footer" data-theme="b">
            <h1>화면 하단</h1>
        </div>
    </div>
    
    <!-- 두번째 페이지 -->
    <div data-role="page" id="second_page">
        <!-- header  -->
        <div data-role="header" data-theme="b">
            <h1>화면이동-second</h1>
            <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-left ui-icon-back ui-btn-icon-notext">이전</a>
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            두번째 화면                                                                        
        </div>
                
        <!-- footer  -->
        <div data-role="footer" data-theme="b">
            <h1>화면 하단</h1>
        </div>
    </div>
    
 
</body>
</html>
cs


첫번째 화면

두번째 화면


2. 페이지 두개로 처리하는 방법

제이 쿼리 모바일 내부적으로 두번째 페이지를 ajax로 불러와 기존내용을 숨기고 바꿔치기 하기때문에 두번째 페이지에는 따로 제이쿼리 모바일 라이브러리들을 임포트할필요 없다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
 
</script>
 
</head>
 
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>화면이동 -first</h1>
            
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            <a href="02-2.html" class="ui-btn ui-corner-all ui-shadow ui-icon-forward ui-btn-icon-left ui-btn-icon-notext">두번째화면으로 이동</a>
                                                                        
        </div>
        
        <!-- footer  -->
        <div data-role="footer" data-theme="b">
            <h1>화면 하단</h1>
        </div>
    </div>
    
    
 
</body>
 
</html>
cs


02-2html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>두번째 페이지</title>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>두번째 화면</h1>
            <a href="#" data-rel="back" class="ui-btn ui-cornel-all ui-shawdow ui-icon-back ui-btn-icon-left ui-btn-icon-notext">이전</a>
        </div>
        <div role="main" class="ui-content">
            <h1>Hello Second Page</h1>
        </div>
        <div data-role="footer">
            <h1>화면하단</h1>
        </div>
    </div>
 
</body>
</html>
cs


3. 새로운 페이지를 기존 방법 대로 불러오는 방법

03.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
 
</script>
 
</head>
 
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>화면이동 -first</h1>
            
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            <a href="03-2.html" class="ui-btn" data-ajax="false">두번째화면으로 이동</a>
                                                                        
        </div>
        
        <!-- footer  -->
        <div data-role="footer" data-theme="b">
            <h1>화면 하단</h1>
        </div>
    </div>
    
    
 
</body>
 
</html>
cs


03-2.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>두번째 화면</h1>
            <a href="#" data-rel="back" class='ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left ui-btn-icon-notext'>이전</a>
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            <h1>두번째 화면입니다.</h1>
                                                                        
        </div>
        
        <!-- footer  -->
        <div data-role="footer" data-theme="b">
            <h1>화면 하단</h1>
        </div>
    </div>
    
    
 
</body>
 
</html>
cs


JQuaryMobile 방식은 일반의 링크 방식과 다름

A.html에서 B.html을 부를때 b.html의 내용을 가져와 a.html을 숨기고 b.html의 내용을 a.html의 돔트리에 삽입 -> b.html의 주소지만 실제내용은 a.html의 내용

위의 기술은 제이쿼리 모바일이 내부적으로 ajax 통신방법을 이용하여 처리

하이브리드 앱을 위해서는 DOM을 하나로 쓰는 모델을 해야한다 (앱에서 새로고침 기능이 없음) 




리스트뷰

모바일에서는 테이블을 쓰기가 힘듬 ( 화면상의 이유로 데이터가 떨어져서 출력될수있음)

-> 그러한 이유로 리스트 형식으로 데이터를 맣이 보여줌 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>ㅁ<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
 
</script>
 
</head>
 
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>listview</h1>
            
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            <h4>읽기 전용(순서없음)</h4>
            <ul data-role="listview">
                <li>대한민국</li>
                <li>사우디 아라비아</li>
                <li>콜럼비아</li>
                <li>미국</li>
                <li>영국</li>
            </ul>                
            
            <h4>읽기 전용(순서있음)</h4>
            <ol data-role="listview">
                <li>대한민국</li>
                <li>사우디 아라비아</li>
                <li>콜럼비아</li>
                <li>미국</li>
                <li>영국</li>
            </ol>
                                                                    
        </div>
        
        <!-- footer  -->
        <div data-role="footer" data-theme="b">
            <h1>화면 하단</h1>
        </div>
    </div>
    
    
 
</body>
 
</html>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>두번째 화면</h1>
            <a href="#" data-rel="back" class='ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left ui-btn-icon-notext'>이전</a>
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            <h1>두번째 화면입니다.</h1>
                                                                        
        </div>
        
        <!-- footer  -->
        <div data-role="footer" data-theme="b">
            <h1>화면 하단</h1>
        </div>
    </div>
    
    
 
</body>
 
</html>
cs

출력화면 



'App Development > Hybrid Programming' 카테고리의 다른 글

특강 5일차 (오후) - JQuery Mobile  (0) 2015.01.09
특강 5일차 (오전) - JQuery Mobile  (0) 2015.01.09
특강 4일차 (오전) - JQuery Mobile  (0) 2015.01.08
특강 3일차 (오후) - AJAX, JQueryMobile  (0) 2015.01.07
특강 3일차 (오전) - JQuery, AJAX  (0) 2015.01.07

+ Recent posts

티스토리툴바