탭바 

카드레이아웃과 달리 트랜지션 효과가 생긴다

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
Ext.application({
    name:'Myapp',
    launch:function(){
        
        //tab 패널은 자동적으로 버튼이 생긴다
        var homeView = Ext.create('Ext.Panel',{
            title:'Home',
            style:'background-color:#ff0000',
            
        });
 
        var loginView = Ext.create('Ext.Panel',{
            title:'Login',
            style:'background-color:#00ff00',
            
        });
        
        var listView = Ext.create('Ext.Panel',{
            title:'Home',
            style:'background-color:#0000ff',
            
        });
        
        var rootPanel = Ext.create('Ext.tab.Panel', {
            
            fullscreen:true,
            ui:'light',            
            tabBarPosition:'top', //tab의 위치 지정
            items:[homeView, loginView, listView]
                 
        });
        
 
    }
});
 
 
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
 
Ext.application({
    name:'Myapp',
    launch:function(){
        
        var homeView = Ext.create('Ext.Panel',{
            title:'Home',
            style:'background-color:#ff0000',
            
        });
 
        var loginView = Ext.create('Ext.Panel',{
            title:'Login',
            style:'background-color:#00ff00',
            
        });
        
        var listView = Ext.create('Ext.Panel',{
            title:'List',
            style:'background-color:#0000ff',
            
        });    
        
        var btnHomeView = Ext.create('Ext.Button', {
            text:'Home',
            ui:'back',
            align:'left',
            hidden:true,
            handler:function(btn,event){
                //화면 전환 transition 화면 전환 효과
                rootPanel.getLayout().setAnimation({
                    type:'slide',
                    direction:'right',
                    
                });
                
                // 화면 지정
                rootPanel.setActiveItem(homeView);
                
                //Titlebar의 제목을 HomeView로 셋팅 
                navBar.setTitle('HomeView');
                btnHomeView.hide (); //화면이 HomeView이면 Home 버튼은 숨김                
                btnLoginViewRight.show();
                btnLoginViewLeft.hide();
                btnListView.hide();
            }
            
        });
        
        var btnLoginViewRight = Ext.create('Ext.Button', {
            text:'Login',
            ui:'forward', // 버튼 정류
            align:'right',
            handler:function(btn,event){
                //화면 전환 transition 화면 전환 효과
                rootPanel.getLayout().setAnimation({
                    type:'slide',
                    direction:'left',
                    
                });
                
                // 화면 지정
                rootPanel.setActiveItem(loginView);
                
                //Titlebar의 제목을 HomeView로 셋팅 
                navBar.setTitle('LoginView');
                btnHomeView.show (); //화면이 HomeView이면 Home 버튼은 숨김                
                btnLoginViewRight.hide();
                btnLoginViewLeft.hide();
                btnListView.show();
            }
            
        });
        
        var btnLoginViewLeft = Ext.create('Ext.Button', {
            text:'Login',
            ui:'back',
            align:'left',
            hidden:true,
            handler:function(btn,event){
                //화면 전환 transition 화면 전환 효과
                rootPanel.getLayout().setAnimation({
                    type:'slide',
                    direction:'right',
                    
                });
                
                // 화면 지정
                rootPanel.setActiveItem(loginView);
                
                //Titlebar의 제목을 LoginView로 셋팅 
                navBar.setTitle('LoginView');
                btnHomeView.show(); //화면이 HomeView이면 Home 버튼은 숨김                
                btnLoginViewRight.hide();
                btnLoginViewLeft.hide();
                btnListView.show();
            }
            
        });
        
        var btnListView = Ext.create('Ext.Button', {
            text:'Login',
            ui:'back',
            align:'left',
            hidden:true,
            handler:function(btn,event){
                //화면 전환 transition 화면 전환 효과
                rootPanel.getLayout().setAnimation({
                    type:'slide',
                    direction:'right',
                    
                });
                
                // 화면 지정
                rootPanel.setActiveItem(loginView);
                
                //Titlebar의 제목을 LoginView로 셋팅 
                navBar.setTitle('LoginView');
                btnHomeView.show(); //화면이 HomeView이면 Home 버튼은 숨김                
                btnLoginViewRight.hide();
                btnLoginViewLeft.hide();
                btnListView.show();
            }
            
        });
        
        var btnListView = Ext.create('Ext.Button', {
            text:'List',
            ui:'forward',
            align:'right',
            hidden:true,
            handler:function(btn,event){
                //화면 전환 transition 화면 전환 효과
                rootPanel.getLayout().setAnimation({
                    type:'slide',
                    direction:'left',
                    
                });
                
                // 화면 지정
                rootPanel.setActiveItem(listView);
                
                //Titlebar의 제목을 listView로 셋팅 
                navBar.setTitle('ListView');
                btnHomeView.hide(); //화면이 HomeView이면 Home 버튼은 숨김                
                btnLoginViewRight.hide();
                btnLoginViewLeft.show();
                btnListView.hide();
            }
            
        });
        
        
        var navBar = Ext.create('Ext.TitleBar', {
            docked:'top',
            ui:'light',
            title:'HomeView',
            items:[btnHomeView, btnLoginViewRight, btnLoginViewLeft, btnListView]
        });
        
        var rootPanel = Ext.create('Ext.Panel', {
            
            fullscreen:true,
            layout:'card',
            items:[navBar, homeView]
                 
        });
        
 
    }
});
 
 
cs


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

