/**
* @Author sai
* Carousel
*/
Ext.define('SmartMenu.view.members.WeddCarousel', {
extend: 'Ext.Panel',
xtype:'WeddCarousel',
requires: [
'Ext.carousel.Carousel',
'Ext.Panel'
],
config: {
direction: 'horizontal',
layout: { type: 'vbox'},
listeners: {
'initialize':function(panel){
var d= this.getData();
var carousel_items = [];
for (j = 0; j < d.length; j++) {
var img= '[img]' + d[j].url + '[/img]';
carousel_items.push({html:img});
}
var items=[{xtype: 'carousel', styleHtmlContent: true,items:carousel_items,flex:2,
listeners:{'activeitemchange':function(){
var i = this.getActiveIndex();
var no=parseInt(i)+parseInt(1);
var d=this.getParent().getData();
var items=this.getParent().getItems();
items.items[1].setHtml('<div style="font-size:13px;line-height:18px;"><div style="text-align:right; line-height:30px; font-size:14px; font-weight:bold;"><span style="float:left; width:88%; height:30px; overflow:hidden; text-align:left;">' + d[i].title + '</span>' + no + '/' + d.length + '</div>' + d[i].description + '</div>');
},
'activate' : function(panel) {
var el = panel.element;
el.on('tap', function(e, t) {
var image = e.getTarget('img');
if (image) {
var items=this.getParent().getItems();
if(items.items[1].getHidden()){items.items[1].setHidden(false);}else{
items.items[1].setHidden(true);}
var bar=this.getParent().getParent().getTabBar();
if(bar.getHidden()){
bar.setHidden(false);
}else{
bar.setHidden(true);
}
}
}, panel);
}
}
},{xtype:'sheet',cls:'wedd_carousel_sheet',masked :false,modal:false,enter:'bottom',exit:'bottom',dock:'bottom', html:'<div style="font-size:13px;line-height:18px;"><div style="text-align:right; line-height:30px; font-size:14px; font-weight:bold;"><span style="float:left; width:88%; height:30px; overflow:hidden; text-align:left;">' + d[0].title + '</span>' + 1 + '/' + d.length + '</div>' + d[0].description + '</div>'}];
panel.setItems(items);
}
}
}
});
分享到:
相关推荐
cloud9carousel, 用于 jquery/zepto的高性能 3D 透视图 carousel 云 9-carousel基于 carousel/zepto的3D 透视图,基于原始云 carousel 插件,它是由教授云( 云) 云。特性适用于 jQuery 和 Zepto超快易于使用。( 可选...
react-responsive-carousel, React.js 响应 carousel ( 带滑动功能) 响应响应的carousel 请阅读: https://github.com/leandrowd/react-responsive-carousel/issues/160 强大,轻量级和完全可以定制的carousel 组件...
使用 carousel 库。简码选项所有这些选项也可以通过设置页面进行设置,但是如果您想为不同的轮播设置不同的设置,您可以使用简码选项覆盖这些选项... orderby和order (默认menu_order ASC ) 以什么顺序显示帖子。...
Bootstrap的流行在于它的响应式设计和易于使用的组件,如按钮、表单、导航和模态对话框等,其中图片轮播组件Carousel是其中之一。 在创建Carousel时,首先要确保你的项目中包含了Bootstrap的CSS和JavaScript库。这...
努卡旋转木马 纯ReactJS轮播组件 安装 要将nuka-carousel添加到您的项目...import Carousel from ' nuka-carousel ' ; export default class extends React.Component { render () { return ( < Carousel> < img
`js-jq-carousel` 是基于 jQuery 的一个轮播图实现,下面我们将详细探讨如何使用这个插件以及其背后的原理。 首先,我们需要确保引入了 jQuery 和 `js-jq-carousel` 插件的相关文件。这通常意味着在 HTML 文件的 `...
在本文中,我们将深入探讨jQuery OwlCarousel的核心功能、使用方法以及如何实现响应式图片滚动轮播。 一、核心功能与特性 1. **响应式设计**:OwlCarousel支持各种屏幕尺寸,能自动适应手机、平板和桌面设备,确保...
- 使用Visual Studio的调试工具,可以检查和优化代码执行过程,确保在各种场景下都能正常工作。 总结起来,WPF Carousel样式的Demo源码涵盖了从基础控件到高级动画效果的多个方面,是学习和实践WPF自定义控件开发...
jquery.cloud9carousel.js 开发炫酷3D轮播图滚动效果插件
Ant Design of Vue Carousel 走马灯 实现简单的分页效果demo 内容简单
OwlCarousel2-Thumbs, 启用 Owl Carousel 2.0的缩略图支持 carousel-2缩略图插件启用 Owl carousel 2.0的缩略图支持快速启动抓取最新版本并将它的slam默认owl插件。启用拇指$(document).ready(function(){ $('.owl-c
在这里,开发者会看到如何使用这两个新配置项`displayLabelNum`和`marginWithItem`来实例化carousel,并与其他组件进行交互。可能还会有事件监听和处理,以及数据绑定等Vue.js特性的运用。 4. **item.vue**: `...
owl.carousel.min.js
在提供的压缩包中,`index.html`是示例页面,包含了OwlCarousel的基本使用;`images`和`img`目录可能包含轮播图的图片资源;`css`目录下的样式文件负责样式设定;`js`目录中的JavaScript文件则包含了OwlCarousel的...
首先,jQuery Waterwheel Carousel 是基于 jQuery 库的,这意味着在使用前需要确保项目中已经引入了 jQuery。jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理和动画效果,使得开发者能够更高效...
Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,它具有一下特点:...Owl Carousel 使用方法: 新建一个HTML文件 1、在HTML文件中引入Owl Carousel必须文件 <link href="css/owl.carousel.css" rel="ext
bootstrap框架插件Carousel.js,图片轮播插件。bootstrap的carousel.js可实现轮播图动画。
【标题】"android-carousel-demo" 是一个专门为Android系统设计的示例项目,它展示了如何实现一个图标在屏幕上进行三维旋转的动画效果。这个演示并非基于复杂的3D图形库,如OpenGL ES,而是利用2D图形和Android自身...
使用Carousel时,你需要集成这个库到你的WPF项目中。这通常包括添加引用、导入命名空间,然后创建Carousel实例并配置相关属性。例如,你可以设置面板数量、动画速度、初始位置等。同时,为了实现自定义路径,你需要...
在"CarouselDemo"这个项目中,开发者可以找到一个运行示例,了解如何在实际应用中集成和使用这个组件。通过查看和学习这个源码,开发者不仅可以掌握如何创建3D Carousel效果,还可以学习到自定义ViewGroup、触摸事件...