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 से कहा, निम्नलिखित कार्य करता है:

<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

ध्वनि क्या आप चाहते हैं की तरह एक क्षैतिज 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> 

Answer 2

यहाँ समाधान के लिए विस्तार है। उपरोक्त समाधान के साथ समस्या यह है कि आप सूची आइटम के दाईं ओर बटन की नियुक्ति को नियंत्रित नहीं कर सकते हैं। ऐसा करने का एक तरीका नियंत्रण में वर्ग = '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> 

समायोजित करने के लिए कर सकते हैं

Answer 3

मुझे लगता है, नियंत्रण समूह गतिशील सूचीदृश्य में अच्छी तरह से प्रस्तुत नहीं किया गया है। आपको गतिशील सूचीदृश्य में नियंत्रण समूह के लिए पूर्ण 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>