jquery mobile button property
지난 글에서 jquery mobile의 버튼이 자동 생성 되는 경우를 알아봤는데요. 이번 글에서는 그 버튼의 몇 가지속성에 대해서 알아보겠습니다.
■ 첫 번째로 jquery mobile 버튼의 모서리는 라운딩 처리가 되어 있는데요. (datat-conners="true") 이 속성을 제거하고 싶으면 다음과 같이 속성값에 flase를 넣어주면 됩니다. (data-corners="false") 예제에서 적용해볼게요.
▲ 모서리의 라운드 효과가 없어졌는데 그림에서는 잘 안 보일 수도 있겠네요. 속성 하나만 적용하면 되니까 직접 해보세요.^^
다음은 datat-inline인데요. 버튼의 크기를 결정하는 속성입니다. 기본 속성값은"false" 이고요. 위 그림처럼 버튼이 화면을 꽉 채우게 됩니다. 이 값을 "true"로 변경하면 텍스트 크기만큼 버튼의 크기가 조절되는데요.
▲ 이렇게 텍스트의 크기만큼 버튼의 크기가 조절됩니다.
이번에는 버튼의 그림자 효과인데요. data-shadow="true"가 기본값 이고요. 예제에서는 그림자를 제거해보겠습니다.
▲ 그림자가 제거된 걸 확인할 수 있겠죠?^^
마지막으로 버튼에 삽입할 수 있는 아이콘을 이용하는 방법을 알아보겠습니다.
▲ 그림처럼 data-icon="아이콘이름"을 넣으면 적용할 수 있는 속성인데요. 이번 글에서는 이렇게 적용하는 방법만 알아보고 다음 글에 이어서 버튼 아이콘의 종류를 알아보겠습니다. 수고하셨어요.
