화면전환 방법

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
<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>
 
 
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page" id="first_page">
        <!-- header  -->
        <div data-role="header">
            <h1>화면전환 효과</h1>            
        </div>
        
        <!-- 내용  -->
        
        <div role="main" class="ui-content">
        <div data-role="listview">
            <li><a href="#second_page" data-transition="slide" class="ui-btn">slide</a>
            <li><a href="#second_page" data-transition="slideup" class="ui-btn">slideup</a>
            <li><a href="#second_page" data-transition="slidedown" class="ui-btn">slidedown</a>
            <li><a href="#second_page" data-transition="pop" class="ui-btn">pop</a>
            <li><a href="#second_page" data-transition="fade" class="ui-btn">fade(기본)</a>
            <li><a href="#second_page" data-transition="flip" class="ui-btn">flip</a>
        </div>
        </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">
            <h1>두번째 페이지</h1>
            <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-icon-back ui-btn-icon-left ui-btn-icon-notext">이전</a>            
        </div>
        
        <!-- 내용  -->    
        <div role="main" class="ui-content">
            <p> 두번째 페이지</p>
        </div>        
        <!-- footer  -->
        <div data-role="footer" data-theme="b">
            <h1>화면 하단</h1>
        </div>
    </div>
</body>
</html>
cs


다이얼로그 창 (기본값 팝업)

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
<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>
 
 
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page" id="first_page">
        <!-- header  -->
        <div data-role="header">
            <h1>Dialog</h1>
            <!-- 두번째 페이지로 넘어가지만 창이 하나 뜬 느낌을 주고 싶을떄 -->            
        </div>
        
        <!-- 내용  -->
        
        <div role="main" class="ui-content">
        <div data-role="listview">
            <li><a href="#second_page" data-rel="dialog">slide</a>
            <li><a href="#second_page" data-rel="dialog" data-transition="slide" >slide</a>
            <li><a href="#second_page" data-rel="dialog" data-transition="slideup" class="ui-btn">slideup</a>
            <li><a href="#second_page" data-rel="dialog" data-transition="slidedown" class="ui-btn">slidedown</a>
            <li><a href="#second_page" data-rel="dialog" data-transition="pop" class="ui-btn">pop(기본)</a>
            <li><a href="#second_page" data-rel="dialog" data-transition="fade" class="ui-btn">fade</a>
            <li><a href="#second_page" data-rel="dialog" data-transition="flip" class="ui-btn">flip</a>
        </div>
        </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">
            <h1>두번째 페이지</h1>
            <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-icon-back ui-btn-icon-left ui-btn-icon-notext">이전</a>            
        </div>
        
        <!-- 내용  -->    
        <div role="main" class="ui-content">
            <p> 두번째 페이지</p>
        </div>
        
 
        
        <!-- footer  -->
        <div data-role="footer" data-theme="b">
            <h1>화면 하단</h1>
        </div>
    </div>
</body>
</html>
cs

펼치기 메뉴

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
<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>
 
 
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page" >
        <!-- header  -->
        <div data-role="header">
            <h1>Collapsible</h1>
                        
        </div>
        
        <!-- 내용  -->        
        <div role="main" class="ui-content">
        
            <h4>기본 Collapsible</h4>
            <div data-role="collapsible">
                <h4>우리 마을의 역사는?</h4>
                <p>우리 마을 은 고려시대  왕이 사냥하던 지역이었다.</p>    
            </div>
            
            <h4>테마</h4>
            <div data-role="collapsible" data-theme="b" data-content-theme="b">
                <h4>올해 겨울 날씨는?</h4>
                <p>겨울에 눈이 많이 오고 삼한 시온 현상이 강할 것으로 예상</p>    
            </div>
            
            <h4>확장된 Collapsible</h4>
            <!-- data-collpased="false" 를 기재하면 로딩시 펼쳐진 형태로 보여짐 -->
            <div data-role="collapsible" data-callpased="false">
                <h4>수강과목</h4>
                <ul data-role="listview">
                    <li><a href="#">List 1</a></li>
                    <li><a href="#">List 2</a></li>
                    <li><a href="#">List 3</a></li>
                </ul>    
            </div>
            
            <h4>아이콘 사용</h4>
            <!-- 아이콘 선택 가능 -->
            <div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
                <h4>수강과목</h4>
                <ul data-role="listview">
                    <li><a href="#">List 1</a></li>
                    <li><a href="#">List 2</a></li>
                    <li><a href="#">List 3</a></li>
                </ul>    
            </div>
            
            <h4>모서리가 둥글지 않은 Collapsible</h4>
            <div data-role="collapsible" data-inset="false">
                <h4>수강과목</h4>
                <ul data-role="listview">
                    <li><a href="#">List 1</a></li>
                    <li><a href="#">List 2</a></li>
                    <li><a href="#">List 3</a></li>
                </ul>    
            </div>
                        
 
        </div>
        
        <!-- footer  -->
        <div data-role="footer" data-theme="b">
            <h1>화면 하단</h1>
        </div>    
    </div>
