列表和模态在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

回答

相关问题