flipster轮播卡的动态绑定

时间:2016-08-22 04:47:25

标签: javascript jquery carousel jquery-flipster

我在申请中使用了flipster旋转木马卡。当我静态绑定卡值时,我的卡片视图正常。当我动态获取值时,无法生成carousal类。我正在买飞机和传播卡片。手动将数据提供给<li>标记时,然后是 flipster工作正常。使用AJAX将数据动态传递给<li>时,Flipster没有显示出来。

静态结合:(工作精细)

<ul id="flipsterCard" class="flip-items">
  <li data-flip-title="layout 1">
    <a onclick="updatevariable()" class="Button Block" 
       style="background-color: #8d65ff;">
      <h1>layout 1</h1>
      <!-- <p>View name</p> 

<img src="resources/images/icon_No_Logo.jpg"  width="42" height="42">

<p>comments</p> -->
    </a>
  </li>
  <li data-flip-title="layout 2" >
    <a onclick="updatevariable()" class="Button Block" 
       style="background-color:   #6859fb;">
      <h1>layout 2</h1>
      <!-- <p>The bare minimum code needed to implement Flipster</p> -->
    </a>
  </li>  
</ul>

动态绑定(课程没有加载)

function getcard()
{
  $.ajax({
    type : "GET",
    url : context2 + 'getCards?coreId='+coreId,
    contentType : "application/json",
    dataType: 'json',
    async : false,
    success: function(data) {
      var $cardList = $('#flipsterCard');
      $.each(data, function(i, item) {
        $('<li  class="flipster__nav__item">')
        .append($('<a onclick="updatevariable();" class="Button Block" style="background-color: red";>'))
        .append($('<p>').html(item.workspaceViewName))
        .append($('<p>').html(item.comments))
        $('<img />').attr('src', "item.imgUrl")// ADD IMAGE PROPERTIES.
        .width('113px').height('113px').appendTo($cardList);
      });
    }
  });
}

http://brokensquare.com/Code/jquery-flipster/demo/

1 个答案:

答案 0 :(得分:0)

当您动态更改要渲染的项目数量时,您必须执行 $best_price = DB::select('Some SQL statement'); foreach($best_price as $best_price_id) { $best_price_id->id; }; $product->best_price_id = $best_price_id; return $product->best_price_id;