</body>
</html>
cs


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
<!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>
</head>
<body>
    <!-- 첫번째 페이지 -->
    <div data-role="page">
        <!-- header -->
        <div data-role="header">
            <h1>Collapsible</h1>
        </div>
        <!-- 내용 -->
        <div role="main" class="ui-content">
            <h4>Collapsible Set</h4>
            <div data-role="collapsibleset">
                <div data-role="collapsible">
                    <h3>애완동물</h3>
                    <ul data-role="listview">
                      <li><a href="#">개</a></li>
                      <li><a href="#">고양이</a></li>
                      <li><a href="#">뱀</a></li>
                    </ul>
                </div>
                <div data-role="collapsible">
                    <h3>스포츠</h3>
                    <ul data-role="listview">
                      <li><a href="#">농구</a></li>
                      <li><a href="#">배구</a></li>
                      <li><a href="#">축구</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- footer -->
        <div data-role="footer">
            <h1>화면 하단</h1>
        </div>
    </div>
</body>
</html>
cs

Grid

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
<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>
 
 
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page" >
        <!-- header  -->
        <div data-role="header">
            <h1>grid</h1>
                        
        </div>
        
        <!-- 내용  -->        
        <div role="main" class="ui-content">
<!--  
그리드 정의     CSS 컬럼수         컬럼에 포함되는 항목 CSS
ui-grid-a        2개                ui-block-a, ui-block-b
ui-grid-b        3개             ui-block-a, ui-block-b, ui-block-c
ui-grid-c        4개             ui-block-a, ui-block-b, ui-block-c, ui-block-d
ui-grid-d        5개                ui-block-a, ui-block-b, ui-block-c, ui-block-d, ui-block-e
-->
            <h4>2개로 분할</h4>
            <div class="ui-grid-a">
                <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>                        
                <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
            </div>
                
            <h4>폼에서 사용할 수 있는 좌우(2개) 분할</h4>
            <div class="ui-grid-a">
                <div class="ui-block-a"><input type="submit" value="전송"></div>                    
                <div class="ui-block-b"><input type="reset" value="리셋"></div>
            </div>
            
            <h4>3개 분할</h4>
            <div class="ui-grid-b">
                <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>                        
                <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
                <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:60px">Block C</div></div>
            </div>    
                    
            <h4>4개 분할</h4>
            <div class="ui-grid-c">
                <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>                        
                <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
                <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:60px">Block C</div></div>
                <div class="ui-block-d"><div class="ui-bar ui-bar-a" style="height:60px">Block D</div></div>
            </div>
            
            <h4>5개 분할</h4>
            <div class="ui-grid-d">
                <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>                        
                <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
                <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:60px">Block C</div></div>
                <div class="ui-block-d"><div class="ui-bar ui-bar-a" style="height:60px">Block D</div></div>
                <div class="ui-block-e"><div class="ui-bar ui-bar-a" style="height:60px">Block E</div></div>
            </div>    
            
        </div>
        
        <!-- footer  -->
        <div data-role="footer">
            <h1>화면 하단</h1>
        </div>    
    </div>
</body>
</html>
cs

테이블

