Web/jQuery 검색 결과

39개 발견
  1. 미리보기
    2016.03.25 - Palpit

    [jQuery] jQ Mobile 그리드(Grids) - jQuery Mobile 강좌

  2. 미리보기
    2016.03.25 - Palpit

    [jQuery] jQ Mobile 테이블(Tables) - jQuery Mobile 강좌

  3. 미리보기
    2016.03.25 - Palpit

    [jQuery] jQ Mobile 접는 블록(Collapsibles) - jQuery Mobile 강좌

  4. 미리보기
    2016.03.22 - Palpit

    [jQuery] jQ Mobile 패널(Panels) - jQuery Mobile 강좌

  5. 미리보기
    2016.03.22 - Palpit

    [jQuery] jQ Mobile 네비바(Navibars) - jQuery Mobile 강좌

  6. 미리보기
    2016.03.18 - Palpit

    [jQuery] jQ Mobile 툴바(Toolbars) - jQuery Mobile 강좌

  7. 미리보기
    2016.03.17 - Palpit

    [jQuery] jQ Mobile 팝업(Popups) - jQuery Mobile 강좌

  8. 미리보기
    2016.03.17 - Palpit

    [jQuery] jQ Mobile 아이콘(Icons) - jQuery Mobile 강좌

조회수 확인

W3School 를 참고하여 작성하는 jQuery Mobile 강좌입니다.


아래 링크들은 Tutorial 편입니다.


jQ Mobile 시작하기

jQ Mobile 페이지(Pages)

jQ Mobile 버튼(Buttons)

jQ Mobile 아이콘(Icons)

jQ Mobile 팝업(Popups)

jQ Mobile 툴바(Toolbars)

jQ Mobile 네비바(Navibars)

jQ Mobile 패널(Panels)

jQ Mobile 접는 블록(Collapsibles)

jQ Mobile 테이블(Tables)

jQ Mobile 그리드(Grids)




jQuery Mobile Grids

 jQuery Mobile Layout Grids

  jQuery Mobile은 일련의 CSS 기반의 컬럼 레이아웃을 제공합니다. 그러나, 컬럼 레이아웃은 모바일 스크린 너비로 인해 모바일 디바이스에서 일반적으로추천되지 않습니다.


  그러나, 버튼이나 네비게이션 탭과 같은 작은 요소로 위치시키고 싶을 때가 있습니다. 그러면 컬럼은 완벽하죠.


  그리드 안의 컬럼은 테두리, 배경, 마진이나 패딩이 없는 같은 너비입니다.


  5 가지의 레이아웃 그리드를 사용 할 수 있습니다:


Grid ClassColumnsColumn WidthsCorresponds ToExample
ui-grid-solo1100%ui-block-aTry it
ui-grid-a250% / 50%ui-block-a|bTry it
ui-grid-b333% / 33% / 33%ui-block-a|b|c Try it
ui-grid-c425% / 25% / 25% / 25%ui-block-a|b|c|dTry it
ui-grid-d520% / 20% / 20% / 20% / 20%ui-block-a|b|c|d|e

Try it


[출처: w3schools]




 Customize Grids

  CSS를 사용해서 커스터마이즈한 컬럼 블럭을 사용할 수 있습니다:


 * jqcustom.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
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
.ui-block-a, .ui-block-b, .ui-block-c {
    background-color: lightgray;
    border: 1px solid black;
    height: 100px;
    font-weight: bold;
    text-align: center;
    padding: 30px;
}
</style>
</head>
<body>
 
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Customized Columns</h1>
  </div>
 
  <div data-role="main" class="ui-content">
    <p>Three-column Styled Layout:</p>
    <div class="ui-grid-b">
      <div class="ui-block-a"><span>First Column</span></div>
      <div class="ui-block-b"><span>Second Column</span></div>
      <div class="ui-block-c"><span>Third Column</span></div>
    </div>
  </div>
</div
 
</body>
</html>
 
cs






 


 Multi Rows

  또한 컬럼 안에 여러 열을 가질 수 있습니다:


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
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Multiple Rows</h1>
  </div>
 
  <div data-role="main" class="ui-content">
    <p>Three-column Layout:</p>
    <div class="ui-grid-b">
      <div class="ui-block-a" style="border:1px solid black;"><span>Some Text</span></div>
      <div class="ui-block-b" style="border:1px solid black;"><span>Some Text</span></div>
      <div class="ui-block-c" style="border:1px solid black;"><span>Some Text</span></div>
    </div>
 
    <p>Three-column Layout With Multiple Rows:</p>
    <div class="ui-grid-b">
      <div class="ui-block-a" style="border:1px solid black;"><span>Some Text</span></div>
      <div class="ui-block-b" style="border:1px solid black;"><span>Some Text</span></div>
      <div class="ui-block-c" style="border:1px solid black;"><span>Some Text</span></div>
      <div class="ui-block-a" style="border:1px solid black;"><span>Some Text</span></div>
      <div class="ui-block-b" style="border:1px solid black;"><span>Some Text</span></div>
      <div class="ui-block-a" style="border:1px solid black;"><span>Some Text</span></div>
    </div>
  </div>
</div
 
</body>
</html>
 
