jQuery 모바일 목록의 여러 분할 버튼

Question

jQuery 모바일 목록에 여러 개의 분할 버튼을 포함 할 수 있습니까?

<ul data-role='listview'> 
    <li> 
     <a href='#' id='1'>1</a> 
     <a href='#' id='btn1'></a> 
     <a href='#' id='btn2'></a> 
    </li> 
</ul> 

을하지만 그것은 작동하지 않습니다

나는이 일을 시도했습니다. <div data-role='controlgroup>에 링크를 배치하지도 않습니다. 제가 잘못한 일을하고 있습니까? 아니면 해킹 없이는 불가능한가요?

업데이트 : 목록은 $("#listid).append("<li>...</li>")을 통해 동적으로 생성됩니다. http://jsfiddle.net/nrpMN/3/. 아래 mdmullinax에 의해 지적, 다음이하는 일 : 당신이 원하는 것은 listview에 중첩 수평 controlgroup처럼

<ul data-role='listview'> 
    <li> 
     <a href='#' id='1'>1</a> 
     <div data-role='controlgroup' data-type='horizontal'> 
      <a href='#' id='btn1'></a> 
      <a href='#' id='btn2'></a> 
     </div> 
    </li> 
</ul> 

감사

Answer 1

는 소리. 여기

http://jsfiddle.net/nrpMN/

<ul data-role='listview'> 
    <li> 
     <div data-role="controlgroup" data-type="horizontal"> 
      <a href="index.html" data-role="button">Yes</a> 
      <a href="index.html" data-role="button">No</a> 
      <a href="index.html" data-role="button">Maybe</a> 
     </div> 
    </li> 
</ul> 

Answer 2

용액에 확장이다. 위의 솔루션 문제는 목록 항목의 오른쪽에있는 버튼의 배치를 제어 할 수 없다는 것입니다. 이를 수행하는 한 가지 방법은 class = 'ui-li-aside'를 컨트롤에 추가하는 것입니다. 그러면 버튼이 오른쪽으로 바뀌지 만 기본적으로 50 %가 적용되는 영역을 조정해야합니다. 그것은 왼쪽

.ui-li-aside { float: right; width: 10%; text-align: right; margin: .3em 0; } 

에 목록의 내용을 포함하지 않습니다 아니면 다른 클래스

.ui-li-asideNew { float: right; width: 10%; text-align: right; margin: .3em 0; } 

을 추가하고

<ul data-role='listview'> 
    <li> 
     <div class='ui-li-aside' data-role="controlgroup" data-type="horizontal"> 
      <a href="index.html" data-role="button">Yes</a> 
      <a href="index.html" data-role="button">No</a> 
      <a href="index.html" data-role="button">Maybe</a> 
     </div> 
    </li> 
</ul> 

을 조정 사업부를 변경할 수 있도록 당신은 그것을 줄이기 위해 수정할 수 있습니다

Answer 3

제 생각에는 컨트롤 그룹이 동적 목록보기에서 잘 렌더링되지 않습니다. 동적 목록보기에서 controlgroup에 대한 완전한 html 코드를 작성해야합니다.

<li> 
    <a href='#popupItem' data-rel='popup'>List Text</a> 
    <div class='ui-controlgroup-controls' style='width: 110px;float: right;position: absolute;right: 0em;top: 0.5em;'><a href='#' id='tolistminus' data-role='button' data-icon='minus' data-iconpos='notext' style='width: 1.0em;float: left;' data-theme='b' class='ui-link ui-btn ui-btn-b ui-icon-minus ui-btn-icon-notext ui-shadow ui-corner-all ui-first-child' role='button'>-1</a><a href='#' id='tolistplus' data-role='button' data-icon='plus' data-iconpos='notext' style='width: 1.0em;float: left;' data-theme='b' class='ui-link ui-btn ui-btn-b ui-icon-plus ui-btn-icon-notext ui-shadow ui-corner-all ui-last-child' role='button'>+1</a></div> 
</li>