Ajax mobile 에서는 아래와 같은 형태로 loader 가 존재하는데 문제는 기본스타일이 구식이므로 커스텀이 필요한 경우가 많다. 


.ui-loader .ui-icon-loading {
  background-color: #000; 
  display: block;
  margin: 0;
  width: 2.75em;
  height: 2.75em;
  padding: .0625em;
  -webkit-border-radius: 2.25em;
  border-radius: 2.25em;
}

.ui-icon-loading {
  background: url(images/ajax-loader.gif);
  background-size: 2.875em 2.875em;
 }


위의 항목들중에 일부를 변경하여 쉽게 변경한다. 

보통 이미지를 바꾸고 싶어하므로 .ui-icon-loading 의 url 항목을 아래와 같이 변경한다 .


1. 

.ui-loader .ui-icon-loading {
   background-color: transparent;
}

.ui-icon-loading {
   background: url("더_url.gif");
}



2. JQuery 모바일에서 이미 HTML으로 커스텀하에 지정하는 기능이 있는데 위의 경우보단 약간 까다롭다


자세한건 아래 링크를 참조해보자. 예제 소스를 보면 쉽게 따라 할수 있다.

http://demos.jquerymobile.com/1.4.5/loader/#CustomHTML



참조:

1. http://stackoverflow.com/questions/23849604/how-to-change-the-default-jquery-mobile-loading-icon

저작자표시

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

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

Cordova로 갑작스럽게 Build 에러가 나서 원인을 찾지 못한채 삽질을 해보다가 검색을 해보니


Resource 파일명이 아스키코드가 아니면 나는 에러이다. 그림파일중 일부가 한글파일인 상태로 그대로이기때문에 일어나는 문제였다.



Error: cmd: Command failed with exit code 1 Error output:

FAILURE: Build failed with an exception.


* What went wrong:

Execution failed for task ':processDebugResources'.

> com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command 'C:\andsdk\build-tools\24.0.1\aapt.exe'' finished with non-zero exit value 1


* Try:

Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.


파일명을 한글에서 영문으로 바꾸어주니 잘해결되었다. 


참고: 

http://stackoverflow.com/questions/38690348/ionic-build-failed-find-the-line-where-the-error-occurs

저작자표시

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

JQuery mobile 에서 로더(스피너) 변경  (0) 2016.12.13
특강 7일차 (오후) - 센차터치  (0) 2015.01.13
특강 7일차 (오전) - 센차터치  (0) 2015.01.13
특강 6일차 (오전) - HTML localstorage, 크로스도메인 AJAX, 센차터치  (0) 2015.01.12
특강 5일차 (오후) - JQuery Mobile  (0) 2015.01.09

캐러솔 

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
 
Ext.application({
    name:'Myapp',
    launch:function(){
        
        var carousel = Ext.create('Ext.Carousel', {
            direction:'vertical',
            indicator:true,
            items:[
                   {
                       title:'Tab 1',
                       html:'<div align="center"><br><img src="../image/j.jpg" width="101" height="133"><br>직급: 왕자</div>',
                       
                   },
                   {
                       title:'Tab 2',
                       html:'<div align="center"><br><img src="../image/k.jpg" width="101" height="133"><br>직급: 킹</div>',
                       
                   },
                   {
                       title:'Tab 3',
                       html:'<div align="center"><br><img src="../image/q.jpg" width="101" height="133"><br>직급: 여왕</div>',
                       
                   }
                   ]
        });
        
        var rootPanel = Ext.create('Ext.Panel', {
            
            fullscreen:true,
            layout:{
                type:'vbox', align:'stretch', pack    :'center'
            },
            defaults:{
                flex:1
            },
            items:[carousel]
                 
        });
        
 
    }
});
 
 
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
 
