Динамически созданный складной набор в jQuery Mobile

Хорошо, как только я увижу ответ на этот вопрос, я буду чувствовать себя глупо. Я в этом уверен.Динамически созданный складной набор в jQuery Mobile

Я создал это точно так, как хочу раньше, но сейчас я реорганизую свой код для новой версии. Я пытаюсь динамически создавать складные наборы в jQuery Mobile, но мой html не дает права.

<div data-role="header"> 
     <h2>Playground</h2> 
    </div> 
    <div data-role="content"> 
     <div data-role="button" id="addprimary" data-inline="true">Add 5</div> 
     <div data-role="collapsible">    
      <h4>Collapsible</h4> 
      <form id="makecollapsible"> 
      </form> 
     </div> 
    </div> 
    <div data-role="footer"> 
     <h4>Please, no applause</h4> 
    </div> 
</div> 

<script> 
$('#addprimary').on('click', function() { 
    Markup.Collapsible(); 
}); 

var Markup = new Object(); 


Markup.Collapsible = function() { 

$('#makecollapsible') 
.append($('<div>') 
    .attr({ 'data-role': 'collapsible-set', 'id': 'primary' }) 
); 
for (i = 0; i < 5; i++) { 
    ($('<div>') 
     .attr({ 'data-role': 'collapsible', 'data-content-theme': 'c', 
       'data-collapsed': 'true' }) 
     .html('<h4>' + i +'</h4>')) 
    .appendTo('#primary'); 
    } 
} 
</script>

Может кто-нибудь, пожалуйста, посмотрите на эту http://jsfiddle.net/c2jLY/ и скажите мне, что я неправильно? Мои <div> s с data-role='collapsible' не отображают как collapsibles, что также влияет на HTML, который я пытаюсь включить в них позже.

Справка приветствуется, спасибо!

источник

2013-09-20 McPhelpsius

Вы определенно должны еще опубликовать свой код в вопросе. – Mathletics

Сейчас включено – McPhelpsius

Можете ли вы описать то, что вы видите или что вы думаете не так? Если я посмотрю на свою скрипку, нажмите кнопку «Добавить 5», затем щелкните элемент «Складной», он откроется внутри вашего содержимого. Я бы сказал, что все работает ко мне. Что вы ожидаете увидеть? –

Внутри Markup.Collapsible функция и в конце ее, добавьте ниже. Для складной набор, вам нужно сообщить jQM, что вы улучшаете .collapsibleset() и объедините его с .trigger('create').

$('#makecollapsible').collapsibleset().trigger('create');

Demo

Я забыл упомянуть, что при добавлении элементов динамически, вызовите методы улучшения на родительский элемент; делая это, улучшат элементы детей. Таким образом, вам не нужно использовать .collapsible().trigger('create') для каждого сложенного сложения.

источник

2013-09-20 21:49:32 Omar

Это именно то, что мне нужно. Спасибо. – McPhelpsius

, что я показываю здесь, является простой, но работает:

<script type="text/javascript"> 
 
//dynamically make 10 collapsible items and append them to the collapsible-set 
 
var jj = "SUPER item added.."; 
 

 
$('[data-role="content"]').append('<div id="set" data-role="collapsible-set"></div>'); 
 
var count; 
 
\t for (count=0; count < 10; count++) { // div id should be from id='c0' to 'c9' 
 
\t \t $("#set").append('<div id="c' + count + '" data-role="collapsible">'); 
 
\t \t $("#c" + count.toString()).append('<h3>Adding element_' + count +'</h3>'); 
 
\t \t $("#c" + count.toString()).append(jj + 'count ' + count + '</div>'); 
 

 
\t } 
 

 
// either one is tested working below: 
 
// \t \t $('[data-role="content"]').trigger('create'); 
 
\t \t $("#set").collapsibleset("refresh"); 
 

 
</script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
\t <!------------------------page 1 ListView template--> 
 
\t \t <div data-role="page" id="page01"> 
 
\t \t <div data-role="header" data-theme="b" data-position="fixed"> \t \t \t 
 
\t \t \t <h2>-- DEMO -- &nbsp;&nbsp;</h2> 
 
\t \t </div> 
 
\t \t <div data-role="content" id="content"> 
 
    
 
    </div> 
 
</body>

источник

2016-07-13 08:10:43

Динамически созданный складной набор в jQuery Mobile

ответ

Смежные вопросы