태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.
2013.06.30 14:50



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

 


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


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


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


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



<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 값은 다음이 들어갈 수 있다.


[jQuery] Button Component 에 대해 알아보자.이미지 출처 : the-jquerymobile-tutorial.org


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







data-iconpos 속성


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


[jQuery] Button Component 에 대해 알아보자.이미지 출처 : www.atmarkit.co.jp




data-theme 속성


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


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



태그


댓글을 달아 주세요


Posted by 돼지왕왕돼지