Ext.application({
    name:'Myapp',
    launch:function(){
        
        
        // 모델에서 필드 정의 
        Ext.define('Contact', {
            extend:'Ext.data.Model',
            config:{
                fields:['firstName', 'lastName', 'tel', 'email']
            }
        });
        
        //필드에 매핑되는 데이터를 정의 
        var contactStore = Ext.create('Ext.data.Store', {
            model:'Contact',
            data:[
                  {firstName:'말자', lastName:'김', tel:'010-1234-1234', email:'user1@naver.com'},
                  {firstName:'태희', lastName:'이', tel:'010-1234-1234', email:'user1@naver.com'},
                  {firstName:'동일', lastName:'박', tel:'010-1234-1234', email:'user1@naver.com'},
                  {firstName:'수길', lastName:'신', tel:'010-1234-1234', email:'user1@naver.com'},
                  {firstName:'민규', lastName:'이', tel:'010-1234-1234', email:'user1@naver.com'},
                  {firstName:'희원', lastName:'박', tel:'010-1234-1234', email:'user1@naver.com'}                  
                  ]
        });
        
        //목록 처리
        var contactList = Ext.create('Ext.dataview.List',{
            store:contactStore,
            itemTpl:'<div>{lastName} {firstName}</div>'
        });
        
        var btnPrev = Ext.create('Ext.Button', {
            text:'이전',
            ui:'back',
            align:'left',
            hidden:true
        });
        
        var navBar = Ext.create('Ext.TitleBar', {
            docked:'top',
            ui:'light',
            title:'연락처 목록',
            items:[btnPrev]
        });
        
        var rootPanel = Ext.create('Ext.Panel', {            
            fullscreen:true,
            layout:'card',
            items: [navBar, contactList],
            items:[navBar, contactList]
                 
        });
        
 
    }
});
 
 
cs


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

JQuery mobile 에서 로더(스피너) 변경  (0) 2016.12.13
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

탭바 

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

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

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

오후 초반내용

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

JQuery 

부트스트랩 - UIFramework

JQueryMoblie UI 버튼 코딩

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<!-- 
width :  넓이(픽셀) height : 높이(픽셀) 
initial-scale : 초기 배율(기본 꽉 찬 화면)
minimum-scale : 최소 배율(기본 값 : 0.25, 범위: 0~10.0)
maximum-scale : 최대 배율(범위:0~10.0)
user-scalable : 확대, 축소 여부(yes/no)
 -->
<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>
    <!-- page 지정 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>화면 상단</h1>
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            <h4>기본 버튼(ui-btn)</h4>
            <a href="#" class="ui-btn">a 태그</a>
            <button class="ui-btn">Button</button>
            
            <h4>모서리가 둥근 버튼(ui-corner-all)</h4>
            <a href="#" class="ui-btn ui-corner-all">a 태그</a>
            <button class="ui-btn ui-corner-all">Button</button>            
            
            <h4>그림자 효과 주기(ui-shadow)</h4>
            <a href="#" class="ui-btn ui-shadow">a 태그</a>
            <button class="ui-btn ui-shadow">Button</button>
            
            <h4>인라인(ui-btn-inline)</h4>
            <a href="#" class="ui-btn ui-btn-inline">a 태그</a>
            <button class="ui-btn ui-btn-inline">Button</button>
            
            <h4>테마(ui-btn-a, ui-btn-b)</h4>
            <a href="#" class="ui-btn ui-btn-b">a 태그</a>
            <button class="ui-btn ui-btn-b">Button</button>
            
            <h4>미니(조금 작게 표시)(ui-mini)</h4>
            <a href="#" class="ui-btn ui-mini">a 태그</a>
            <button class="ui-btn ui-mini">Button</button>
            
            <h4>아이콘 지정(ui-icon-delete), 아이콘 위치(ui-btn-icon-left)</h4>
            <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">a 태그</a>
            <button class="ui-btn ui-icon-camera ui-btn-icon-left">Button</button>
            
            <h4>아이콘만 표시(ui-btn-icon-notext)</h4>
            <!-- 직선 테두리를 곡선 형태로 ui-corner-all  -->
            <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">a 태그</a>
            <button class="ui-btn ui-icon-camera ui-btn-icon-notext">Button</button>
            
            <h4>아이콘 위치 지정(ui-btn-icon-left, right, top, bottom)</h4>
            <!-- 직선 테두리를 곡선 형태로 ui-corner-all  -->
            <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Left</a>
            <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-right">right</a>
            <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-top">top</a>
            <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-bottom">bottom</a>
            
            <h4>비활성화(ui-state-disabled)</h4>
            <a href="#" class="ui-btn ui-state-disabled">a 태그</a>
            <!-- disabled="", disabled="siabled"  둘 다 가능 -->
            <button disabled="disabled">Button</button>
            
            <h4>일반적인 형태의 버튼(data-role="none")</h4>
            <button data-role="none">Button</button>
            
            
                                                            
        </div>
        
        <!-- footer  -->
        <div data-role="footer">
                <h1>화면 하단</h1>
        </div>
    </div>
 
