Источник: 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 и содержимое под ним, а не как складной элемент. Как я могу это исправить?
Самый простой способ добиться этого - вызвать метод foldapsible() для динамически созданных divs:
$('div[data-role=collapsible]').collapsible();
источник: http://forum.jquery.com/topic/dynamically-add-collapsible-div
Это то, что я делаю. Надеюсь, что это поможет.
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>
Я думаю,
после установки innerhtml, просто нарисовать событие на нем должно отобразить динамический коннект, как показано ниже
$('#<divId or elementId').trigger("create");
Этот код предназначен для 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
В jQuery mobile beta2 вы запускаете событие -.trigger('create')
вы можете обновить сборку, используя следующий код
$('#element').collapsibleset('refresh');
Надеюсь, что это поможет
Вам нужно добавить их в нужное место (например, под элементом data-role="page"), затем вызвать .page() для инициализации добавляемого вами контента, например:
$('<div data-role="collapsible"><h3>Title</h3><p>Content</p></div>')
.appendTo('#someElement').page();
Лучше, чем сбрасываемый, является updatelayout, он находится в документах. Короче...
Это событие инициируется компонентами в рамках, которые динамически показывают/скрывают контент и означают как общий механизм для уведомления других компонентов, которые им могут потребоваться, чтобы обновить их размер или позицию. В рамках этого события это событие запускается на компоненте компонента, содержимое которого было показано/скрыто, а пузырится до элемента документа.
$('div[data-role=collapsible]')
.trigger( 'updatelayout' );
//.collapsible();
Таким образом, вы можете добавлять небольшие коллажи в большую динамически. 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});
Вот пример того, что я сделал, чтобы динамически менять мой складной. У меня было несколько массивов, которые мне нужно было отображать в качестве заголовков, а затем мне нужна сетка в каждом складном наборе с двумя сторонами, одна для вопроса и одна для ответа.
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);
}
См. функцию 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