cs









 Responsive Grids

  작은 스크린에서, 많은 버튼이 나란히 놓여 있는 것은 추천되지 않습니다.


  반응형 그리드를 위해, ui-responsive 클래스를 컨테이너에 추가합니다:


 * jqresgrid.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
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Responsive Layout</h1>
  </div>
 
  <div data-role="main" class="ui-content">
    <h3>Slowly resize the width of your browser window. The layout will adjust itself to fit the "new" width of the browser.</h3>
    <div class="ui-grid-b ui-responsive">
      <div class="ui-block-a">
        <a href="#" class="ui-btn ui-corner-all ui-shadow">First Column Button</a><br>
        <span>First Column: This is some text. This is some text. This is some text. This is some text. This is some text.</span>
      </div>
      <div class="ui-block-b">
        <a href="#" class="ui-btn ui-corner-all ui-shadow">Second Column Button</a><br>
        <span>Second Column: This is some text. This is some text. This is some text. This is some text.</span>
      </div>
      <div class="ui-block-c">
        <a href="#" class="ui-btn ui-corner-all ui-shadow">Third Column Button</a><br>
        <span>Third Column: This is some text. This is some text. This is some text. This is some text.</span>
      </div>
    </div>
  </div>
</div
 
</body>
</html>
 
cs










end






* 본 포스트는 w3school 을 통해 작성된 포스트입니다.

다른 카테고리의 글 목록

Web/jQuery 카테고리의 포스트를 톺아봅니다
조회수 확인

W3School 를 참고하여 작성하는 jQuery Mobile 강좌입니다.


아래 링크들은 Tutorial 편입니다.


jQ Mobile 시작하기

jQ Mobile 페이지(Pages)

jQ Mobile 버튼(Buttons)

jQ Mobile 아이콘(Icons)

jQ Mobile 팝업(Popups)

jQ Mobile 툴바(Toolbars)

jQ Mobile 네비바(Navibars)

jQ Mobile 패널(Panels)

jQ Mobile 접는 블록(Collapsibles)

jQ Mobile 테이블(Tables)

jQ Mobile 그리드(Grids)




jQuery Mobile Tables

 Responsive Tables

  반응형 디자인은 디바이스의 스크린 사이즈와 방향과 같은 사용자 디바이스의 모바일 웹 페이지에서의 내용에 대한 반응을 보일 때 굉장히 유용합니다.


  간단한 클래스 이름으로, jQuery Mobile은 특정 유저에 대한 적절한 내용을 보이기 위해 사용자의 스크린 사이즈와 자동적으로 리사이즈가 가능하도록 인식합니다.


  반응형 테이블은 큰 세트의 표로 나타낸 데이터를 모바일이나 데스크탑에서든 잘 보일 것입니다.


  두 가지 타입의 반응형 테이블이 있습니다: reflow & column toggle



 Reflow Table

  reflow 모드는 데이터가 가장 작은 사이즈에 도달할 때까지 테이블 데이터를 수평적으로 위치시킵니다. 그러고나서, 모든 열을 한꺼번에 수직적으로 그룹화 합니다.


  테이블을 만들고, data-role="table"을 추가하고 <table> 요소에 "ui-resopnsive" 클래스를 추가합니다:


 * jqtable.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
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Reflow Table</h1>
  </div>
  
  <div data-role="main" class="ui-content">
    <p>Reflow Tables lay the table data horizontally until it reaches a minimum size, then all rows are grouped together in a vertical stack with the corresponding labels.</p>
    <p>In this example we have used the well-known Northwind sample database. Below is a selection from the "Customers" table.</p>
    <p>Try to resize the width of your browser window, to see the effect.</p>
    <table data-role="table" class="ui-responsive">
      <thead>
        <tr>
          <th>CustomerID</th>
          <th>CustomerName</th>
          <th>ContactName</th>
          <th>Address</th>
          <th>City</th>
          <th>PostalCode</th>
          <th>Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Obere Str. 57</td>
          <td>Berlin</td>
          <td>12209</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Antonio Moreno Taquer�a</td>
          <td>Antonio Moreno</td>
          <td>Mataderos 2312</td>
          <td>M�xico D.F.</td>
          <td>05023</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Around the Horn</td>
          <td>Thomas Hardy</td>
          <td>120 Hanover Sq.</td>
          <td>London</td>
          <td>WA1 1DP</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Berglunds snabbk�p</td>
          <td>Christina Berglund</td>
          <td>Berguvsv�gen 8</td>
          <td>Lule�</td>
          <td>S-958 22</td>
          <td>Sweden</td>
        </tr>
      </tbody>
    </table>
  </div>
 
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div
 
</body>
</html>
 
cs






  




 tip: 반응형 테이블이 제대로 작동하기 위해서, <thead>와 <tbody> 요소를 반드시 포함해야 합니다. rowspan이나 colspan 속성은 사용하지 마세요; 반응형 테이블에서 지원되지 않습니다.




 Column Toggle Table

  "column toggle" 모드는 데이터를 표시하기 충분한 공간이 없을 때 행을 숨깁니다.


  column toggle 테이블을 생성하기 위해서는, 아래처럼 <table> 요소에 추가해주시면 됩니다:


1
2
3
 
<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
 
cs



  기본적으로, jQuery Mobile은 오른 편의 테이블로부터 컬럼을 숨깁니다. 그러나, 특정 순서에 따라 어느 컬럼이 숨겨지고 보여지게 명시할 수 있습니다. 테이블의 헤더<th>에 data-priority 속성을 추가하고 1 부터 6까지의 숫자를 명시해주면 됩니다:


1
2
3
4
5
 