Cordova 파일명이 아스키코드가 아닐때(또는 한글일뜨) 빌드 실패  (0) 2016.08.04
특강 7일차 (오후) - 센차터치  (0) 2015.01.13
특강 6일차 (오전) - HTML localstorage, 크로스도메인 AJAX, 센차터치  (0) 2015.01.12
특강 5일차 (오후) - JQuery Mobile  (0) 2015.01.09
특강 5일차 (오전) - JQuery Mobile  (0) 2015.01.09

Java SDK 다운로드 

http://www.oracle.com/technetwork/java/javase/downloads/index.html



개발툴: Spring Tool Suite

https://spring.io/tools/sts

(나중에 jetbrains Intellij 사용)



한글을 이용하기 위한 이클립스 설정 설정 

Window - Preferences - General - Content Types



Java Properties File 항목을 클릭하고 마찬가지로 Default encoding을 UTF-8로 바꾸고 Update 버튼 클릭



Web-> JSP Files 에서도 Encoding을 UTF-8로 바꾼다

Maven 설치 및 설정 

http://maven.apache.org/download.cgi


자기 OS 버전에 맞는 파일을 다운로드 하여 압축을 풀고 패스 경로를 지정해준다




Apache 톰캣서버 - 기존방법대로 설치

톰캣 압축 파일 OS버전에 맞춰 톰캣 7.0 다운로드 

Eclipse Preferences 에서 runtime environment 에서 tomcat 7.0 설정

File -> New -> Other -> Server 로 가서 Tomcat 서버 추가


Tomcat 서버 클릭후 Tomcat 서버 압축 푼곳에 경로 설정


서버추가후 Servers 폴더가 나타나는데 

server.xml 안에 두부분 아래와 같이 수정 (한글처리를 위해)

1
<Connector connectionTimeout="20000" port="9999" protocol="HTTP/1.1" redirectPort="8443" URIEncoding="UTF-8"/>
cs
1
<Connector port="8009" protocol="AJP/1.3" redirectPort="8443"  URIEncoding="UTF-8"/>
cs


메이븐을 활용한 프로젝트 생성

메이븐 기본개념 정리 블로그 - 

http://dimdim.tistory.com/entry/Maven-%EC%A0%95%EB%A6%AC

메이븐 설치후 프로젝트가 들어갈 워크스페이스 폴더에 위치 시킨다

