jQuery Mobile 버튼 색상변경과 + 상단 Title의 길이 늘리기

Web/jQuery

saltdoll 2018. 5. 25. 06:56

jQuery Mobile 에서 버튼의 색상을 바꾸고 싶을때가 있습니다.

상단의 Bar의 같은 경우 class="ui-header ui-bar-b" (ui-bar-a) / data-theme="b"와 같이 테마가 변경이 가능합니다.

버튼은 해당 테마를 주는 방법을 찾지 못해서, 변경하는 방법을 찾아보니. style을 이용해서 수정하라고 하네요.

color와 background-color를 이용해서 변견한 부분

<a href="#" data-role="button" style="color:green; background-color:red";>
  Search
</a>

[그림1. background-color: darkorchid; color:white; 효과]

jQuery Mobile에서 .ui_header .ui_title 의 영역이 여백이 커서 글자가 ".."으로 표시 되는 경우가 종종 있는데,

해당 부분의 여백을 줄여서, 이쁘게 표시해 보도록 하겠습니다.

[그림2. 상단 제목이 짤릴때 모습]

(추천) 여백을 줄여서 글씨를 더 보이게 하는 방법

.ui-header .ui-title { margin-left: 1em; margin-right: 1em; }

You might also get a bit more space using clip rather than elipsis: (clip으로 공간을 더 확보)

.ui-header .ui-title { text-overflow: clip; }

개인적으로 margin-left:1em; margin-right: 1em를 추천합니다.

[그림3, 해결된 모습]