列表和模態在framework7

-1

我試圖解決這個問題，2天，我在Javascript 新秀目前我使用Visual Studio +科爾多瓦+框架7列表和模態在framework7

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

    });

和這項工作做得很好

後，我發現在框架7文件調用模態採用滑蓋和代碼在這裏http://framework7.io/docs/modal.html

其稱之爲開放式滑蓋模式

我不知道爲什麼不能複製該代碼

但對我的問題是我不知道如何添加此代碼到它請幫幫我，對不起之間我的英語不好。感謝大家

來源

2017-06-23 Fdd Hong Yu

如果我的理解，OU想有1張每'寵物'？ – Djiggy

@Djiggy No no bro 我已經成功地創建了一個列表調用pet1，寵物是我在數據庫中的集合，現在我希望我可以在點擊它之後在這個列表中創建一個模式也許$$（document）.on click功能？ –

我不確定你在問什麼。你不希望你的列表中的滑塊模態，但只是在點擊模式顯示圖像？ – Djiggy

好吧，我完成了它自己已經，將在此公佈答案求助誰面臨着同樣的問題，像我這樣的人

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

});

只是

繼續下面

$$('.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'}); 
});

代碼

然後

先改變

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

到

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

改變你的列表裏面的類

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

你會做

來源

2017-06-24 07:17:52

列表和模態在framework7

回答

相關問題