</body>
</html>
cs




커스텀 아이콘

실습 그림파일 

WEBCONTENT - images 폴더 생성후 폴더안에 그림파일 넣음


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
<!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">
<style type="text/css">
    /* 커스텀 아이어넣는 형식은 정해져 있음  */
    .ui-icon-myicon:after{
        background-image:url("../image/letter-s.png");
        background-size:18px 18px;
    }
</style>
<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>
    <!-- page 지정 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>아이콘 그림 지정과 커스텀 아이콘</h1>
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            <h4>아이콘(ui-icon-action)</h4>
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action">action</button>                        
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-alert">alert</button>
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-arrow-d">arrow-d</button>
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-arrow-d-l">arrow-d-L</button>
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-audio">audio</button>                        
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-camera">camera</button>
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-edit">edit</button>
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-heart">heart</button>
            
            <h4>커스텀 아이콘</h4>
            <!-- .ui-icon-myicon:after{
                background-image:url("../image/letter-s.png");
                background-size:18px 18px;
            } 18px * 18px 그림으로 항상 만들어야한다-->
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-myicon">myicon</button>
                        
        </div>
        
        <!-- footer  -->
        <div data-role="footer">
                <h1>화면 하단</h1>
        </div>
    </div>
 
</body>
</html>
cs


Button Group

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<!-- 
width :  넓이(픽셀) height : 높이(픽셀) 
initial-scale : 초기 배율(기본 꽉 찬 화면)
minimum-scale : 최소 배율(기본 값 : 0.25, 범위: 0~10.0)
maximum-scale : 최대 배율(범위:0~10.0)
user-scalable : 확대, 축소 여부(yes/no)
 -->
 
<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>Button Group</h1>
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            <h4>수직 버튼 그룹</h4>
            <!-- 
            data-role="controlgroup" 버튼을 수직 또는 수평으로 그룹핑(수직이 기본)
            data-type="horizontal | vertical" 수평, 수직
             -->
            <div data-role="controlgroup">
                <a href="#" class="ui-btn ui-corner-all">No Icon</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">Left</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-right">Right</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-top">top</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-bottom">bottom</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext">Notext</a>
                
            </div>    
            
            <h4>미니 수직 버튼 그룹</h4>
            <div data-role="controlgroup" data-mini="true">
                <a href="#" class="ui-btn ui-corner-all">No Icon</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">Left</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-right">Right</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-top">top</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-bottom">bottom</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext">Notext</a>
            
            </div>
            
            <h4>수평 버튼 그룹</h4>
            <div data-role="controlgroup" data-type="horizontal">
                <a href="#" class="ui-btn ui-corner-all">No Icon</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-back ui-btn-icon-left">Left</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-forward ui-btn-icon-right">Right</a>            
            </div>
            
            <div data-role="controlgroup" data-type="horizontal">
                <a href="#" class="ui-btn ui-corner-all ui-icon-home ui-btn-icon-top">Top</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-refresh ui-btn-icon-top">Top</a>            
            </div>
            
            <div data-role="controlgroup" data-type="horizontal">
                <a href="#" class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-bottom">bottom</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-shop ui-btn-icon-bottom">bottom</a>            
            </div>            
 
            <div data-role="controlgroup" data-type="horizontal">
                <a href="#" class="ui-btn ui-corner-all ui-icon-phone ui-btn-icon-notext">Icon only</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-mail ui-btn-icon-notext">Icon only</a>            
            </div>    
            
            <h4>미니 사이즈</h4>
            <div data-role="controlgroup" data-type="horizontal" data-mini="true">
                <a href="#" class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-bottom">bottom</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-shop ui-btn-icon-bottom">bottom</a>            
            </div>                                            
                                                        
        </div>
        
        <!-- footer  -->
        <div data-role="footer">
                <h1>화면 하단</h1>
        </div>
    </div>
 
