Liste et modale framework7

Question

Je suis en train de résoudre ce problème 2 jours et je suis un novice en Javascript Actuellement, je suis en utilisant Visual Studio + cadre Cordova + 7

var pet1 = select_all('pet'); 

    $$('#pet1').empty(); 

    $$.each(pet1, function (index, value) { 

     $$('#pet1').append('<li>' 
      + '<div class="item-link item-content">' 
      + '  <div class="item-media">' 
      + '   <img style="width:80px;height:60px" src="http://file.nowdb.net/' + value.cover + '">' 
      + '  </div>' 
      + '  <div class="item-inner">' 
      + '   <div class="item-title-row">' 
      + '    <div class="item-title">' + value.title + '</div>' 
      + '    <div class="item-after">Element label</div>' 
      + '   </div>' 
      + '   <div class="item-subtitle">' + value.description + '</div>' 
      + '   <div class="item-text">Additional description text</div>' 
      + '  </div>' 
      + '</div>' 
      + '</li>'); 

    }); 

et ce travail bien

après que je trouve une documentation cadre 7 qui appellent modal avec curseur et le code est ici http://framework7.io/docs/modal.html

qui font appel ouvert curseur-modal

Je ne sais pas pourquoi ne peux pas copier le code

Mais le problème pour moi est que je ne sais pas comment ajouter ce code dans ce S'il vous plaît aidez-moi, entre désolé pour mon mauvais anglais. remercie tout le monde

Answer 1

Ok je finis moi-même déjà, publierons la réponse ici pour aider les autres qui posent même problème comme moi

var pet1 = select_all('pet'); 

$$('#pet1').empty(); 

$$.each(pet1, function (index, value) { 

    $$('#pet1').append('<li>' 
     + '<div class="item-link item-content">' 
     + '  <div class="item-media">' 
     + '   <img style="width:80px;height:60px" src="http://file.nowdb.net/' + value.cover + '">' 
     + '  </div>' 
     + '  <div class="item-inner">' 
     + '   <div class="item-title-row">' 
     + '    <div class="item-title">' + value.title + '</div>' 
     + '    <div class="item-after">Element label</div>' 
     + '   </div>' 
     + '   <div class="item-subtitle">' + value.description + '</div>' 
     + '   <div class="item-text">Additional description text</div>' 
     + '  </div>' 
     + '</div>' 
     + '</li>'); 

}); 

juste

continuer le code ci-dessous

$$('.open-slider-modal').on('click', function() { 
    var modal = myApp.modal({ 
    title: 'Awesome Photos?', 
    text: 'What do you think about my photos?', 
    afterText: '<div class="swiper-container" style="width: auto; margin:5px -15px -15px">'+ 
        '<div class="swiper-pagination"></div>'+ 
        '<div class="swiper-wrapper">'+ 
        '<div class="swiper-slide"><img src="..." height="150" style="display:block"></div>' + 
        '<div class="swiper-slide"><img src="..." height="150" style="display:block"></div>'+ 
        '</div>'+ 
       '</div>', 
    buttons: [ 
     { 
     text: 'Bad :(' 
     }, 
     { 
     text: 'Awesome!', 
     bold: true, 
     onClick: function() { 
      myApp.alert('Thanks! I know you like it!') 
     } 
     }, 
    ] 
    }) 
    myApp.swiper($$(modal).find('.swiper-container'), {pagination: '.swiper-pagination'}); 
}); 

puis

premier changement du

$$('.open-slider-modal').on('click', function() { 

à

$$(document).on('click', '.open-slider-modal', function() { 

changer la classe dans votre liste

<div class="item-media open-slider-modal">' 

vous sera fait