모바일 환경에서는 테이블을 잘쓰지 않는다(데이터 출력 문제)

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
<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>
 
 
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page" >
        <!-- header  -->
        <div data-role="header">
            <h1>grid</h1>
                        
        </div> 
        <!-- end of header  -->
        
        <!-- 내용  -->        
        <div role="main" class="ui-content">
            <h4>기본 컬럼토글</h4>
            <table data-role="table" id="table-column-toggle" 
                data-mode="columntoggle" class="ui-responsive table-stroke">
                
                <thead>
                    <tr>
                    <!-- 
                        data-priority를 명시해야 토글 메뉴에 표시
                        컬럼이 보여지는 우선순 1이 가장 높고 6이 가장 낮음
                     -->
                        <th data-priority="2">Rank</th>
                        <th>Movie TItle</th>
                        <th data-priority="3">Year</th>
                        <th data-priority="1">Rating</th>
                        <th data-priority="5">Reviews</th>                    
                    </tr>
                
                </thead>
                <tbody>    
                    <tr>
                        <th>1</th>
                        <td>Citizen Kane</td>
                        <td>1941</td>
                        <td>100%</td>
                        <td>74</td>
                    </tr>
                    <tr>
                        <th>2</th>
                        <td>올드보이</td>
                        <td>2000</td>
                        <td>100%</td>
                        <td>74</td>
                    </tr>
                    <tr>
                        <th>3</th>
                        <td>설국열차</td>
                        <td>2013</td>
                        <td>98%</td>
                        <td>72</td>
                    </tr>
                </tbody>                
                
                
            </table>                    
        </div> 
        <!-- end of main  -->
        
        <!-- footer  -->
        <div data-role="footer">
            <h1>화면 하단</h1>
        </div>
        <!-- end of footer  -->    
    </div>
</body>
</html>
cs

네이게이션 바

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
<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>
 
 
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page" >
        <!-- header  -->
        <div data-role="header">
            <h1>navbar</h1>
            <div data-role="navbar">
                <ul>
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                    <li><a href="#">Four</a></li>
                    <li><a href="#">Five</a></li>
                </ul>
            </div>    
        </div> 
        <!-- end of header  -->
        
        <!-- 내용  -->        
        <div role="main" class="ui-content">
            <!-- data-iconpos 아이콘 위치 지정 -->
            <h4>아이콘 사용</h4>
            <div data-role="navbar" data-iconpos="right">
                <ul>
                    <li><a href="" data-icon="grid">Summary</a></li>
                    <li><a href="" data-icon="star">List</a></li>
                    <li><a href="" data-icon="gear    ">Write</a></li>
                    
                </ul>
            </div>    
            
            <h4>화면 로드시 항목 선택</h4>
            <div data-role="navbar" data-iconpos="right">
                <ul>
                    <li><a href="#" class="ui-btn-active" >One</a></li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                    <li><a href="#">Four</a></li>
                    <li><a href="#">Five</a></li>                
                </ul>
            </div>                    
        </div> 
        <!-- end of main  -->
        
        <!-- footer  -->
        <div data-role="footer">
            <h4>화면 하단</h4>
            <div data-role="navbar" data-iconpos="right">
                <ul>
                    <li><a href="#" class="ui-btn-active" >One</a></li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                    <li><a href="#">Four</a></li>
                    <li><a href="#">Five</a></li>                
                </ul>
            </div>        
        </div>
        <!-- end of footer  -->    
    </div>
</body>
</html>
 
cs

각각 다른파일로 연결

02_a.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
44
45
46
47
48
 
<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>
 
 
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page" >
        <!-- header  -->
        <div data-role="header">
            <h1>첫번째 페이지</h1>
        </div> 
        <!-- end of header  -->
        
        <!-- 내용  -->        
        <div role="main" class="ui-content">
            <p>첫번째 페이지</p>                
        </div> 
        <!-- end of main  -->
        
        <!-- footer  -->
        <div data-role="footer">
            <h4>화면 하단</h4>
            <!-- data-iconpos를 지정하지 않으면 기본값은 top -->
            <div data-role="navbar" data-iconpos="right">
                <ul>
                    <li><a href="02_a.html" data-icon="grid" 
                    class="btn-active ui-state-persist">One</a></li>
                    <li><a href="02_b.html" data-icon="star">Two</a></li>
                    <li><a href="02_c.html" data-icon="gear">Three</a></li>            
                </ul>
            </div>
    
        </div>
        <!-- end of footer  -->    
    </div>
</body>
</html>
 
cs

02_b.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
44
45
46
47
48
 
