jQuery मोबाइल चेकबॉक्स 2 लंबवत कॉलम में समूहित?

Question

मुझे एक साथ चेकबॉक्स समूह करने की आवश्यकता है लेकिन 2 कॉलम में। नीचे दी गई छवि में ive ने 2 अलग-अलग फ़ील्ड बनाए। मुझे पता है कि यह बहुत अर्थपूर्ण नहीं है लेकिन यह उस लेआउट को प्रदर्शित करता है जिसे मैं प्राप्त करना चाहता हूं।

एक मानक jQuery मोबाइल तरीका यह है है?

मैं चाहता हूं कि चेकबॉक्स एक वर्ग में हैं जैसे दिखें। मैं हरे रंग के ऊपरी बाएं, गुलाबी तल बाएं और नीले नीचे दाएं गोलाकार सीमा को हटा सकता था। क्या मुझे इसके लिए मानक सीएसएस ओवरराइड का उपयोग करने की ज़रूरत है या क्या कोई और शानदार तरीका है? धन्यवाद

Answer 1

मुझे लगता है कि आप Layout Grids को देखने के लिए चाहते हैं: http://jquerymobile.com/test/docs/content/content-grids.html

<div class="ui-grid-a"> 
    <div class="ui-block-a"> 
      <label><input type="checkbox" name="checkbox-1" /> Any</label> 
      <label><input type="checkbox" name="checkbox-1" /> Red </label> 
     </div> 
    <div class="ui-block-b"> 
      <label><input type="checkbox" name="checkbox-1" /> Green </label> 
      <label><input type="checkbox" name="checkbox-1" /> Black </label> 
     </div> 
</div><!-- /grid-a --> 

अद्यतन

अपनी टिप्पणी के आधार पर, कोई आपके पास दो अलग-अलग कॉलम एक fieldset में बांटा है नहीं कर सकते।

data-role="controlgroup" एक fieldset पर वर्गीकृत किया प्रभावी बनाने के लिए मार्जिन और गद्दी निकालता है, लेकिन क्या आप के साथ अंत कुछ इस तरह है: http://jsfiddle.net/shanabus/qNYPh/1/

हालांकि, अगर आप एक माता पिता fieldset और दो नेस्टेड लिए ठीक है, http://jsfiddle.net/shanabus/hcyfK/1/

Answer 2

shanabus उसकी नेस्ट वर्गीकृत किया समाधान के साथ एक अच्छा जवाब दिया:: वर्गीकृत किया, fieldsets ... तो आप इस तरह की एक समाधान के साथ समाप्त कर सकते हैं http://jsfiddle.net/shanabus/hcyfK/1/

आप ले जा सकते हैं कि एक कदम फू छिद्रित गोलाकार कोनों से छुटकारा पाने और एक और सुसंगत उपस्थिति प्राप्त करने के लिए आपको आवश्यक किसी भी कोने के लिए उचित सीएसएस 'सीमा त्रिज्या' मानों को शून्य पर सेट/ओवरराइड करके rther।

उदाहरण के अनुसार:

<label for="radio-choice-1" style="border-top-right-radius: 0">Cat</label> 
<label for="radio-choice-2" style="border-bottom-right-radius: 0">Dog</label> 
<label for="radio-choice-3" style="border-top-left-radius: 0">Hamster</label> 
<label for="radio-choice-4" style="border-bottom-left-radius: 0">Lizard</label> 

हाँ, मैं एक बुरा व्यक्ति हूँ क्योंकि मैं अलग एचटीएमएल & सीएसएस नहीं था, लेकिन यह एक उदाहरण है। :-)