jQuery Mobil listesinde birden fazla bölünmüş düğme

Question

jQuery mobil listesinde birden çok bölme düğmesinin bulunması mümkün mü?

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

Ama çalışmıyor:

bunu yaparken denedim. Bağlantıları <div data-role='controlgroup>'da da kaydırma. Yanlış bir şey mi yapıyorum yoksa bir hack olmadan mümkün değil mi?

UPDATE: Liste $("#listid).append("<li>...</li>") yapılarak dinamik olarak oluşturulur. http://jsfiddle.net/nrpMN/3/. Aşağıda mdmullinax tarafından işaret edildiği gibi, şu yaptığı işlerde: ne istediğini bir listview iç içe yatay controlgroup olduğu gibi

<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> 

Teşekkür

Answer 1

geliyor. İşte

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

çözümüne uzantısıdır. Yukarıdaki çözümle ilgili sorun, liste öğesinin sağ tarafındaki düğmelerin yerleşimini kontrol edememenizdir. Bunu yapmanın bir yolu, kontrole class = 'ui-li-aside' eklemektir. Bu, düğmelerin sağa gelmesini sağlayacak, ancak kapakları bir kenara ayırmak zorunda kalacaksınız, varsayılan olarak bu% 50'dir. sol

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

üzerinde liste içeriğini kapsamaz Veya başka bir sınıf

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

eklemek Ve

<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> 

ayarlamak için div değiştirebilir, böylece azaltmak için değiştirebilirsiniz

Answer 3

Bence, Controlgroup dinamik liste görünümünde iyi işlenmemiş. Dinamik liste görünümünde controlgroup için tam html kodu yapmalısınız.

<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>