폴도 윈도우 안에 마우스를 두고 오른쪽을 클릭하면 여기에 명령창 열기가 컨텍스트 메뉴에 추가되는데 클릭한후 위에 명령어를 실행한다. 


첫번째 프로픔트가 깜빡거릴때 엔터키를 누르고

Choose a number :: 6 :: 다음에 깜빡거릴때 엔터기를 누른다 이때 받아들인 버전은 archetype 1.1 버전을 말한다. 

세번째 프롬프트가 'groupId' :: 다음에 깜빡거릴때 com.ensoa



Eclipse 로 Maven 프로젝트 만들기


요소

 설명

<groupId>

프로젝트 그룹ID 

<artifactId> 

프로젝트 아티팩트 ID 

<version>

버전 

<packaging> 

패키징 .방식 : jar, war, ear 

<dependencies> 

이 프로젝트가 의존하는 다른 프로젝트 정보 

메이븐 프로젝트 의존성 설정

프로젝트가 의존하는 다른 프로젝트에 대한 정보는 <dependancy> 요소로 설장한다 . <dependency> 요소 안에는 다음 서브 요소를 포함한다. 


 요소

설명 

<groupId> 

의존 프로젝트 그룹 ID 

<artifactId> 

의존 프로젝트 아티팩트 ID 

<version> 

버전 

Ex) 프로젝트에서 스프링 프레임 워크를 사용하고자 한다면, Spring 프레임 워크 의존성을 추가해야 한다. 

1
2
3
4
5
6
7
<dependencies>
    <dependency>
     <groupdId>org.springframework</groupdId>
     <artifactId>spring-context</artifactId>
     <version>4.1.1.RELEASE</version>
    </dependency>
</dependencies>
cs

스프링 프레임 워크를 사용하기 위해서는 spring-context 모듈만 필요한것은 아님

스프링 프레임워크는 19개의 독립적인 모듈 즉, jar 파일로 구성되어 있다. 

실제 Maven으로 다운로드한 pom.xml을 보면 많은 프로젝트가 의존하고 있는것을 볼수 있다


의존성을 설정할 때 <scope> 요소를 사용하여 의존성 범위를 지정 가능 


 설정 값

설명 

compile 

컴파일 시에 필요함. 실행과 테스트 시에도 포함됨. 디폴트 값

runtime 

실행시 필요함. 컴파일에는 필요하지 않지만, 실행 할 때 필요하며 배포 할때 포함됨 

provided 

컴파일할 때는 필요하지만, 실행 시에는 컨테이너 등에서 기본으로 제공하기 때문에 배포할 필요가 없음.  

test 

테스트 코드를 컴파일 할때 필요함. 테스트 시에는 포함되지만, 배포 시에는 제외됨 


레파지토리 



'Java > Spring Framework' 카테고리의 다른 글

스프링 프레임워크 마이그레이션 3.2.9 to 4.3.5  (0) 2016.12.22
Spring 한글설정  (0) 2015.03.19
Spring AOP  (0) 2015.01.19
스프링 스터디 - 의존성 주입 대상  (0) 2015.01.14
프레임 워크 배우기 좋은 웹사이트  (0) 2014.11.04

HTML 내장 DB - sqlite3


01.html


소스코드 참고

openDatabase = 데이터베이스 검사한후 데이터베이스가 존재하면 생성하지 않음 

Init작업을 했는데 왜 또 Init을 하는지


크로스 도메인 처리

서버가 다르면 보안규칙에 위배되어 AJAX 통신이 되지 않는다 

AJAX는 기보적으로 다른 서버와의 통신이 안된다