<th>I will never be hidden</th>
<th data-priority="1">I am very important - I will probably not be hidden</th>
<th data-priority="3">I am less important - I could be hidden</th>
<th data-priority="5">I am not that important - there is a good chance that I will be hidden</th>
cs




  위와 같이 작성을 하고 나면, 프레임워크는 자동적으로 테이블의 오른쪽 코너에 버튼을 추가합니다. 이 버튼은 사용자가 어떤 컬럼을 테이블에서 볼지 정하는 버튼입니다:



 * jqctable.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Column Toggle Table</h1>
  </div>
  
  <div data-role="main" class="ui-content">
     <p>The "column toggle table" will hide columns when there is not enough width to display the data.</p>
    <p>In this example we have used the well-known Northwind sample database. Below is a selection from the "Customers" table.</p>
    <h4>Slowly resize the width of your browser window. The layout will adjust itself to fit the "new" width of the browser. OR, you can use the "Columns..." button to choose which column should be hidden or shown.</h4>
    <table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
      <thead>
        <tr>
          <th data-priority="6">CustomerID</th>
          <th>CustomerName</th>
          <th data-priority="1">ContactName</th>
          <th data-priority="2">Address</th>
          <th data-priority="3">City</th>
          <th data-priority="4">PostalCode</th>
          <th data-priority="5">Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Obere Str. 57</td>
          <td>Berlin</td>
          <td>12209</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Antonio Moreno Taquer�a</td>
          <td>Antonio Moreno</td>
          <td>Mataderos 2312</td>
          <td>M�xico D.F.</td>
          <td>05023</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Around the Horn</td>
          <td>Thomas Hardy</td>
          <td>120 Hanover Sq.</td>
          <td>London</td>
          <td>WA1 1DP</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Berglunds snabbk�p</td>
          <td>Christina Berglund</td>
          <td>Berguvsv�gen 8</td>
          <td>Lule�</td>
          <td>S-958 22</td>
          <td>Sweden</td>
        </tr>
 
      </tbody>
    </table>
  </div>
 
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div
 
</body>
</html>
 
cs








 Styling Tables

  "ui-shadow" 클래스를 사용해서 테이블에 그림자를 추가할 수 있습니다:


1
2
3
 
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable">
 
cs



  







end






* 본 포스트는 w3school 을 통해 작성된 포스트입니다.

다른 카테고리의 글 목록

Web/jQuery 카테고리의 포스트를 톺아봅니다
조회수 확인

W3School 를 참고하여 작성하는 jQuery Mobile 강좌입니다.


아래 링크들은 Tutorial 편입니다.


jQ Mobile 시작하기

jQ Mobile 페이지(Pages)

jQ Mobile 버튼(Buttons)

jQ Mobile 아이콘(Icons)

jQ Mobile 팝업(Popups)

jQ Mobile 툴바(Toolbars)

jQ Mobile 네비바(Navibars)

jQ Mobile 패널(Panels)

jQ Mobile 접는 블록(Collapsibles)

jQ Mobile 테이블(Tables)

jQ Mobile 그리드(Grids)




jQuery Mobile Collapsibles

 Collapsible Content Blocks

  접을 수 있는 성질은 내용을 숨기거나 보일 수 있게 허락합니다, 


  접을 수 있는 내용 블록을 생성하기 위해서는, 컨테이너에 data-role="collapsible"속성을 할당하는 것 입니다.


  컨테이너(div) 안에, 헤더(H1~H6)을 추가하고 확장하길 원하는 HTML 마크업을 추가로 작성하면 됩니다:


 * jqcoll.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Collapsible Blocks</h1>
  </div>
 
  <div data-role="main" class="ui-content">
    <div data-role="collapsible">
      <h1>Click me - I'm collapsible!</h1>
      <p>I'm the expanded content.</p>
    </div>
  </div>
 
  <div data-role="footer">
    <h1>Insert Footer Text Here</h1>
  </div>
</div
 
</body>
</html>
 
cs








  기본적으로 내용은 닫혀 있습니다. 페이지가 로드 될 때 내용을 펼치기 위해서는 data-collapsed="false"를 사용하면 됩니다.


1
2
3
4
5
 
<div data-role="collapsible" data-collapsed="false">
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm now expanded by default.</p>
</div>
cs





 Nested Collapsible Blocks

  접을 수 있는 내용 블록(Collapsible content blocks)은  끼워넣어 질 수 있습니다.


 * jqnested.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Nested Collapsible Blocks</h1>
  </div>
 
  <div data-role="main" class="ui-content">
    <div data-role="collapsible">
      <h1>Click me - I'm collapsible!</h1>
      <p>I'm the expanded content.</p>
      <div data-role="collapsible">
        <h1>Click me - I'm a nested collapsible block!</h1>
        <p>I'm the expanded content in the nested collapsible block.</p>
      </div>
    </div>
  </div>
 
  <div data-role="footer">
    <h1>Insert Footer Text Here</h1>
  </div>
</div
 
</body>
</html>
 
cs






 tip: 접을 수 있는 블록은 당신이 원하는 만큼 계속해서 끼워 넣을 수 있습니다.



 Collapsible Sets

  접을 수 있는 세트는 함께 그룹되어진 접을 수 있는 블록입니다. 다른 블록이 열리면, 다른 블록들은 닫히게 됩니다.


  몇몇의 블록을 생성하고, data-role="collapsibleset"로 작성된 새로운 컨테이너로 감싸줍니다.


 * jqset.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
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Collapsible Sets</h1>
  </div>
 
  <div data-role="main" class="ui-content">
    <div data-role="collapsibleset">
      <div data-role="collapsible">
        <h3>Click me - I'm collapsible!</h3>
        <p>I'm the expanded content.</p>
      </div>
      <div data-role="collapsible">
        <h3>Click me - I'm collapsible!</h3>
        <p>I'm the expanded content.</p>
      </div>
      <div data-role="collapsible">
        <h3>Click me - I'm collapsible!</h3>
        <p>I'm the expanded content.</p>
      </div>
      <div data-role="collapsible">
        <h3>Click me - I'm collapsible!</h3>
        <p>I'm the expanded content.</p>
      </div>
    </div>
  </div>
 
  <div data-role="footer">
    <h1>Insert Footer Text Here</h1>
  </div>