</body>
</html>
cs


Header와 Footer에 아이콘 적용될때의 차이점

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<!-- 
width :  넓이(픽셀) height : 높이(픽셀) 
initial-scale : 초기 배율(기본 꽉 찬 화면)
minimum-scale : 최소 배율(기본 값 : 0.25, 범위: 0~10.0)
maximum-scale : 최대 배율(범위:0~10.0)
user-scalable : 확대, 축소 여부(yes/no)
 -->
 
<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>header</h1>
            <!-- 
                header에서 버튼은 ui-btn을 생략 가능하지만 생략시 기본값 아이콘
                적용되지 않는다. 자동으로 좌우 배치            
            -->
            <a href="#" class="ui-btn ui-btn-icon-left ui-icon-back">이전</a>
            <a href="#" class="ui-btn ui-btn-icon-right ui-icon-forward">다음</a>
            <!-- <a href="#">이전</a>            
            <a href="#" class="ui-btn-icon-right ui-icon-forward">다음</a> -->
        </div>
        <div data-role="header">
            <h1>header</h1>
            <a href="#" class="ui-btn ui-btn-icon-right ui-icon-forward ui-btn-right">다음</a>
        </div>
        
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
                                            
                                                    
        </div>
        
        <!-- footer  -->
        <div data-role="footer">
            <h1>화면 하단</h1>
            <!-- header와 달리 좌우로 자동 배치 되지 않음 임의로 지정 -->
            <!-- 좌우 자동배치가 되지 않기 때문에 좌우를 지정해야 함 -->
            <a href="#" class="ui-btn ui-btn-icon-left ui-icon-back ui-btn-left">이전</a>
            <a href="#" class="ui-btn ui-btn-icon-right ui-icon-forward ui-btn-right">다음</a>
            
        </div>
    </div>
 
</body>
</html>
cs


Header와 Footer 그룹버튼 적용

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
<!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>header</h1>
            <!-- 버튼 그룹에서는 ui-btn 생략 불가 -->
            <div data-role="controlgroup" data-type="horizontal" align="center">
                <a href="#" class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-delete">Remove</a>
                <a href="#" class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-plus">Add</a>
                <a href="#" class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-u">Up</a>
                <a href="#" class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-d">Down</a>
            </div>
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
                                                            
        </div>
        
        <!-- footer  -->
        <div data-role="footer">
            <h1>화면 하단</h1>
            <div data-role="controlgroup" data-type="horizontal" align="center">
                <a href="#" class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-delete">Remove</a>
                <a href="#" class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-plus">Add</a>
                <a href="#" class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-u">Up</a>
                <a href="#" class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-d">Down</a>
            </div>
        </div>
    </div>
 
</body>
</html>
cs


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

특강 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
특강 2일차 (오전, 오후) - 제이쿼리  (0) 2015.01.06

데이터 입력 및 표시 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    form {
        width:500px;
        margin:10px auto;
    }
    
    ul {
        padding:0;
        margin:0;
        list-style:none;
    }    
    
    ul li {
        padding:0;
        margin: 0 0 10px 0;
        
    }
    
    label {
        width:100px;
        float:left;            
    }
    
    table {
        border:solid 1px gray;
        width: 500px;
        margin: 0 auto;
        border-collapse:collapse;        
    }
    
    td {
        border: solid 2px gray;
    }
