Jquery mobile(제이쿼리 모바일) 에서 nav data-role="navbar"를 이용할 경우 글자수.

Jquery mobile를 이용하여 모바일 페이지를 만들때 메뉴를 nav 태그를 이용해서 만들수도 있다

data-role = "nave bar"를 이용해서.

그러다 보면 글자수가 많아지거나 메뉴가 많아지면 자동으로 글을 truncation하는데 css를 조금 수정해주면 된다.

예) 메뉴

가나.. | 다라.. | 마바.. | 사아.. |아차..    <== 이런식으로 자동으로 truncation 됨.

(쉽게 이해하기 위해서 아래 그럼 참고)

해결방법

1. 새로 html태그와 css를 만들어서 한다.

2. 이미지로 대체..(모바일에서 이미지는 최대한 배제해야 하는데...)

3. 어느정도 허용 가능한 메뉴일 경우 jquery mobile에서 제공하는 css를 수정한다.

모바일 페이지에 너무 많은 메뉴를 넣는것도 그렇고 최대 5개 메뉴당 글자 2~5글자까지(한글기준) 으로 넣는다면

.ui-navbar li .ui-btn .ui-btn-inner { padding-top: .7em; padding-bottom: .8em; }  를

padding-right:1px;padding-left:1px; 만 추가 해주면 글자가 truncation되는걸 없앨수 있다.

너무 많은 글자는 안됨.

암튼 난 많은 메뉴를 5개로 간추렸고 jquery mobile에서 제공한 css를 조금 수정해서 해결했다.