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

+ Recent posts

티스토리툴바