</div
 
</body>
</html>
 
cs










end




* 본 포스트는 w3school 을 통해 작성된 포스트입니다.

다른 카테고리의 글 목록

Web/jQuery 카테고리의 포스트를 톺아봅니다
조회수 확인

W3School 를 참고하여 작성하는 jQuery Mobile 강좌입니다.


아래 링크들은 Tutorial 편입니다.


jQ Mobile 시작하기

jQ Mobile 페이지(Pages)

jQ Mobile 버튼(Buttons)

jQ Mobile 아이콘(Icons)

jQ Mobile 팝업(Popups)

jQ Mobile 툴바(Toolbars)

jQ Mobile 네비바(Navibars)

jQ Mobile 패널(Panels)

jQ Mobile 접는 블록(Collapsibles)

jQ Mobile 테이블(Tables)

jQ Mobile 그리드(Grids)




jQuery Mobile Panels

  jQuery Mobile에서 패널(Panels)은 추가적인 내용을 스크린의 왼쪽 혹은 오른쪽 편에 슬라이드 방식으로 보여지는 것입니다.


  패널을 만들기 위해, <div> 요소에 data-role="panel"을 추가하고 id를 명시하면 됩니다.


  어느 HTML 마크업 안에건 패널을 보이길 원하는 곳에 <div>를 추가합니다:


1
2
3
4
5
6
 
<div data-role="panel" id="myPanel">
  <h2>Panel Header..</h2>
  <p>Some text..</p>
</div>
 
cs



  패널에 접근하기 위해, 패널 <div>의 id를 지정하여 링크를 생성합니다. 



 * jqpanel.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel"
    <h2>Panel Header</h2>
    <p>You can close the panel by clicking outside the panel, pressing the Esc key or by swiping.</p>
  </div
 
  <div data-role="header">
    <h1>Page Header</h1>
  </div>
 
  <div data-role="main" class="ui-content">
    <p>Click on the button below to open the Panel.</p>
    <a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a>
  </div>
 
  <div data-role="footer">
    <h1>Page Footer</h1>
  </div
</div
 
</body>
</html>
 
cs



 





 Closing Panels

  패널의 바깥을 클릭하거나 스와이핑, Esc 키를 눌러서 패널을 닫을 수 있습니다. 패널 닫기를 막기 위해서 아래와 같은 방법으로 막을 수 있습니다:



AttributeValueDescriptionExample
data-dismissibletrue | falseSpecifies whether the panel can be closed by clicking outside of it, or notTry it
data-swipe-closetrue | falseSpecifies whether the panel can be closed by swiping, or not

Try it



  또한, 버튼을 사용해서 패널을 닫을 수 있습니다: data-rel="close" 속성을 <div>에 추가하여 링크를 추가하면 됩니다. 호환성 이유로, 패널을 닫을 때, 사용자가 어느 페이지로 이동해야 할지 알려줄 ID를 지정하여 href 속성에 명시해야 합니다:



 * jqclose.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
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel"
    <h2>Panel Header</h2>
    <p>You can close the panel by clicking outside the panel, pressing the Esc key, by swiping, or by clicking the button below:</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">Close panel</a>
  </div
 
  <div data-role="header">
    <h1>Page Header</h1>
  </div>
 
  <div data-role="main" class="ui-content">
    <p>Click on the button below to open the Panel.</p>
    <a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a>
  </div>
 
  <div data-role="footer">
    <h1>Page Footer</h1>
  </div
</div
 
</body>
</html>
 
cs







 Panel Display

  data-display 속성을 통해 패널의 표시 모드를 제어할 수 있습니다:


Attribute ValueDescription
data-display="overlay"Displays the panel over the content
data-display="push"Animates both the panel and the page at the same time
data-display="reveal"

Default. The panel will sit under the page and reveal as the page slides away



 

1
2
3
4
 
<div data-role="panel" id="overlayPanel" data-display="overlay">
<div data-role="panel" id="revealPanel" data-display="reveal">
<div data-role="panel" id="pushPanel" data-display="push">
cs




 Positioning Panels

  기본적으로, 패널은 스크린의 왼쪽 편에 나타납니다. 패널이 나타나는 것을 오른 편으로 하기 위해, data-position="right" 속성을 명시합니다:



1
<div data-role="panel" id="myPanel" data-position="right">
cs



  또한, 사용자의 스크롤에 따라 패널의 움직임을 제어 할 수 있습니다. 기본적으로는 패널은 스크롤에 따라서 움직이지 않고 밀려나게 됩니다. 


  data-position-fixed="true" 속성을 패널에 주게되면, 스크롤 여부에 상관없이 계속해서 보이게 됩니다:


1
<div data-role="panel" id="myPanel" data-position-fixed="true"
cs






end




* 본 포스트는 w3school 을 통해 작성된 포스트입니다.

다른 카테고리의 글 목록

