jquery mobile button 자동 생성
■ 지난 글에서는 data-role 속성을 이용해서 button을 만들어서 넣어봤었는데요. 이번에는 자동으로 버튼 모양이 생성되는 경우를 보겠습니다. 즉, "button"이라는 이름을 직접 입력하지 않아도 자동으로 버튼으로 변환이 되는 경우는 두 가지가 있습니다.
1. 특정 영역에서 <a>태그가 사용되었을 때
2. 버튼임을 알 수 있는 태그를 사용했을 때
먼저 특정 영역에 <a>태그를 사용했을 경우인데요. 대표적으로 '헤더'나 '푸터'에 링크를 사용하면 [nav]의 역할을 하기 때문에 jquery mobile에서는 자동으로 버튼을 생성합니다. 예제에서 확인해볼게요.
▲ data-role 속성을 이용해서 두 개의 page를 만들었고요. 첫번째 페이지에서 <header> 태그 안에 datt-role="header" 속성을 설정하고, 두 개의 링크를 걸어놓고 있는데요. 어디에도 button 속성은 적용하지 않았습니다. 하지만, 자동으로 버튼이 생성됩니다. 브라우저에서 확인해보겠습니다.
▲ 이렇게 jquery mobile에서 제공하는 모양의 버튼이 자동으로 생성됩니다.
다음은 버튼임을 알 수 있는 태그들인데요. 대표적으로 submit, reset 태그들이 여기에 속합니다. 물론 HTML에서도 자동으로 버튼 모양이 출력되기는 합니다만, jquery mobile에서 사용하는 버튼 모양으로 바뀌게 됩니다. 그리고 원래의 HTML 버튼 모양을 이용하고 싶다면 그렇게 할 수도 있습니다. 예제에서 확인해보겠습니다.
▲ 본문에 subit, reset 버튼을 배치해는데요. 첫 번째는 jquery mobile의 버튼 모양이 만들어지고, 두 번째는 data-role="none"속성을 이용해서 원래의 버튼 모양을 만들어지도록 하고 있습니다.
▲ 그림처럼 jquery mobile에서 제공하는 버튼 모양을 사용할 수도 있고, 원래의 모양을 사용할 수도 있답니다. ^^ 이렇게 해서 jquery mobile에서 버튼이 자동으로 생성되는 경우를 살펴봤습니다. 수고하셨어요.