</style>
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        //목록
        function selectData(){
            //table의 내부내용을 제거(초기화)
            $('#output').empty();
            
            $.getJSON('getPeopleJSON.jsp', function(data){
                $(data).each(function(index,item){
                    var output='';
                    
                    output += '<tr>';
                    output += '<td>'+item.id+'</td>';
                    output += '<td>'+item.name+'</td>';
                    output += '<td>'+item.job+'</td>';
                    output += '<td>'+item.address+'</td>';
                    output += '<td>'+item.bloodType+'</td>';
                    output += '</tr>';
                    
                    $('#output').append(output);
                    
                });
            });
        }
        
        //이벤트 연결 
        $('#insert_form').submit(function(event){
            
            //입력 양식의 내용을 요청 매개 변수 문자열로 만듬
            //(파라미터네임과 value의 쌍, 인코딩 처리)
            var data = $(this).serialize();
            
                    //요청 URL        ,전송할 데이터, 전송이 성공하면 호출되는 함수 
            $.post('insertPerson.jsp', data, initForm); 
            
            //기본 이벤트 제거 
            event.preventDefault();
            
        });
        
        function initForm(data){
                    //전송된 데이터를 JSON 객체로 생성
            var s = $.parseJSON(data); //여기 데이터는 무슨데이터?
            
            if(s.result=='success'){
                alert('등록 완료');
                
                //폼 초기화 
                $('#id').val('');
                $('#name').val('');
                $('#job').val('');
                $('#address').val('');
                $('#bloodType').val('');
            }else {
                alert('등록 실패!!');
            }
            
            //목록 읽기 
            selectData();
            
        }
        
        //초기 회면에 데이터를 표시 
        selectData();
        
    });
</script>
</head>
<body>
<div>
    <form id="insert_form" method="method">
        <fieldset>
            <legend>데이터 추가</legend>
            <ul>
                <li>
                    <label for="id">아이디</label>
                    <input type="text" name="id" id="id">
                </li>
                <li>
                    <label for="name">이름</label>
                    <input type="text" name="name" id="name">
                </li>
                <li>
                    <label for="job">직업</label>
                    <input type="text" name="job" id="job">
                </li>                                
                <li>
                    <label for="address">주소</label>
                    <input type="text" name="address" id="address">
                </li>                            
                <li>
                    <label for="id">혈행형</label>
                    <input type="text" name="bloodType" id="bloodType">
                </li>
                <li>
                    <input type="submit" value="추가">
                </li>
            </ul>
        </fieldset>                
    </form>
</div>
 
<table id="output">
    
</table>
 
</body>
</html>
cs


get People JSON.jsp 서버 페이지 - 데이터 불러오는 서버 페이지

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
<%@ page language="java" contentType="text/plain; charset=euc-kr"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
[<% 
String jdbcUrl = "jdbc:oracle:thin:@172.18.65.193:1521:xe";
String dbId = "hr";
String dbPass = "hr";
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
 
try{
    Class.forName("oracle.jdbc.driver.OracleDriver");
    conn = DriverManager.getConnection(jdbcUrl, dbId, dbPass);
    
    String sql = "select * from people order by id asc";
    pstmt = conn.prepareStatement(sql);
    rs = pstmt.executeQuery();
    
    while(rs.next()){
        String id = rs.getString("id");
        String name = rs.getString("name");
        String job= rs.getString("job");
        String address= rs.getString("address");
        String bloodType= rs.getString("bloodType");
        
        if(rs.getRow()>1){
            out.print(", ");
        }
        %>
        {
            "id": "<%=id %>",
            "name": "<%=name %>",
            "job": "<%=job %>",
            "address": "<%=address %>",
            "bloodType": "<%=bloodType %>"            
        }
        <%
    }    
    
}catch(Exception e){
    e.printStackTrace();
    
} finally{
    if(rs!=null)try{rs.close();}catch(SQLException e){}
    if(pstmt!=null)try{pstmt.close();}catch(SQLException e){}
    if(conn!=null)try{conn.close();}catch(SQLException e){}
}
    
%>
]
cs

insertPerson.jsp

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
<%@ page language="java" contentType="text/plain; charset=euc-kr"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<% 
String jdbcUrl = "jdbc:oracle:thin:@172.18.65.193:1521:xe";
String dbId = "hr";
String dbPass = "hr";
 
request.setCharacterEncoding("utf-8");
String id = request.getParameter("id");
String job = request.getParameter("job");
String name = request.getParameter("name");
String address = request.getParameter("address");
String bloodType = request.getParameter("bloodType");
Connection conn = null;
PreparedStatement pstmt = null;
 
