स्टाइलिंग jQuery मोबाइल चेकबॉक्स

Question

मुझे सीएसएस के साथ बहुत कम अनुभव है।

मैं चेक किए गए आइकन को बाएं से दाएं स्थानांतरित करने के लिए डिफ़ॉल्ट JQuery Checkboxes शैली बनाना चाहता हूं।

मैंने अपने बैडस पेंट कौशल का उपयोग किया है जो मैं ढूंढ रहा हूं उसे चित्रित करने के लिए किया है।

तो मैं नौकरी करने के लिए किसी और के लिए नहीं पूछ रहा हूं, बस कुछ दिशाओं को सही दिशा में।

इसे प्राप्त करने का सबसे अच्छा तरीका क्या होगा?

धन्यवाद!

Answer 1

गाया उत्पादन को देख jQuery मोबाइल Firebug का उपयोग कर अपने कोड को पार्स करता है के बाद की कोशिश करो।

आप फॉर्म तत्व में जोड़े गए संरचना और कक्षाओं को देख पाएंगे। JQuery मोबाइल द्वारा जोड़े गए क्लास नाम समझने के लिए बहुत कठोर हैं। ,

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br"> 
     <fieldset data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical"><div class="ui-controlgroup-label" role="heading">Agree to the terms:</div><div class="ui-controlgroup-controls"> 

      <div class="ui-checkbox"><input type="checkbox" class="custom" id="checkbox-1" name="checkbox-1"><label for="checkbox-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-corner-top ui-corner-bottom ui-controlgroup-last ui-checkbox-on ui-btn-up-c"><span class="ui-btn-inner ui-corner-top ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">I agree</span><span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"></span></span></label></div> 

     </div></fieldset> 
    </div> 

सूचना "ui-btn-icon-बाएँ" वर्ग मैं:

--UPDATE--

यहाँ चेक-बॉक्स के लिए jQuery मोबाइल प्रलेखन के लिए फ़ायरबग से HTML है इसके साथ खेलें, आप इसे "ui-btn-icon-right" में बदलने में सक्षम नहीं हो सकते हैं लेकिन आप संरचना के साथ खेल सकते हैं। मैंने इसे अन्य तत्वों के लिए किया है हालांकि मैंने चेक-बॉक्स के साथ परीक्षण नहीं किया है।

Answer 2

jquery-mobile v1.0 में एक कस्टम डेटा विशेषता है जिसका उपयोग आप आइकन स्थिति समायोजित करने के लिए कर सकते हैं। इसमें चेकबॉक्स, रेडियो बटन, एनवी बार, और अन्य तत्व शामिल हैं।

प्रलेखन: http://code.jquery.com/mobile/latest/demos/docs/buttons/buttons-icons.html

चेकबॉक्स आप ऊपर अपने प्रश्न में तैयार किया है बनाने के लिए अपने कोड होगा:

<input type="checkbox" name="checkbox-name" id="checkbox-id" /> 
    <label for="checkbox-id" data-iconpos="right">I agree</label> 

सूचना है कि data-iconposlabel लिए आवेदन किया है। इसका कारण यह है कि jQuery मोबाइल इस तत्व को फ्रंट-एंड में UI तत्व के रूप में कार्य करने के लिए बहुत अधिक बनाता है। दूसरे शब्दों में, इस विशेषता के साथ, आप चेक किए गए/अनचेक किए गए आइकन को label के दाईं ओर स्थित कर रहे हैं।

नोट: यदि आप इस विशेषता को हल करने का प्रयास करते हैं और class="ui-btn-icon-right" अपने तत्वों में जोड़ें, तो jQuery मोबाइल उन पृष्ठों को छोड़ सकता है जब पृष्ठ प्रस्तुत करता है।

Answer 3

यह अब की स्थापना data-iconpos="right" अधिक जानकारी के लिए http://demos.jquerymobile.com/1.4.3/checkboxradio-checkbox/#Iconposition देखें