गतिशील रूप से ढहने वाले तत्वों को जोड़ना

Question

स्रोत: http://jquerymobile.com/demos/1.0a2/#docs/content/content-collapsible.html जब मैं अपने कोड में मैन्युअल रूप से इस तरह का एक तत्व जोड़ता हूं, तो यह ठीक से प्रदर्शित होता है। लेकिन जब मैं इस तरह jQuery के साथ जोड़ने की कोशिश:

$('body').append('<div data-role="collapsible"><h3>Title</h3><p>Content</p></div>'); 

यह सिर्फ h3 में शीर्षक और इसके नीचे सामग्री दिखाती है, इसलिए नहीं एक खुलने और बंधनेवाला तत्व के रूप में। मैं इसे कैसे ठीक कर सकता हूं?

Answer 1

आप उन्हें सही जगह (उदाहरण, एक data-role="page" तत्व से कम) के लिए संलग्न करने के लिए तो .page() कहते हैं, आप जिस सामग्री को संलग्न प्रारंभ करने में इस तरह है:

$('<div data-role="collapsible"><h3>Title</h3><p>Content</p></div>') 
    .appendTo('#someElement').page(); 

You can test it out here।

Answer 2

इस लक्ष्य को हासिल करने के लिए सबसे आसान तरीका है डायनामिक रूप से तैयार divs पर सिमटने() विधि कॉल करने के लिए है:

$('div[data-role=collapsible]').collapsible(); 

स्रोत: http://forum.jquery.com/topic/dynamically-add-collapsible-div

Answer 3

बेहतर सिमटने से, updatelayout है it is in the docs। संक्षेप में ...

इस घटना ढांचे के भीतर घटक है कि गतिशील रूप से दिखाने के /छिपाने सामग्री से शुरू हो रहा है, और अन्य घटकों है कि वे अपने आकार अपडेट करनी पड़ सकती सूचित करने के लिए एक सामान्य तंत्र के रूप में मतलब है या स्थिति। ढांचे के भीतर, इस घटना को घटक तत्व पर निकाल दिया गया है, जिसकी सामग्री को दिखाया गया/छुपाया गया था, और दस्तावेज़ तत्व तक सभी तरह से बुलबुले।

$('div[data-role=collapsible]') 
    .trigger('updatelayout'); 
    //.collapsible(); 

Answer 4

इस मुझे क्या करना है। आशा है कि यह

एचटीएमएल

<div id="collapsibleSet" data-role="collapsible-set"> 
    <div id="ranking1"></div> 
</div> 

जावास्क्रिप्ट में मदद करता है

$('#ranking1').replaceWith('<div id="ranking1" data-role="collapsible" data-collapsed="false">' + htmlRankings(ranking) + '</div>'); 
$('#collapsibleSet').find('div[data-role=collapsible]').collapsible({refresh:true}); 

htmlRankings() एक js समारोह है कि कुछ html कि मैं सिमटने div अंदर चाहते रिटर्न है। यह इस

<h3>11</h3> 
<span>test</span> 

Answer 5

इस कोड को पर्ल के लिए है की तरह कुछ हो सकता है, आप इसे किसी भी प्रोग्रामिंग भाषा के लिए संशोधित कर सकते हैं।

<a href="javascript:collapsible('$div_instance','$imageID')"> 
     <IMG id='$imageID' SRC='$imagePath' alt='(Expand/Collaspe Section' title='Expand/Collaspe' width=10 height=10> 
      $display_header <br/></a> 
      <div id=$div_instance name=$div_instance 
      style="overflow:hidden;display:$display_option;margin-left:30px; margin-top:20px;"> 
             <-- your content --> 
      </div> 
<script language="JavaScript" type="text/javascript"> 
    <!-- 
    function collapsible(theID,imageID) { 
      var elemnt = document.getElementById(theID); 
      var imageObject =document.getElementById(imageID); 
      if(elemnt.style.display == 'block') { 
       elemnt.style.display ='none'; 
       imageObject.src='images/expand_icon.gif'; 
      } 
      else{ 
      elemnt.style.display ='block'; 
      imageObject.src='images/expand_icon_down.gif'; 
      } 

    } 
    // --> 
    </script> 

REF: http://www.ssiddique.info/simple-javascript-to-create-dynamic-collapsible-section.html

Answer 6

jQuery मोबाइल beta2 के रूप में आप घटना ट्रिगर - .trigger ('बनाने')

Answer 7

आप निम्नलिखित कोड

$('#element').collapsibleset('refresh'); 

का उपयोग कर सिमटने ताज़ा कर सकते हैं