Web/jQuery 카테고리의 포스트를 톺아봅니다
조회수 확인

W3School 를 참고하여 작성하는 jQuery Mobile 강좌입니다.


아래 링크들은 Tutorial 편입니다.


jQ Mobile 시작하기

jQ Mobile 페이지(Pages)

jQ Mobile 버튼(Buttons)

jQ Mobile 아이콘(Icons)

jQ Mobile 팝업(Popups)

jQ Mobile 툴바(Toolbars)

jQ Mobile 네비바(Navibars)

jQ Mobile 패널(Panels)

jQ Mobile 접는 블록(Collapsibles)

jQ Mobile 테이블(Tables)

jQ Mobile 그리드(Grids)




jQuery Mobile Navigation Bars

 네비게이션 바는 일반적으로 헤더나 풋터 내의 수평으로 정렬된 링크의 그룹으로 이루어져 있습니다.


 바는 data-role="navbar" 속성을 가진 <div> 태그 내부의 정렬되지 않은 리스트의 링크입니다:

 

 * jqnavbar.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Page Two</a></li>
        <li><a href="#">Search</a></li>
      </ul>
    </div>
  </div>
 
  <div data-role="main" class="ui-content">
    <p>My Content..</p>
  </div>
 
  <div data-role="footer">
    <h1>My Footer</h1>
  </div>
</div
 
</body>
</html>
 
 
cs










 Tip: 기본적으로, 네비게이션 바 안의 링크들은 버튼으로 자동적으로 변환되어 집니다(class="ui-btn" 이나 data-role="button"을 사용하지 않아도 됩니다).




 

 Icons in Navigation Buttons

  네비게이션 버튼에 아이콘을 추가하고자 한다면, data-icon 속성을 사용하세요:


1
2
3
 
<a href="#anylink" data-icon="search">Search</a>
 
cs

  


  data-icon 속성은 CSS 클래스의 값과 동일하게 사용됩니다.


  다른점은 data-icon="value"로 명시해야 한다는 점입니다.


Attribute ValueDescriptionIcon
data-icon="home"Home
data-icon="arrow-r"Right Arrow
data-icon="search"Search


[출처: W3Schools]




 Positioning Icons

  네비게이션 버튼 내에서 아이콘의 위치를 정할 수 있습니다: top, right, bottom, left


  아이콘 위치는 네비바 컨테이너에 위치합니다. data-iconpos 속성을 사용하여 위치를 명시합니다:


Attribute ValueDescriptionExample
data-iconpos="top"Top icon alignmentTry it
data-iconpos="right"Right icon alignmentTry it
data-iconpos="bottom"Bottom icon alignmentTry it
data-iconpos="left"Left icon alignmentTry it


  

 Active Buttons

  네비바의 링크가 탭 혹은 클릭되었을 때, 링크는 선택된 모습으로 나타나야 합니다.


  링크를 탭하지 않고 이러한 모습을 보이기 위해서는, class="ui-btn-active"를 사용합니다:



 * jqactive.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
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#" class="ui-btn-active" data-icon="home">Home</a></li>
        <li><a href="#pagetwo" data-icon="arrow-r">Page Two</a></li>
      </ul>
    </div>
  </div>
 
  <div data-role="main" class="ui-content">
    <p>With the ui-btn-active class, notice that the Home button stays highlighted (selected).</p>
    <p>If you click on the Page Two, you will notice that none of the buttons are highlighted (selected).</p>
  </div>
 
  <div data-role="footer">
    <h1>My Footer</h1>
  </div
</div
 
<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#pageone" data-icon="home">Home</a></li>
        <li><a href="#" data-icon="arrow-r">Page Two</a></li>
      </ul>
    </div>
  </div>
 
  <div data-role="main" class="ui-content">
    <p>No buttons are pre-selected (highlighted) in this page..</p
    <p>To get the selected look for each button that represents the page you are actually on, go back to our navbar tutorial and read the next step to find out how!</p>
  </div>
 
  <div data-role="footer">
    <h1>My Footer</h1>
  </div>
</div
 
</body>
</html>
 
cs







  여러 페이지에서, 현재 위치한 페이지에 대한 버튼을 활성화 하기 위해서는 "ui-state-persist"를 "ui-btn-active"와 함께 사용해서 나타낼 수 있습니다.


1
2
3
 
<li><a href="#anylink" class="ui-btn-active ui-state-persist">Home</a></li>
 
cs






end




* 본 포스트는 w3school 을 통해 작성된 포스트입니다.

다른 카테고리의 글 목록

Web/jQuery 카테고리의 포스트를 톺아봅니다
조회수 확인

W3School 를 참고하여 작성하는 jQuery Mobile 강좌입니다.


아래 링크들은 Tutorial 편입니다.


jQ Mobile 시작하기

jQ Mobile 페이지(Pages)

jQ Mobile 버튼(Buttons)

jQ Mobile 아이콘(Icons)

jQ Mobile 팝업(Popups)

jQ Mobile 툴바(Toolbars)

jQ Mobile 네비바(Navibars)

jQ Mobile 패널(Panels)

jQ Mobile 접는 블록(Collapsibles)

jQ Mobile 테이블(Tables)

jQ Mobile 그리드(Grids)


W3School 를 참고하여 작성하는 jQuery Mobile 강좌입니다.


아래 링크들은 Tutorial 편입니다.


jQ Mobile 시작하기

jQ Mobile 페이지(Pages)

jQ Mobile 버튼(Buttons)

jQ Mobile 아이콘(Icons)

