2012-02-26 9 views
6

मैं jQuery मोबाइल में एक संक्षिप्त <li> आइटम में चेकबॉक्स की सूची में गतिशील रूप से कुछ सामग्री जोड़ने की कोशिश कर रहा हूं। मुझे अच्छे गोलाकार कोनों और समूहीकृत वस्तुओं के साथ उचित स्वरूपण नहीं मिल रहा है। जब मैं पत्ती के स्तर पर अन्य तत्व जोड़ता हूं तो यह और भी बदतर हो जाता है।jquery मोबाइल में गतिशील सामग्री जोड़ते समय उचित स्वरूपण

Here एक उदाहरण है कि समस्या (स्पष्ट रूप से शीर्षक में jQuery और jquerymobile स्क्रिप्ट और सीएसएस जोड़ें) से पता चलता है:

<body> 
<div data-role="page" id="page"> 
    <ul id="listList" data-role="listview"> 
    <li id="list1" data-role="collapsible"> 
    <h3>list 1</h3> 
    <div data-role="fieldcontain"> 
    <fieldset data-role="controlgroup" id="fs1"> 
     <input type="checkbox" id="cb1" /><label for="cb1">text</label></fieldset></div></li> 
    <li id="list2" data-role="collapsible"> 
    <h3>list 2</h3> 
    <p>here comes another list of checkboxes...</p></li></ul> 
<input type="button" onclick="addCheckbox();" value="add a checkbox to list1" /></div> 
</body> 
<script> 
function addCheckbox() { 
    $("#list1 fieldset").append('<input type="checkbox" id="cb2" /><label for="cb2">More text</label>'); 
} 
</script> 

मैं append() करने के लिए कॉल के बाद .page() जोड़ने की कोशिश की है, लेकिन यह ठीक से हालांकि काम नहीं किया थोड़ा - सा बेहतर।

मेरे उदाहरण से परे, जेनेरिक सवाल यह है कि jQuery मोबाइल ने डीओएम संरचना के साथ खेला है के बाद डीओएम पेड़ को सामग्री को गतिशील रूप से कैसे जोड़ना है। मेरा मानना ​​है कि एक ऐसा कार्य मौजूद है जो पेड़ के हिस्से को "jquerymobilizes" करता है लेकिन मुझे यह नहीं मिल रहा है।

आपकी मदद के लिए बहुत बहुत धन्यवाद!

संपादित करें: संक्षेप में, मैं गतिशील रूप से तत्वों को listview के तत्वों में जोड़ने की कोशिश कर रहा हूं और सूची में तत्वों को जोड़ने की कोशिश नहीं कर रहा हूं। listview को रीफ्रेश करना यहां मदद नहीं करता है।

संपादित करें 2: के रूप में मैं .trigger("create") समारोह है कि .append() (सीएफ JQM FAQ) को श्रृंखलित किया जा सकता है पाया मैं थोड़ा और करीब हो रही है। निम्न स्क्रिप्ट के साथ यह थोड़ा बेहतर काम करता है हालांकि data-role="controlgroup" अच्छा गोलाकार बक्से के साथ सही स्वरूपण प्रदान नहीं करता है।

$("#list1 fieldset").append('<input type="checkbox" id="cb2" /><label for="cb2">More text</label>').trigger("create"); 

यदि मैं किसी बिंदु पर वहां जाता हूं तो मैं पूरा उत्तर पोस्ट करूंगा।

संपादित करें 3: यहाँ मेरी उदाहरण jsFiddle

+0

पीएस: मैं यह भी सोच रहा हूं कि चेकबॉक्स क्यों अक्षम दिखता है और मेरे उदाहरण में ढहने योग्य आइटम डिफ़ॉल्ट रूप से ध्वस्त नहीं होते हैं, लेकिन यह माध्यमिक है। –

उत्तर

5

