jQuery Mobile列表上的多個拆分按鈕

是否可以在jQuery移動列表中擁有多個拆分按鈕？jQuery Mobile列表上的多個拆分按鈕

我試着這樣做：

<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>。我做錯了什麼，還是不可能沒有黑客？

UPDATE：該列表是通過執行$("#listid).append("<li>...</li>")動態生成的。 http://jsfiddle.net/nrpMN/3/。正如下面mdmullinax指出，下面做工作：

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

感謝

來源

2011-08-14 Jay

聽起來像是你想要的是一個水平controlgroup嵌套在listview。

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>

來源

2011-08-14 21:12:45 MikeM

這是有效的，但是如果你是動態生成列表，它不會。我知道我沒有在我的問題中指定列表的動態生成，但我認爲它不會有所作爲。根據這個[JQM FAQ]（http://jquerymobiledictionary.pl/faq.html）更新了小提琴：http://jsfiddle.net/nrpMN/3/ – Jay

有一個新的'.trigger（'create'）'方法截至beta2）爲這件事情。 [的jsfiddle]（http://jsfiddle.net/pxfunc/nrpMN/4/）。在按鈕上也有一個缺失的屬性：'data-role =「button」' – MikeM

謝謝。有用。我認爲我有一個更老的測試版2（儘管它仍然是測試版2）。 :) – Jay

這裏是延伸到該溶液中。上述解決方案的問題在於，您無法控制列表項右側按鈕的位置。一種方法是向控件添加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; }

並更改div來調整

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

來源

2013-11-28 16:44:14

我認爲，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>

來源

2014-08-17 03:49:30 user2702125

感謝您的回答。一些建議： 1.請更好地格式化您的代碼;當一切都在一條線上時很難閱讀。 2.你說的不太清楚。如果您無法用言語形容您的解決方案，請嘗試用代碼說明：將其放在http://jsfiddle.net或類似的服務上。 3.或者（或另外）你也可以張貼截圖來顯示你的意思是「Controlgroup not rendered well」 – Jay

jQuery Mobile列表上的多個拆分按鈕

回答

相關問題