try{
    Class.forName("oracle.jdbc.driver.OracleDriver");
    conn = DriverManager.getConnection(jdbcUrl, dbId, dbPass);
    
    String sql = "insert into people(id, name, job, address, bloodType) values (?,?,?,?,?)";
    pstmt = conn.prepareStatement(sql);
    pstmt.setString(1, id);
    pstmt.setString(2, job);
    pstmt.setString(3, name);
    pstmt.setString(4, address);
    pstmt.setString(5, bloodType);
    
    pstmt.executeUpdate();
    %>
    {"result":"success"}
    <%
    
}catch(Exception e){
    
    %>
    {"result":"failure"}
    <%
    e.printStackTrace();
    
} finally{
    
    if(pstmt!=null)try{pstmt.close();}catch(SQLException e){}
    if(conn!=null)try{conn.close();}catch(SQLException e){}
}
    
%>
 
cs



JQueryMobile + SenchaTouch

교재: 

jQueryMobilenSenchaTouch.pdf


데이터 처리량이 많지 않은 곳에서 사용

앱을 만든다면 아직까지는 네이티브를 추천 

속도를 향상시키기이해서는 웹브라우저 자체 엔진의 속도를 향상시켜야 한다 


기초

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>
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<!-- 
width :  넓이(픽셀) height : 높이(픽셀) 
initial-scale : 초기 배율(기본 꽉 찬 화면)
minimum-scale : 최소 배율(기본 값 : 0.25, 범위: 0~10.0)
maximum-scale : 최대 배율(범위:0~10.0)
user-scalable : 확대, 축소 여부(yes/no)
 -->
 
<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>화면 상단</h1>
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-contnet">
            <p>Hello jQuery Mobile</p>
        </div>
        
        <!-- footer  -->
        <div data-role="footer">
                <h1>화면 하단</h1>
        </div>
    </div>
 
</body>
</html>
cs


JQUERY + 버튼 만들기 

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<!-- 
width :  넓이(픽셀) height : 높이(픽셀) 
initial-scale : 초기 배율(기본 꽉 찬 화면)
minimum-scale : 최소 배율(기본 값 : 0.25, 범위: 0~10.0)
maximum-scale : 최대 배율(범위:0~10.0)
user-scalable : 확대, 축소 여부(yes/no)
 -->
 
<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>화면 상단</h1>
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            <h4>기본 버튼(ui-btn)</h4>
            <a href="#" class="ui-btn">a 태그</a>
            <button class="ui-btn">Button</button>
            
            <h4>모서리가 둥근 버튼(ui-corner-all)</h4>
            <a href="#" class="ui-btn ui-corner-all">a 태그</a>
            <button class="ui-btn ui-corner-all">Button</button>            
            
            <h4>그림자 효과 주기(ui-shadow)</h4>
            <a href="#" class="ui-btn ui-shadow">a 태그</a>
            <button class="ui-btn ui-shadow">Button</button>
            
            <h4>인라인(ui-btn-inline)</h4>
            <a href="#" class="ui-btn ui-btn-inline">a 태그</a>
            <button class="ui-btn ui-btn-inline">Button</button>
            
            <h4>테마(ui-btn-a, ui-btn-b)</h4>
            <a href="#" class="ui-btn ui-btn-b">a 태그</a>
            <button class="ui-btn ui-btn-b">Button</button>
                        
        </div>
        
        <!-- footer  -->
        <div data-role="footer">
                <h1>화면 하단</h1>
        </div>
    </div>
 
</body>
</html>
cs


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

특강 4일차 (오후) - JQuery Mobile  (0) 2015.01.08
특강 4일차 (오전) - JQuery Mobile  (0) 2015.01.08
특강 3일차 (오전) - JQuery, AJAX  (0) 2015.01.07
특강 2일차 (오전, 오후) - 제이쿼리  (0) 2015.01.06
특강 2일차 (오전) - 자바스크립트  (0) 2015.01.06

+ Recent posts

티스토리툴바