`
sailei1
  • 浏览: 127079 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Carousel 使用

阅读更多
/**  
 * @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);
			}
		}
   
	}
	

});
1
0
分享到:
评论

相关推荐

    cloud9carousel, 用于 jquery/zepto的高性能 3D 透视图 carousel.zip

    cloud9carousel, 用于 jquery/zepto的高性能 3D 透视图 carousel 云 9-carousel基于 carousel/zepto的3D 透视图,基于原始云 carousel 插件,它是由教授云( 云) 云。特性适用于 jQuery 和 Zepto超快易于使用。( 可选...

    react-responsive-carousel, React.js 响应 carousel ( 带滑动功能).zip

    react-responsive-carousel, React.js 响应 carousel ( 带滑动功能) 响应响应的carousel 请阅读: https://github.com/leandrowd/react-responsive-carousel/issues/160 强大,轻量级和完全可以定制的carousel 组件...

    slick-carousel:使用 Slick javascript 库生成轮播的 Wordpress 插件

    使用 carousel 库。简码选项所有这些选项也可以通过设置页面进行设置,但是如果您想为不同的轮播设置不同的设置,您可以使用简码选项覆盖这些选项... orderby和order (默认menu_order ASC ) 以什么顺序显示帖子。...

    Bootstrap图片轮播组件Carousel使用方法详解

    Bootstrap的流行在于它的响应式设计和易于使用的组件,如按钮、表单、导航和模态对话框等,其中图片轮播组件Carousel是其中之一。 在创建Carousel时,首先要确保你的项目中包含了Bootstrap的CSS和JavaScript库。这...

    nuka-carousel:Pure React Carousel组件

    努卡旋转木马 纯ReactJS轮播组件 安装 要将nuka-carousel添加到您的项目...import Carousel from ' nuka-carousel ' ; export default class extends React.Component { render () { return ( &lt; Carousel&gt; &lt; img

    js-jq-carousel:使用 jquery 轮播图像

    `js-jq-carousel` 是基于 jQuery 的一个轮播图实现,下面我们将详细探讨如何使用这个插件以及其背后的原理。 首先,我们需要确保引入了 jQuery 和 `js-jq-carousel` 插件的相关文件。这通常意味着在 HTML 文件的 `...

    jQuery OwlCarousel响应式插件列表图片滚动轮播

    在本文中,我们将深入探讨jQuery OwlCarousel的核心功能、使用方法以及如何实现响应式图片滚动轮播。 一、核心功能与特性 1. **响应式设计**:OwlCarousel支持各种屏幕尺寸,能自动适应手机、平板和桌面设备,确保...

    jquery.cloud9carousel.js

    jquery.cloud9carousel.js 开发炫酷3D轮播图滚动效果插件

    vue Carousel 实现分页.vue

    Ant Design of Vue Carousel 走马灯 实现简单的分页效果demo 内容简单

    OwlCarousel2-Thumbs, 启用 Owl Carousel 2.0的缩略图支持.zip

    OwlCarousel2-Thumbs, 启用 Owl Carousel 2.0的缩略图支持 carousel-2缩略图插件启用 Owl carousel 2.0的缩略图支持快速启动抓取最新版本并将它的slam默认owl插件。启用拇指$(document).ready(function(){ $('.owl-c

    my-carousel

    在这里,开发者会看到如何使用这两个新配置项`displayLabelNum`和`marginWithItem`来实例化carousel,并与其他组件进行交互。可能还会有事件监听和处理,以及数据绑定等Vue.js特性的运用。 4. **item.vue**: `...

    owl.carousel.min.js

    owl.carousel.min.js

    OwlCarousel插件调用示例轮换图.rar

    在提供的压缩包中,`index.html`是示例页面,包含了OwlCarousel的基本使用;`images`和`img`目录可能包含轮播图的图片资源;`css`目录下的样式文件负责样式设定;`js`目录中的JavaScript文件则包含了OwlCarousel的...

    jQuery-Waterwheel-Carousel-图片左右滚动切换特效

    首先,jQuery Waterwheel Carousel 是基于 jQuery 库的,这意味着在使用前需要确保项目中已经引入了 jQuery。jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理和动画效果,使得开发者能够更高效...

    jQuery幻灯片插件owlcarousel参数说明中文文档

    Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,它具有一下特点:...Owl Carousel 使用方法: 新建一个HTML文件 1、在HTML文件中引入Owl Carousel必须文件 &lt;link href="css/owl.carousel.css" rel="ext

    Carousel.js

    bootstrap框架插件Carousel.js,图片轮播插件。bootstrap的carousel.js可实现轮播图动画。

    android-carousel-demo

    【标题】"android-carousel-demo" 是一个专门为Android系统设计的示例项目,它展示了如何实现一个图标在屏幕上进行三维旋转的动画效果。这个演示并非基于复杂的3D图形库,如OpenGL ES,而是利用2D图形和Android自身...

    Carousel-开源3d,自定义路径动画

    使用Carousel时,你需要集成这个库到你的WPF项目中。这通常包括添加引用、导入命名空间,然后创建Carousel实例并配置相关属性。例如,你可以设置面板数量、动画速度、初始位置等。同时,为了实现自定义路径,你需要...

    Android Carousel源码

    在"CarouselDemo"这个项目中,开发者可以找到一个运行示例,了解如何在实际应用中集成和使用这个组件。通过查看和学习这个源码,开发者不仅可以掌握如何创建3D Carousel效果,还可以学习到自定义ViewGroup、触摸事件...

    基于owl-carousel左右滑动卡片代码.zip

    "基于owl-carousel左右滑动卡片代码"是一个使用了owl.carousel插件的项目,它主要用于创建动态且具有视觉吸引力的文章展示区。这个插件是JavaScript的一个特效库,特别适合用于创建轮播、滑动或旋转木马类型的布局,...

Global site tag (gtag.js) - Google Analytics