<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>
 
 
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page" >
        <!-- header  -->
        <div data-role="header">
            <h1>두번째 페이지</h1>
        </div> 
        <!-- end of header  -->
        
        <!-- 내용  -->        
        <div role="main" class="ui-content">
            <p>두번째 페이지</p>            
        </div> 
        <!-- end of main  -->
        
        <!-- footer  -->
        <div data-role="footer">
            <h4>화면 하단</h4>
            <div data-role="navbar" data-iconpos="right">
                <ul>
                    <li><a href="02_a.html" data-icon="grid" 
                    >One</a></li>
                    <li><a href="02_b.html" data-icon="star"
                    class="btn-active ui-state-persist">Two</a></li>
                    <li><a href="02_c.html" data-icon="gear">Three</a></li>            
                </ul>
            </div>
    
        </div>
        <!-- end of footer  -->    
    </div>
</body>
</html>
 
cs

02_c.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
44
45
46
47
48
 
<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>
 
 
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page" >
        <!-- header  -->
        <div data-role="header">
            <h1>세번째 페이지</h1>
        </div> 
        <!-- end of header  -->
        
        <!-- 내용  -->        
        <div role="main" class="ui-content">
            <p>세번째 페이지</p>                
        </div> 
        <!-- end of main  -->
        
        <!-- footer  -->
        <div data-role="footer">
            <h4>화면 하단</h4>
            <div data-role="navbar" data-iconpos="right">
                <ul>
                    <li><a href="02_a.html" data-icon="grid" 
                    >One</a></li>
                    <li><a href="02_b.html" data-icon="star">Two</a></li>
                    <li><a href="02_c.html" data-icon="gear"
                    class="btn-active ui-state-persist">Three</a></li>            
                </ul>
            </div>
    
        </div>
        <!-- end of footer  -->    
    </div>
</body>
</html>
 
cs

제어쿼리 머릿말 과 내용 

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
 
<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>
 
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page" >
        <!-- header  -->
        <div data-role="header">
            <h1>table</h1>
                        
        </div> 
        <!-- end of header  -->
        
        <!-- 내용  -->        
        <div role="main" class="ui-content">
            <h4>머릿말과 내용</h4>
            <h3 class="ui-bar ui-bar-a">jQuery Mobile</h3>
            <div>
                <div class="ui-body">
                    <p>모바일 환경에 최적화된 페이지를 만들수 있습니다.
                    </p>
                </div>
                
            </div>
            
            <h4>모서리가 둥근 머릿글과 내용</h4>
            <h3 class="ui-bar ui-bar-a ui-corner-all">jQuery Mobile</h3>
            <div>
                <div class="ui-body">
                    <pre>모바일 환경에 최적화된 페이지를 만들수 있습니다.
                    냐하하하하하
                    </pre>
                </div>
                
            </div>        
            
            <h4>모서리가 둥근 머릿글과 모서리가 둥근 내용</h4>
            <h3 class="ui-bar ui-bar-a ui-corner-all">jQuery Mobile</h3>
            <div>
                <div class="ui-body ui-body-a ui-corner-all">
                    <p>모바일 환경에 최적화된 페이지를 만들수 있습니다.    </p>
                </div>                
            </div>    
            
            <h4>모서리가 둥근 머릿글과 내용이 분리되지 않은 형태</h4>
            <h3 class="ui-bar ui-bar-a ui-corner-all">jQuery Mobile</h3>
            <p>모바일 환경에 최적화된 페이지를 만들수 있습니다.</p>                
            
        <!--<h4>모서리가 둥글며 머릿글과 내용이 붙어 있는 형태</h4>
            <h3 class="ui-bar ui-bar-a ui-corner-all">jQuery Mobile</h3>
            
                <div class="ui-body ui-body-a ui-corner-all">
                    <p>모바일 환경에 최적화된 페이지를 만들수 있습니다.    </p>
                </div>     -->                    
                
        </div> 
        <!-- end of main  -->
        
        <!-- footer  -->
        <div data-role="footer">
            <h1>화면 하단</h1>
        </div>
        <!-- end of footer  -->    
    </div>
</body>
</html>
cs


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

특강 6일차 (오전) - HTML localstorage, 크로스도메인 AJAX, 센차터치  (0) 2015.01.12
특강 5일차 (오후) - JQuery Mobile  (0) 2015.01.09
특강 4일차 (오후) - JQuery Mobile  (0) 2015.01.08
특강 4일차 (오전) - JQuery Mobile  (0) 2015.01.08
특강 3일차 (오후) - AJAX, JQueryMobile  (0) 2015.01.07

+ Recent posts

티스토리툴바