jQ Mobile 팝업(Popups)

jQ Mobile 툴바(Toolbars)

jQ Mobile 네비바(Navibars)

jQ Mobile 패널(Panels)

jQ Mobile 접는 블록(Collapsibles)

jQ Mobile 테이블(Tables)

jQ Mobile 그리드(Grids)




jQuery Mobile Toolbars

 툴바 요소는 네비게이션을 쉽게하기 위해 헤더나 풋터 안에 위치합니다


 Header Bars

  헤더는 페이지의 가장 상단에 위치해 있고, 페이지의 타이틀/로고 나 두 개 정도의 버튼을 가지고 있습니다.


  헤더의 왼쪽 혹은 오른쪽 편에 버튼을 추가 할 수 있습니다.


  아래 코드는, 왼쪽에 홈 버튼을 오른쪽에 검색 버튼을 추가하는 코드입니다:


 * jqtoolbar.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page">
  <div data-role="header">
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Home</a>
    <h1>Welcome To My Homepage</h1>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">Search</a>
  </div>
 
   <div data-role="main" class="ui-content">
    <p>Notice that we have added the CSS class of "ui-corner-all" and "ui-shadow" to the header buttons, to make them look a bit more desirable.</p>
  </div>
</div>
 
</body>
</html>
 
cs









 * 헤더는 한개 혹은 두개의 버튼을 포함 할 수 있지만, 풋터는 제한이 없습니다.



 Footer Bars

  풋터는 페이지의 하단에 위치해 있습니다.


  풋터는 헤더보다 좀 더 유연합니다 - 페이지 내부에서 좀 더 기능적이고 변경 가능합니다. 그러므로, 필요한 만큼 많은 버튼을 포함할 수 있습니다:



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
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page">
  <div data-role="header">
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left ">Home</a>
    <h1>Welcome To My Homepage</h1>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left ">Search</a>
  </div>
 
  <div data-role="main" class="ui-content">
    <p>The buttons are for demonstration purposes only, and will not have any effect.</p>
    <p>Notice that we have applied the CSS class of "ui-corner-all" and "ui-shadow" to the buttons in both the header and footer, to make them look more desirable.</p>
  </div>
 
  <div data-role="footer">
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
  </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
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page">
  <div data-role="header">
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left ">Home</a>
    <h1>Welcome To My Homepage</h1>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left ">Search</a>
  </div>
 
  <div data-role="main" class="ui-content">
    <p>The buttons are for demonstration purposes only, and will not have any effect.</p>
    <p>Notice that we have applied the CSS class of "ui-corner-all" and "ui-shadow" to the buttons in both the header and footer, to make them look more desirable.</p>
  </div>
 
  <div data-role="footer">
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
  </div>
</div>
 
</body>
</html>
 
cs








 Tip: 풋터에서 버튼들은 기본적으로 중앙에 위치하지 않습니다. CSS로 중앙에 위치 시킬 수 있습니다:


1
2
 
<div data-role="footer" style="text-align:center;">
cs



  또한 버튼을 그룹화하여 수직 혹은 수평으로 정리할 수 있습니다:


1
2
3
4
5
6
7
<div data-role="footer" style="text-align:center;">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
  </div>
</div>
cs




 Positioning Headers and Footers

  헤더와 풋터는 3 가지 방법으로 위치를 조절할 수 있습니다:

  - Inline: 기본 방식으로 헤더와 풋터는 페이지 내용 상에 직렬로 표시됩니다.

  - Fixed: 헤더와 풋터는 상단과 하단에 위치하게 됩니다.

  - Fullscreen: fixed와 비슷합니다; 아래 예제에서 차이를 확인하세요.



 * Inline

 

1
2
3
<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>
 
cs




 * Fixed 


 

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
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page">
  <div data-role="header" data-position="fixed">
    <h1>Fixed Header</h1>
  </div>
 
  <div data-role="main" class="ui-content">
    <p><b>Tip:</b> To see the effect, try to resize the window if the scrollbar is not available.</p>
 
    <p><b>Tip:</b> Tapping the screen will hide and show the header/footer IF the scrollbar is available. The effect varies depending on where you are on the page.</p>
  
    <p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable  scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..</p>
  </div>
 
  <div data-role="footer" data-position="fixed">
    <h1>Fixed Footer</h1>
  </div>
</div>
 
</body>
</html>
 
cs







 * Fullscreen


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
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page">
  <div data-role="header" data-position="fixed" data-fullscreen="true">
    <h1>Fixed and Fullscreen Header</h1>
  </div>
 
  <div data-role="main" class="ui-content"><br><br>
    <p><b>Tip:</b> To see the effect, try to resize the window if the scrollbar is not available.</p>
 
    <p><b>Tip:</b> Tapping the screen will hide and show the header and footer.</p>
  
    <p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..</p>
  </div>
 
  <div data-role="footer" data-position="fixed" data-fullscreen="true">
    <h1>Fixed and Fullscreen Footer</h1>
  </div>
</div>
 
</body>
</html>
 
cs









end




* 본 포스트는 w3school 을 통해 작성된 포스트입니다.

다른 카테고리의 글 목록

Web/jQuery 카테고리의 포스트를 톺아봅니다
조회수 확인

W3School 를 참고하여 작성하는 jQuery Mobile 강좌입니다.


아래 링크들은 Tutorial 편입니다.


jQ Mobile 시작하기

jQ Mobile 페이지(Pages)

jQ Mobile 버튼(Buttons)

jQ Mobile 아이콘(Icons)