उम्मीद है कि यह

Answer 8

इस तरह से आप एक द्विपक्षीय में छोटे collapsibles जोड़ सकते हैं एक गतिशील रूप से गजर। HTML:

<div data-role="collapsible" data-mini="false" data-theme="b" > 
    <h3>main header text</h3> 
    <div id="aCollaps"></div> 
</div> 

जावास्क्रिप्ट

//Your could do for(){ 
    $("#aCollaps").append('<div data-role="collapsible" data-inset="false" data-content-theme="b">' + 
    '<h3>'+HeaderText+'</h3>'+ContentText+'<br/></div>'); 
//} 
//You might want to be more specific here if you have more collapsibles in the page. this just updates all collapsibles 
$('div[data-role=collapsible]').collapsible({refresh:true}); 

Answer 9

मैं

लगता innerHTML स्थापित करने के लिए, बस उस पर एक घटना tiggerring

नीचे

$('#<divId or elementId').trigger("create"); 

Answer 10

यहाँ की तरह गतिशील contnet प्रस्तुत करना चाहिए के बाद मैंने अपने ढहने को गतिशील रूप से बदलने के लिए क्या किया है इसका एक उदाहरण। मेरे पास कुछ सरणी थीं जिन्हें मुझे हेडर के रूप में प्रदर्शित करने की आवश्यकता थी, और फिर मुझे 2 पक्षों के साथ प्रत्येक ढहने वाले सेट में एक ग्रिड की आवश्यकता थी, एक सवाल के लिए और एक उत्तर के लिए। jQuery Mobile docs: enhanceWithin

एक jQuery वस्तु अपने डोम तत्व के पेरेंट का प्रतिनिधित्व करने के लिए किसी भी jQuery मोबाइल अपने HTML करने के लिए जोड़ा सुविधाओं के लिए पर कॉल enhanceWithin:

var inputList = ''; 
    var count = 0; 
    var divnum = 999; 
    var collit = 'false'; 
    inputList += '<div data-role="content">'; 
    inputList += '<div id="fb_showings_collapse" data-role="collapsible-set" data-theme="b">'; 
    $.each(fbFullStrArray, function(index, item) { 
    //set questions and answers for each appt 
    getsetApptFback(fbStrApptArray[index]); 
    //write the html to append when done 
    inputList += '<div data-role="collapsible" data-collapsed="'+collit+'">'; 
    inputList += '<h3>'+fbFullStrArray[index]+'</h3>'; 
    inputList += '<div id="g'+divnum+'" class="ui-grid-a">'; 
    inputList += '<div id="gb'+divnum+'" class="ui-block-a">'; 
    inputList += '<div id="fbq'+index+'"><ol>'; 
    $.each(fbQidArray, function(ind,it) { 
     inputList += '<li>'+fbQuestionArray[ind]+'<b></b></li>'; 
    }); 
    inputList += '</ol></div></div>' 
    inputList += '<div id="ga'+divnum+'" class="ui-block-b">'; 
    inputList += '<div id="fba'+index+'"><ul>'; 
    $.each(fbQidArray, function(ind,it){ 
      inputList += '<li>'+fbAnswerArray[ind]+'<b></b></li>'; 
    }); 
    inputList += '</ul></div></div></div></div>'; 
    collit = "true"; 
    divnum++; 
    count++; 
    }); 
    inputList += '</div></div>'; 

    $('#fb_showings_collapse [role=collapsible-set]').text(''); 
    $('#fb_showings_collapse [role=collapsible]').text(''); 
    if (count > 0) { 
    $('#fb_showings_collapse [role=collapsible]').remove(); 
    $('#fb_showings_collapse').append(inputList).collapsibleset('refresh'); 
    } 
    else if (count == 0){ 
    inputList = 'Sorry! No Showings To Show Feedback For!'; 
    $('#fb_showings_collapse [role=collapsible-set').remove(); 
    $('#fb_showings_collapse [role=collapsible]').text(inputList); 
    } 

Answer 11

enhanceWithin() समारोह देखें।

इस मामले में:

jQuery('[data-role="collapsible"]').parent().enhanceWithin(); 

नोट आप एक से अधिक jQuery मोबाइल जोड़ रहे हैं अगर उन विजेट है कि आप केवल अपने सभी गतिशील HTML जोड़ने के बाद इस तरह के "शरीर" के रूप में एक पूर्वज पर enhanceWithin फोन कर सकते हैं।

यह इस प्रश्न के लिए एक बहुत अच्छा समाधान के रूप में अच्छी तरह से होगा: Refresh a section after adding HTML dynamically to jquery mobile