对同一页面上的多个项目使用剑道UI翻转效果/组合效果
Use Kendo UI Flip Effects / Combined Effects for multiple items on the same page
我需要使用 kendo ui 来显示 6-60 个项目。每个都使用这里的翻转效果 http://demos.telerik.com/kendo-ui/fx/combined
产品将使用唯一 ID 从数据库加载,如下所示:
<div class="row">
<div class="col-md-4 product-container">
<div id="productID1" class="productID">
<div class="product">
<div id="product-back1" class="product-desc">
<p>BACK</p>
</div>
<div id="product-front1" class="product-image">
<p>FRONT</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 product-container">
<div id="productID2" class="productID">
<div class="product">
<div id="product-back2" class="product-desc">
<p>BACK</p>
</div>
<div id="product-front2" class="product-image">
<p>FRONT</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 product-container">
<div id="productID3" class="productID">
<div class="product">
<div id="product-back3" class="product-desc">
<p>BACK</p>
</div>
<div id="product-front3" class="product-image">
<p>FRONT</p>
</div>
</div>
</div>
</div>
问题是我需要页面上的多个面板,如何使每个"正面"和"背面"单击唯一。
var el = kendo.fx($('div[id^=productID]')),
flip = el.flip("horizontal", $('div[id^=product-front]'), $('div[id^=product-back]')),
zoom = el.zoomIn().startValue(1).endValue(1);
flip.add(zoom).duration(200);
$('div[id^=product-front]').click(function () {
flip.stop().play();
});
$('div[id^=product-back]').click(function () {
flip.stop().reverse();
});
我尝试将每个项目加载到数组中,但没有找到确保正确项目将被翻转的好方法。
由于每个div[id^=product-front]
都是div[id^=productID]
的孩子,你可以找到它的孩子并使用它。
将flip.stop().play();
替换为
kendo.fx($(this)).flip("horizontal", $(this).children()[0], $(this).children()[1]).stop().play();
相关文章:
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- jQuery UI自动完成突然停止工作
- 如何使用skip参数使用angular ui引导进行服务器端分页
- AngularJS UI路由器不能像ng路由器那样工作
- 我可以更改剑道UI网格吗's的外键值
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- Rails/JSON:如何将JSON用于jquery UI自动完成表单
- 停止jQuery UI滑块移动超过给定值
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- 通过点击按钮翻转缩略图
- Jquery UI自动完成无法工作
- 语义ui如何使用javascript启用或禁用下拉列表
- jquery ui滑块上的滑块值
- jQuery UI可排序-多连接列表拖动
- 如何在Angular UI网格中选择下一行
- 对具有ui typeahead的对象中的值执行orderBy
- 对同一页面上的多个项目使用剑道UI翻转效果/组合效果
- 防止 (jquery ui) 数据选取器翻转到当前月份
- JQuery UI 翻转文本,就像在 gumroad.com 中一样
- ie中的剑道UI翻转效果显示得太快了