jQ Mobile 팝업(Popups)

jQ Mobile 툴바(Toolbars)

jQ Mobile 네비바(Navibars)

jQ Mobile 패널(Panels)

jQ Mobile 접는 블록(Collapsibles)

jQ Mobile 테이블(Tables)

jQ Mobile 그리드(Grids)




jQuery Mobile Popups


 jQuery Mobile Popups

  팝업은 다이얼로그와 비슷합니다. 팝업 박스는 적은 텍스트나 사진, 맵 등 다른 컨텐츠를 보이려 할 때 유용합니다.


  팝업을 생성하기 위해, <a> 와 <div> 요소를 통해서 시작합니다. <a> 요소는 data-rel="popup" 속성을 추가하고, <div> 요소는 data-role="popup" 속성을 추가합니다.


  <div>의 id를 명시한 뒤, <a> 요소의 href와 명시된 아이디를 연결합니다. 아래 예제를 통해 보도록 하겠습니다.


  

1
2
3
4
5
6
 
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>
 
<div data-role="popup" id="myPopup">
  <p>This is a simple popup.</p>
</div>
cs



  위에서 보시면 myPopup이란 id를 통해서 연결이 되어 있음을 확인 할 수 있습니다.


  팝업 박스의 여분의 패딩과 마진을 원한다면, ui-content' 클래스를 <div> 요소에 추가하세요:


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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>
 
  <div data-role="main" class="ui-content">
    <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>
 
    <div data-role="popup" id="myPopup" class="ui-content">
      <h3>Welcome!</h3>
      <p>The "ui-content" class is especially useful when you have a popup with <span style="font-size:55px;">styled text</span>, and want the edges and corners to look extra clean and sleek. <strong>Note:</strong> The text will wrap to multiple lines if needed.</p>
    </div>
  </div>
 
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div
 
</body>
</html>
 
cs











 Closing Popups

  기본적으로, 팝업은 팝업 박스의 외부를 클릭하거나 "Esc" 키를 누름으로 팝업창은 닫혀집니다. 만약 클릭으로 팝업창이 닫혀지는 것을 원치 않다면, data-dismissaible="false" 속성을 추가합니다.(별로 추천되는 부분은 아닙니다)


  또한, 닫기 버튼을 팝업에 추가할 수 있습니다. 추가하기 위해서는 팝업 컨테이너 내부에 data-rel="back" 속성을 버튼 링크에 추가합니다



DescriptionExample
Right close buttonTry it
Left close buttonTry it
Undismissible PopupTry it

[출처: w3shool]



 Positioning Popups

  기본적으로, 팝업은 클릭된 요소 위에 직접 나타나게 됩니다. 팝업의 위치를 조절하기 위해, data-position-to 속성을 사용합니다:


Attribute valueDescription
data-position-to="window"Popup will appear centered within the window
data-position-to="#myId"Popup is positioned over the element with a specified #id
data-position-to="origin"Default. Popup is positioned directly over the clicked element
1
2
3
4
 
<a href="#myPopup1" data-rel="popup" class="ui-btn"data-position-to="window">Window</a>
<a href="#myPopup2" data-rel="popup" class="ui-btn"data-position-to="#demo">id="demo"</a>
<a href="#myPopup3" data-rel="popup" class="ui-btn"data-position-to="origin">Origin</a>
cs





 Transitions

  기본적으로, 팝업은 나타나는 효과가 추가되어 있지 않습니다. 이러한 효과를 넣어주기 위해 data-transition 속성으로 다룰 수 있습니다.


TransitionDescriptionFor PagesFor Dialogs
fadeDefault. Fades to the next pageTry itTry it
flipFlips to the next page from back to frontTry itTry it
flowThrows the current page away and comes in with the next pageTry itTry it
popGoes to the next page like a popup windowTry itTry it
slideSlides to the next page from right to leftTry itTry it
slidefadeSlides from right to left and fades in the next pageTry itTry it
slideupSlides to the next page from bottom to topTry itTry it
slidedownSlides to the next page from top to bottomTry itTry it
turnTurns to the next pageTry itTry it
noneNo transition effectTry itTry it


[출처: w3school]



1
<a href="#myPopup" data-rel="popup" class="ui-btn"data-transition="fade">Fade</a>
cs



 Popup Arrows

  팝업의 테두리에 화살표를 추가하기 위해서는, data-arrow 속성을 사용하세요. 값은 "l","t","r","b" 로 각각 left, top, right, bottom 입니다.


1
2
3
4
5
<a href="#myPopup" data-rel="popup" class="ui-btn">Open Popup</a>
 
<div data-role="popup" id="myPopup" class="ui-content"data-arrow="l">
  <p>There is an arrow on my LEFT border.</p>
</div>
cs




 Popup Dialogs

  팝업 내부에 기본 다이얼로그를 추가할 수 있습니다:


 * jqpd.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>
 
  <div data-role="main" class="ui-content">
    <a href="#myPopupDialog" data-rel="popup" data-position-to="window" data-transition="fade" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Open Dialog Popup</a>
 
    <div data-role="popup" id="myPopupDialog">
      <div data-role="header">
        <h1>Header Text</h1>
      </div>
 
      <div data-role="main" class="ui-content">
        <h2>Welcome to my Popup Dialog!</h2>
        <p>jQuery Mobile is FUN!</p>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">Go Back</a>
      </div>
 
      <div data-role="footer">
        <h1>Footer Text</h1>
      </div>
    </div>
  </div>
 
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div
 
