2012-04-16 3 views
2

jQuery Mobile ThemeRoller을 사용하여 새로운 모바일 웹 사이트의 테마를 만들었습니다. 일반적으로 테마는 잘 작동하지만 ThemeRoller에 표시된 목록 구분 기호는 내 애플리케이션에서 사용되지 않습니다.jQuery 모바일리스트 분배기가 잘못된 견본을 사용하고 있습니까?

ThemeRoller problem http://img.skitch.com/20120416-8fbfbu41abrci1ym8uthatfi4e.png

해당 페이지의 관련 HTML은 다음과 같습니다 :

<div id="schedule" data-role="page" data-theme="a"> 
    <div data-role="content" data-theme="a"> 
     <ul data-role="listview"> 
      <li data-role="list-divider">8:00 am</li> 
      <li><a href="#session">Welcome &amp; Keynote</a></li> 
      <li data-role="list-divider">9:00 am</li> 
      <li><a href="#session">Session title displayed here</a></li> 
     </ul> 
    </div> 
</div> 

나는 심지어 내가에서 발견 된 몇 가지를 추가하려고했습니다

는 여기에 문제를 설명하는 스크린 샷입니다 ThemeRoller 마크 업 :

<li data-role="list-divider" data-swatch="a" class="ui-bar-a" data-form="ui-bar-a">8:00 am</li> 

효과 없음. 내가 뭘하든, 수업을 ui-bar-b으로 설정 한 것 같습니다. Chrome에서 HTML을 실시간으로 수정할 수 있으며 ui-bar-bui-bar-a으로 변경하면 정확하게 예상 한 것처럼 보입니다.

내가 잘못 했나요? 아마 jqm 버그일까요?

jqm 1.1.0 및 jquery 1.7.0을 사용하십시오.

답변

6

data-role="listview" 요소에 data-dividertheme="a" 속성을 추가하여 구분 목록 항목에 특정 견본을 사용하도록 할 수 있습니다. 기본적으로 listviewa 테마로 설정된 경우 칸막이는 b 테마로 설정되므로 목록 구분 기호를 올바른 테마로 설정해야합니다. 그렇지 않으면 테마를 염두에두고 작성해야합니다. http://jquerymobile.com/demos/1.1.0/docs/lists/docs-lists.html

: 여기

그리고이에 대한 설명서입니다 http://jsfiddle.net/8aZpQ/ (분할이 데모 세력 테마 e) : 여기

<ul data-role="listview" data-dividertheme="a"> 
     <li data-role="list-divider">8:00 am</li> 
     <li><a href="#session">Welcome &amp; Keynote</a></li> 
     <li data-role="list-divider">9:00 am</li> 
     <li><a href="#session">Session title displayed here</a></li> 
    </ul> 

는 데모입니다
관련 문제