Exhibition v1.0 使用指南
千一网络 www.cftea.com
简介
Exhibition 是用来实现重要或推荐信息展示的，信息内容可以是任意的（一般是图片）。
它在同一区域循环切换显示多个信息，既节约了页面空间，又丰富了页面内容，其切换效果还可大大吸引访问者的注意力。
Exhibition 内置的几个类，可以使您轻松实现几个不同的展示效果，并且还可满足丰富的自定义需求。
同时，Exhibition 也是一个开发平台，所以可以对其类进行扩展，实现更强大的自定义功能。
Exhibition 类结构
- ExhibitionData 要展示的信息的数据类。
- ExhibitionStage 展示的舞台类。
- ExhibitionScrollStage 带滚动效果的展示的舞台类。继承自 ExhibitionStage。
- ExhibitionFilterStage 带滤镜效果的展示的舞台类。继承自 ExhibitionStage。
- ExhibitionController 控制信息变换的控制器类。
- ExhibitionNumberController 数字指示的控制信息变换的控制器类。继承自 ExhibitionController。
- Exhibition 展示类，装配舞台和控制器以进行展示。
使用参考
下面介绍类常用的属性和方法，如果您想了解更多的属性和方法，以便于继续开发，可以参考源代码中的注释。
ExhibitionData 参考
addItem(title, content)
增加项目。
- title 字符串。控制器的项目内容。
- content 字符串。舞台的项目内容。
var data = new ExhibitionData();
data.addItem("1", "<a href='http://www.cftea.com/' target='_blank'><img src='1.png' alt='1' title='' /></a>");
data.addItem("2", "<a href='http://www.cftea.com/' target='_blank'><img src='2.png' alt='2' title='' /></a>");
data.addItem("3", "<a href='http://www.cftea.com/' target='_blank'><img src='3.png' alt='3' title='' /></a>");
data.addItem("4", "<a href='http://www.cftea.com/' target='_blank'><img src='4.png' alt='4' title='' /></a>");
data.addItem("5", "<a href='http://www.cftea.com/' target='_blank'><img src='5.png' alt='5' title='' /></a>");
ExhibitionStage 参考
create(data, width, height, xArrangement)
创建舞台。
- data ExhibitionData 对象。
- width 数字。舞台的宽度。
- height 数字。舞台的高度。
- xArrangement 布尔。是否是按 X 方向，即水平方向排列。除了滚动效果等一些要求排列方向的情况外，该值可以为任意布尔值。
var stage = new ExhibitionStage();
stage.create(data, 325, 200, false);
ExhibitionScrollStage 参考
使用该类需要 ScrollBinder v1.0.1 支持。
create(data, width, height, xArrangement)
创建舞台。
- data ExhibitionData 对象。
- width 数字。舞台的宽度。
- height 数字。舞台的高度。
- xArrangement 布尔。若要水平方向滚动，则该应值为 true；若要竖直方向滚动，则该值应为 false。
var stage = new ExhibitionScrollStage();
stage.create(data, 325, 200, false);
ExhibitionFilterStage 参考
create(data, width, height, xArrangement)
创建舞台。
- data ExhibitionData 对象。
- width 数字。舞台的宽度。
- height 数字。舞台的高度。
- xArrangement 布尔。该值可以为任意布尔值。
var stage = new ExhibitionFilterStage();
stage.create(data, 325, 200, false);
ExhibitionController 参考
ExhibitionNumberController 参考
create(data, eventName, delay, width, height)
创建控制器。
- data ExhibitionData 对象。
- eventName 字符串。手动触发项目变换的事件名称，可选值有：mouseover、click。
- delay 数字。自动触发项目变换的延时，单位毫秒。
- width 数字。控制器的宽度。
- height 数字。控制器的高度。
var controller = new ExhibitionNumberController();
controller.create(data, "mouseover", 3000, 150, 20);
filter
滤镜效果的对象。更改该对象可以实现不同的滤镜效果。具体请参见 Filter 类参考。注意，某些浏览器可能不支持滤镜。
Exhibition 参考
Exhibition(target, padding, borderWidth, borderStyle, borderColor, width, height)
构造函数。
- target 字符串或对象。承载展区的 HTML 控件 Id 名称或控件对象。
- padding 数字。边距。
- borderWidth 数字。边框的宽度。
- borderStyle 字符串。边框的样式。
- borderColor 字符串。边框的颜色。
- width 数字。展区的宽度，不包括边距和边框。
- height 数字。展区的高度，不包括边距和边框。
var exhibition = new Exhibition("demo", 2, 1, "solid", "#666666", 325, 200);
exhibition.assemble(stage, 0, 0, controller, 178, 218);
exhibition.startAutoPlay();
exhibition.initialize();
assemble(stage, stageTop, stageLeft, controller, controllerTop, controllerLeft)
装载舞台和控制器。
- stage ExhibitionStage 或其派生类对象。
- stageTop 数字。舞台距展区内容区域上边的距离，一般为 0。
- stageLeft 数字。舞台距展区内容区域左边的距离，一般为 0。
- controller ExhibitionController 或其派生类对象。
- controllerTop 数字。控制器距展区内容区域上边的距离。
- controllerLeft 数字。控制器距展区内容区域左边的距离。
initialize()
startAutoPlay()