[jQuery] Button Component 에 대해 알아보자.

jQuery, Button Component 에 대해 알아보자.

jQuery 를 이용하여 Button 을 만드는 방법에 대해 알고싶나요? 여기를 클릭.

"ui-grid-a", "ui-block-a"

<div data-role="content" data-theme="e">

<div class="ui-grid-a">

<div class="ui-block-a">

<input type="button" value="Button-1"/>

</div>

<div class="ui-block-b">

<input type="button" value="Button-2"/>

</div>

</div>

</div>

"ui-gird-a" class 는 column 이 2개인 grid 를 만든다. ( "ui-grid-b" class 는 column 이 3개인 grid )

"ui-block-a" class 는 ui-grid 의 첫번쨰 column 을 말하고,

"ui-block-b" class 는 ui-grid 의 두번째 column 을 이야기한다.

innerHTML 과 text 의 차이점

innerHTML 은 html 코드를 입력하는 함수이고, text() 는 문자열 입력을 하는 함수.

innerHTML 에는 html tag 들을 사용할 수 있고, 그것들이 실제 browser 가 해석할 때 html tag 로 인식하지만,

text() 함수의 경우는 html tag 를 사용하면, 그것들이 그냥 plain text 로 입력이 된다.

a (anchor)의 상태

a:link : 아무런 조작이 없는 상태

a:hover : 마우스 포인터가 위에 올라가 있는 상태

a:active : pressed 된 상태

a:visited : 방문기록이 있는 아무런 조작이 없는 상태

data-inline="true" 속성

data-role 이 button 으로 되어 있는 경우, block 옵션이 들어가서 한 버튼이 한 라인을 차지하게 된다.

data-inline="true" 속성을 주게 되면, 해당 button 은 최적화된 너비를 갖게 되고, button 들은 한 라인에 여러개가 들어갈 수 있다.

data-icon 속성

data-icon 은 button 에 built-in icon 들을 넣을 수 있다.

data-icon 값은 다음이 들어갈 수 있다.

이미지 출처 : the-jquerymobile-tutorial.org

이 때, 해당 아이콘이 제대로 display 되기 위해서는 css 폴더 안데 jQuery 에서 배포하는 이미지들이 images 라는 폴더 안에 제대로 배치되어 있어야 한다.

data-iconpos 속성

data-iconpos 값은 left, right, top, bottom 네 가지 값이 들어갈 수 있다.

이미지 출처 : www.atmarkit.co.jp

data-theme 속성

data-theme 속성을 지정하면 다음과 같이 다양한 형태의 테마가 적용된다. a~e까지 값이 들어갈 수 있다.

a, a:active, a:hover, a:link, a:visited, Active, alert, ANCHOR, arrow-d, arrow-l, arrow-r, arrow-u, B, Back, Bottom, C, CHECK, d, data-icon, data-iconpos, data-inline, data-inline="true", data-theme, Delete, e, Forward, gear, GRID, home, hover, html tag, html 태그, Info, innerHTML, jQuery, jquery button, jquery button 속성, jquery 버튼, jquery 버튼 속성, Left, Link, MINUS, Plus, pressed 상태, refresh, Right, search, text, Top, ui-block-a, ui-block-b, ui-block-c, ui-grid-a, ui-grid-b, visited, 마우스 포인터, 앵커