Динамическое добавление складных элементов

Ответ 1

Самый простой способ добиться этого - вызвать метод foldapsible() для динамически созданных divs:

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

источник: http://forum.jquery.com/topic/dynamically-add-collapsible-div

Ответ 2

Это то, что я делаю. Надеюсь, что это поможет.

HTML

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

Javascript

$('#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>

Ответ 3

Я думаю,

после установки innerhtml, просто нарисовать событие на нем должно отобразить динамический коннект, как показано ниже

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

Ответ 4

Этот код предназначен для perl, его можно изменить для любого языка программирования.

 <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

Ответ 5

В jQuery mobile beta2 вы запускаете событие -.trigger('create')

Ответ 6

вы можете обновить сборку, используя следующий код

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

Надеюсь, что это поможет

Ответ 7

Вам нужно добавить их в нужное место (например, под элементом data-role="page"), затем вызвать .page() для инициализации добавляемого вами контента, например:

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

Здесь вы можете проверить его.

Ответ 8

Лучше, чем сбрасываемый, является updatelayout, он находится в документах. Короче...

Это событие инициируется компонентами в рамках, которые динамически показывают/скрывают контент и означают как общий механизм для уведомления других компонентов, которые им могут потребоваться, чтобы обновить их размер или позицию. В рамках этого события это событие запускается на компоненте компонента, содержимое которого было показано/скрыто, а пузырится до элемента документа.

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

Ответ 9

Таким образом, вы можете добавлять небольшие коллажи в большую динамически. HTML:

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

Javascript

//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});

Ответ 10

Вот пример того, что я сделал, чтобы динамически менять мой складной. У меня было несколько массивов, которые мне нужно было отображать в качестве заголовков, а затем мне нужна сетка в каждом складном наборе с двумя сторонами, одна для вопроса и одна для ответа.

   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);
    }

Ответ 11

См. функцию enhanceWithin(): jQuery Mobile docs: enhanceWithin

Вызовите enhanceWithin в объекте jQuery, представляющем родителя элемента DOM, чтобы добавить в ваш HTML-функции jQuery Mobile.

В этом случае:

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

Примечание. Если вы добавляете несколько виджетов jQuery Mobile, вы можете только вызывать enhanceWithin у предка, такого как "BODY", после добавления всего динамического HTML.

Это было бы неплохое решение для этого вопроса: Обновите раздел после динамического добавления HTML в jQuery mobile