मुख्य आइटम पर लिंक के बिना jQuery मोबाइल सूची आइटम स्प्लिट बटन

Question

मान लें कि मेरे पास एक विभाजित आइकन (data-icon="grid") के साथ <li> के समूह के साथ एक jQuery मोबाइल साइट है।

क्या href में लिपटे सूची आइटम के बाएं हाथ की ओर होना संभव है लेकिन बटन को दाईं ओर रखें?

उदाहरण: http://jsfiddle.net/SSQMB/

मैं कोशिश की है:

$(selection).contents().unwrap(); 

और यह काम करता है, यह के रूप में अनुरोध लिंक को निकाल देता है (और समस्या मैं नीचे रेखांकित किया है ठीक करता है), लेकिन यह सूची आइटम पर लेआउट और स्टाइल के पूरे समूह को जाता है और टूटता है। मैं एक पेज

प्रत्येक <li> पर लगभग 100 <li> आइटम नहीं हैं 5-10 विकल्पों के साथ उस में एक <select> तत्व हो सकता है

• :

  मुद्दा मैं हल करने कोशिश कर रहा हूँ यह है।

• <select> की डिफ़ॉल्ट jQuery मोबाइल स्टाइल का उपयोग करते समय सब कुछ ठीक काम करता है
• हालांकि इसमें एक प्रमुख प्रदर्शन हिट है। एक iPhone 4S स्क्रॉल करने के लिए संघर्ष, और एक iPad 2 लगभग unusuable (सही नहीं एंड्रॉयड वास्तव में एक बार के लिए बेहतर है, लेकिन अभी भी)
• <select> तत्वों पर data-role="none" लाना पेज तेजी से और व्यावहारिक फिर
• हालांकि, यह टूट जाता है बनाता है डेस्कटॉप ब्राउज़र (विशेष रूप से फ़ायरफ़ॉक्स) पर, क्योंकि जब आप <select> में एक आइटम, <select> पीछे से लिंक का चयन करने के लिए क्लिक करें शुरू हो रहा है और <select> बॉक्स

कोई भी विचार को रद्द कर दिया है?

Answer 1

ठीक है, स्टॉक के माध्यम से वितरित करने के बाद jQuery मोबाइल सीएसएस, मुझे उन शैलियों को मिला जो <li> के लिए स्वरूपण निर्धारित करते हैं। मैं एक अलग स्टाइलशीट में इन दोहराया गया और उन्हें एक <span> बजाय एक <a> के लागू किए गए:

 
.ui-li .ui-btn-text span.ui-link-inherit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 
.ui-li .ui-btn-inner span.ui-link-inherit { padding: .7em 15px .7em 15px; display: block; } 

फिर, सेट अप <li> जैसे:

<li data-icon="grid"> 
    <a href="#" onclick="return false;" class="leftLink"> 
    <span class="ui-link-inherit"> 
     .... content .... 
    </span> 
    </a><a href="#"> ... </a> 
</li> 

फिर कुछ jQuery:

$('.leftLink').parent().parent().parent().removeClass('ui-btn'); 
$('.leftLink').contents().unwrap(); 

और वोला: http://jsfiddle.net/Zwhs3/2/