다른서버와의 통신은 JSONP로만 데이터로만 가능하다. 

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
96
97
98
99
100
101
102
103
104
105
<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">
//기존 JSON방식
/*     $(function(){
        $.ajax({
            type:'GET',
            url:'jqm_nojsonp.jsp',
            dataType:'json',
            success:function(data){
                $('#item_list').empty();
                $.each(data, function(index, item){
                    var str='';
                    str += '<li>';
                    str += '<a href="#">';
                    str += '<h3>' + item.code +' :' + item.name + '</h3>';
                    str += '<p> 수량' + item.quantity + ', 가격 ' + item.price + '</p>';
                    str += '</a>';
                    str += '</li>';
                    
                    $('#item_list').append(str);
                    
                });
                
                //리스트뷰 작업이 완료되었으면 리스트뷰를 refresh
                $('#item_list').listview('refresh');
            }        
        });
    }); */
 
    /* 
        ajax 사용시 크로스 도메인의 경우 JSONP을 이용해야 함.
        보안을 위해 소스 근원지가 같을 때만 데이터 통신을 허용하기 때문에 
        데이터를 호출하는 도메인과 데이터를 반환하는 도메인이 일치해야 함
        JSONP(JSON with PAdding) : 보안 정책에 부합하면서 악성코드를 
        막고 오픈 API들의 서비스도 사용할수 있도록 JSONP 형시그을 사용해서 
        데이터를 주고 받음 
        
    */
    //JSONP형식
    $(function(){
        $.ajax({
            type:'GET',
            url:'http://dragonzone.cafe24.com/jqm_jsonp.jsp',
            dataType:'jsonp',
            //Jquery 버전에 따라 jsoncCallback 으로 인식할 수 있음
            /* jsonp:'dragonp', */
            jsonpCallback: 'dragonp',
            success:function(data){
                $('#item_list').empty();
                $.each(data, function(index, item){
                    var str='';
                    str += '<li>';
                    str += '<a href="#">';
                    str += '<h3>' + item.code +' :' + item.name + '</h3>';
                    str += '<p> 수량' + item.quantity + ', 가격 ' + item.price + '</p>';
                    str += '</a>';
                    str += '</li>';
                    
                    $('#item_list').append(str);
                    
                });
                
                //리스트뷰 작업이 완료되었으면 리스트뷰를 refresh
                $('#item_list').listview('refresh');
            }        
        });
    });
</script>
 
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page" id="first_page">
        <!-- header  -->
        <div data-role="header" data-position="fixed">
            <h1>JSONP 처리</h1>
            <!-- 두번째 페이지로 넘어가지만 창이 하나 뜬 느낌을 주고 싶을떄 -->            
        </div>
        
        <!-- 내용  -->        
        <div role="main" class="ui-content">
            <ul data-role="listview" id="item_list" data-inset="true"> 
                
            </ul>
        </div>    
 
        
        <!-- footer  -->
        <div data-role="footer" data-position="fixed">
            <h1>화면 하단</h1>
        </div>    
    </div>
 
</body>
 
</html>
cs


센차 터치

JavaScript로 HTML도 처리하는 방식

sencha-touch-all 모든 라이브러리

sencha-touch - 필요할떄마다 라이브러리 부르는 형식


대부분의 예제에서 쓰일 기본 HTML 레이아웃 코드 

app.js 부분만 파일명에 따라 교체해주면 된다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>SenchaTouch</title>
 
<link rel="stylesheet" type="text/css" href="../touch/resources/css/sencha-touch.css">
 
<script type="text/javascript" src="../touch/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
    
</body>
</html>
cs

센차 터치 기본 코드 양식

1
2
3
4
5
6
7
8
9
10
11
12
13
Ext.application({
    name:'Myapp',
    launch:function(){
 
        var rootPanel = Ext.create('Ext.Panel', {
            //Ext.viewport.add(panel) 대신 아래 fullscreen:true 로 대체
            fullscreen:true,
            items:[panel]
                 
        });
 
    }
});
cs


app.js

1
2
3
4
5
6
7
8
9
10
11
//브라우저가 렌더링하여 HTML 생성
//초기화 코드
Ext.application({
    //웹앱의 이름을 지정
    name:'MyApp',
    launch:function(){
        alert('launch-run');        
    }
});
 
 
cs