मुझे लगता है कि मैं बहुत यहाँ अपने ही सवाल का जवाब हो सकता है की किसी भी कोशिश है कि मैं क्या मिल गया है:

  • गतिशील jQuery मोबाइल में तत्वों को जोड़ने के लिए उपयोग .trigger("create") (cf.jQuery Mobile FAQ)
  • एक खुलने और बंधनेवाला तत्व के सिमटने हिस्सा करने के लिए उन्हें जोड़ने के लिए div.ui-collapsible-content में जोड़ने या सिमटने हिस्सा पूर्व पूर्व के भीतर एक div कंटेनर बनाने ताकि आप सीधे वहाँ सामग्री जोड़ने
  • समूहीकृत अच्छा प्रतिपादन पाने के लिए चेक बॉक्स, आप एक बार में सभी चेक बॉक्स जोड़ना चाहिए (मैं चिकना गोलाकार कोनों नहीं मिल सका जब मैं उन्हें क्रमिक रूप से

जोड़ा तो यहाँ मेरा अंतिम स्क्रिप्ट है करता है कि मैं क्या जरूरत:

$("#list1 div[data-role='fieldcontain']").append('<fieldset data-role="controlgroup">' 
    +'<input type="checkbox" id="cb1" /><label for="cb1">text</label>' 
    +'<input type="checkbox" id="cb2" /><label for="cb2">More text</label></fieldset>' 
    +'<a href="index.html" data-role="button" data-icon="delete">Delete</a>') 
    .trigger("create"); 

मुझे उम्मीद है कि यह मदद करता है!

+0

http://jsfiddle.net/hbbvM में मेरा कामकाजी उदाहरण यहां है –

1

काफी यकीन है कि मैं का पालन नहीं में सचित्र है। क्या आप उपयुक्त शैली को लागू करने के तरीके के बारे में अधिक देख रहे हैं। यदि ऐसा है तो आपको इसका उपयोग करने की आवश्यकता होगी:

$('#mylist').listview('refresh'); 

यह आपकी सूची में नए आइटम जोड़े जाने के बाद होगा।

+0

धन्यवाद, लेकिन समस्या यह है कि jquery मोबाइल कंटेनरों की एक श्रृंखला बनाता है और पृष्ठ लोड होने पर तत्वों को पुनर्गठित करता है। जब मैं गतिशील रूप से नए jquery तत्व जोड़ता हूं (इस मामले में इनपुट चेकबॉक्स और उनके लेबल), पुनर्गठन कभी नहीं होता है, इसलिए बदसूरत प्रस्तुति। एक सूची दृश्य पर काम ताज़ा करें लेकिन मेरे उदाहरण में, समस्या इनपुट चेकबॉक्स से आती है, मैं सूची में कोई आइटम नहीं जोड़ता हूं लेकिन सूची में एक आइटम के संकुचित हिस्से में आइटम जोड़ता हूं। –

3

यह समस्या आपके द्वारा लिखित दृश्य में गतिशील सामग्री को जोड़ने के बाद, jquery मोबाइल क्लास आपकी सूचीदृश्य के लिए आवेदन नहीं कर सकती है। तो निम्नलिखित

$('#listList').listview('refresh'); //which refresh your list view 
$('#listList').listview('refresh',true); //which rebuilds the listview with your new content 
+0

धन्यवाद, लेकिन जैसा कि मैंने एक और टिप्पणी में व्याख्या करने की कोशिश की, मैं सूची दृश्य में तत्व नहीं जोड़ता लेकिन div के एक तत्व के संकुचित हिस्से में आइटम जोड़ता हूं। सूचीदृश्य को ताज़ा करना यहां किसी भी मदद की प्रतीत नहीं होता है। –

+0

@ मैड एचेट: मुझे लगता है कि आपका ऑनक्लिक ईवेंट फ़ंक्शन "addCheckbox()" पर फायरिंग नहीं कर रहा है। क्या आप इसे अपने फ़ंक्शन कोड की पहली पंक्ति में अलर्ट रखकर देख सकते हैं ... आप यहां अपना उदाहरण देख सकते हैं [link] http://jsfiddle.net/reddyprasad321/wECQx/5/ –

+0

एक नज़र डालने के लिए धन्यवाद, मैं नहीं ' टी काफी नहीं जानता कि घटना आपके उदाहरण में क्यों नहीं चल रही है (मैं jsfiddle से परिचित नहीं हूं) लेकिन फायरिंग मेरे लिए समस्या नहीं थी (पाठ ठीक से जोड़ा गया था लेकिन स्वरूपण गायब था)। मैं jsfiddle में एक कामकाजी उदाहरण पोस्ट करने का प्रयास करूंगा लेकिन आप मेरे जवाब में अपना समाधान पा सकते हैं। –

संबंधित मुद्दे