cs



 

 Popup Photos

  팝업 내부에 사진을 표시할 수 있습니다:


1
2
3
4
5
6
7
 
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg" alt="Skaret View" style="width:200px;"></a>
 
<div data-role="popup" id="myPopup">
  <img src="skaret.jpg" style="width:800px;height:400px;" alt="Skaret View">
</div>
cs


 


 Popup overlay

  팝업의 뒷 배경을 data-overlay-theme 속성으로 제어 할 수 있습니다.


  기본적으로는 overlay는 투명합니다. data-overlay-theme="a"를 사용하여 밝은 오버레이를 추가하거나 "b"를 사용해서 어두운 오버레이를 추가합니다:


1
2
3
4
5
<a href="#myPopup" data-rel="popup">Show Popup</a>
 
<div data-role="popup" id="myPopup" data-overlay-theme="b"
  <p>I have a dark background behind me.</p>
</div>
cs






end




* 본 포스트는 w3school 을 통해 작성된 포스트입니다.

다른 카테고리의 글 목록

Web/jQuery 카테고리의 포스트를 톺아봅니다
조회수 확인

W3School 를 참고하여 작성하는 jQuery Mobile 강좌입니다.


아래 링크들은 Tutorial 편입니다.


jQ Mobile 시작하기

jQ Mobile 페이지(Pages)

jQ Mobile 버튼(Buttons)

jQ Mobile 아이콘(Icons)

jQ Mobile 팝업(Popups)

jQ Mobile 툴바(Toolbars)

jQ Mobile 네비바(Navibars)

jQ Mobile 패널(Panels)

jQ Mobile 접는 블록(Collapsibles)

jQ Mobile 테이블(Tables)

jQ Mobile 그리드(Grids)




jQuery Mobile Button Icons

 jQuery Mobile은 버튼을 좀 더 멋지게 꾸며줄 아이콘 세트를 제공합니다.



 Adding Icons to jQuery Mobile Buttons

  버튼에 아이콘을 추가하기 위해, ui-icon 클래스를 사용하고, 아이콘 위치 클래스를 통해 아이콘을 위치 시킵니다(ui-btn-icon-pos) 


1
2
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
 
cs



 아래 리스트는 jQuery Mobile에서 제공하는 아이콘 입니다:


Icon classDescriptionIconExample
ui-icon-arrow-lLeft ArrowTry it
ui-icon-arrow-rRight ArrowTry it
ui-icon-infoInformationTry it
ui-icon-deleteDeleteTry it
ui-icon-backBackTry it
ui-icon-audioSpeakersTry it
ui-icon-lockPadlockTry it
ui-icon-searchSearchTry it
ui-icon-alertAlertTry it
ui-icon-gridGridTry it
ui-icon-homeHomeTry it

[출처: w3schools]




 Positioning Icons

  버튼에 어디에 아이콘이 위치해야 하는 가를 지정할 수 있습니다: top, right, button, left


  ui-btn-icon 클래스를 통해 위치를 명시합니다:



 * jqpos.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
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Positioning Icons</h1>
  </div>
 
  <div data-role="main" class="ui-content">
    <p>Positioning Icons:</p>
    <a href="#" class="ui-btn ui-icon-search ui-btn-icon-top">Top</a>
    <a href="#" class="ui-btn ui-icon-search ui-btn-icon-right">Right</a>
    <a href="#" class="ui-btn ui-icon-search ui-btn-icon-bottom">Bottom</a>
    <a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Left</a>
  </div>
 
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div
 
</body>
</html>
 
cs








  


 * 만약 아이콘의 위치를 명시하지 않으면, 아이콘은 보이지 않을 것 입니다.




 Displaying Only The Icon

  iCon 만을 보이게 하기 위해, notext 를 사용합니다:


1
2
 
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext">Search</a>
cs




 Removing The Circle

  기본적으로, 모든 아이콘은 회색 원이 아이콘을 감싸고 있습니다. 원을 제거하기 위해, ui-nodisc-icon을 추가합니다:


1
2
3
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">With circle (default)</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon">Without circle</a>
 
cs





 Black or White Circle

  기본적으로, 모든 아이콘은 흰색입니다. 아이콘을 검정색으로 바꾸기 위해서는 ui-alt-icon 을 추가합니다:


 * jqalter.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
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Icons</h1>
  </div>
 
  <div data-role="main" class="ui-content">
    <p>A white "search" icon (default):</p>
    <a href="#" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-left ui-corner-all ui-shadow">White icon (default)</a>  
    <a href="#" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-notext ui-corner-all ui-shadow">White icon (default)</a>
 
    <p>A black "search" icon (class="ui-alt-icon"):</p>
    <a href="#" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-left ui-corner-all ui-shadow ui-alt-icon">Black icon</a>   
    <a href="#" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-notext ui-corner-all ui-shadow ui-alt-icon">Black icon</a>
    
    <p>A black "search" icon without the gray circle (combining "ui-nodisc-icon" and "ui-alt-icon"):</p>
    <a href="#" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-left ui-corner-all ui-shadow ui-nodisc-icon ui-alt-icon">Black icon</a>   
    <a href="#" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-notext ui-corner-all ui-shadow ui-nodisc-icon ui-alt-icon">Black icon</a>
  </div>
  
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div
 
</body>
</html>
 
cs



end




* 본 포스트는 w3school 을 통해 작성된 포스트입니다.

다른 카테고리의 글 목록

Web/jQuery 카테고리의 포스트를 톺아봅니다