app2.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
Ext.application({
    name:'MyApp',
    launch:function(){
        //패널 생성                이름        옵션
        var panel = Ext.create('Ext.Panel', {
            html:'<br><br><div align="center">Hello World</div>',
            style:'background-color:#ffff00'
        });
        //뷰포트는 기본적으로 비어있어서 컴포넌트를 추가하면 화면을 꽉 채움 
        Ext.Viewport.add(panel);
    }
});
 
 
cs

app3.js

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
 
Ext.application({
    name:'Myapp',
    launch:function(){
        var top = Ext.create('Ext.Panel', {
            //위치 지정
            docked: 'top',
            style: 'background-color:blue; font-size:40px',
            html:'TOP'
            
        });        
        var bottom = Ext.create('Ext.Panel', {
            docked:'bottom',
            style:'background-color:green;font-size:40px',
            html:'<font color="yellow">BOTTOM</font>'
        });        
        var panel = Ext.create('Ext.Panel', {
            //Ext.viewport.add(panel) 대신 아래 fullscreen:true 로 대체
            fullscreen:true,
            items:[top, bottom],
            html:'Panel 바탕입니다. <br>이곳에 글자가 쓰여집니다.' +
                 '<br><font color="red">이제 시작해 볼까요?</font>'+
                 '<br><br><br><div align="center"><img src="./image/user.png" width="60" height="60"></div>'
        });
        //
        //Ext.Viewport.add(panel);
    }
});
 
 
cs

app4.js

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
Ext.application({
    name:'Myapp',
    launch:function(){
        var dockedItem1 = Ext.create('Ext.Panel', {
            //위치 지정
            docked: 'top',
            style: 'background-color:red;',
            html:'top'
            
        });
        
        var dockedItem2 = Ext.create('Ext.Panel', {
            //위치 지정
            docked: 'left',
            style: 'background-color:gray;',
            html:'left'
                
        });
        
        var dockedItem3 = Ext.create('Ext.Panel', {
            //위치 지정
            docked: 'bottom',
            style: 'background-color:yellow;',
            html:'bottom'
            
        });    
        
        var dockedItem4 = Ext.create('Ext.Panel', {
            //위치 지정
            docked: 'right',
            style: 'background-color:green;',
            html:'right'
            
        });    
 
        var rootPanel = Ext.create('Ext.Panel', {
            //Ext.viewport.add(panel) 대신 아래 fullscreen:true 로 대체
            fullscreen:true,
            items:[dockedItem1, dockedItem2, dockedItem3, dockedItem4],
            html:'내용이 보여짐'
                 
        });
        //
        //Ext.Viewport.add(panel);
    }
});
 
 
cs

app5.js

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
 
Ext.application({
    name:'Myapp',
    launch:function(){
        
        var panel = Ext.create('Ext.Panel',{
            style:'background-color:#00ff00',
            //html 속성으로 지정하기에 복잡한 내용은 html 문서의 body 부분에 
            //지정하고 id를 부여해 호출 가능
            //HTML구조가 복잡하기때문에 아래와 같은 경우 많음
            contentEl:'panelContent'
        });
        
 
        var rootPanel = Ext.create('Ext.Panel', {
            //Ext.viewport.add(panel) 대신 아래 fullscreen:true 로 대체
            fullscreen:true,
            items:[panel]
                 
        });
        //
        //Ext.Viewport.add(panel);
    }
});
 
 
cs


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

특강 7일차 (오후) - 센차터치  (0) 2015.01.13
특강 7일차 (오전) - 센차터치  (0) 2015.01.13
특강 5일차 (오후) - JQuery Mobile  (0) 2015.01.09
특강 5일차 (오전) - JQuery Mobile  (0) 2015.01.09
특강 4일차 (오후) - JQuery Mobile  (0) 2015.01.08


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

특강 7일차 (오전) - 센차터치  (0) 2015.01.13
특강 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

화면전환 방법

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

티스토리툴바