HEAD
View4573
kissy版本1.4.X
Slider。
//皮肤文件建议直接拿源码的less文件根据自己业务定制化使用
S.use('kg/slider/1.0.0/index', function (S, Slider) {
var vc-slider = new Slider({
$target: '#slider'
});
})
//DOM结构
<div id="slider" class="vc-slider">
<div class="vc-slider-track">
<div class="vc-slider-range"></div>
<div class="vc-slider-handle"></div>
</div>
</div>
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
$target | String/NodeList | '' | 容器 |
orientation | String | 'horizontal' | 方向,'horizontal' / 'vertical' |
min | Number | 0 | 最小值 |
max | Number | 100 | 最大值 |
value | Number | 0 | 当前值 |
type | String | 'value' | 类型,'value' / 'min' / 'max' |
step | Number | 0 | 梯级,正整数 |
readOnly | Boolean | false | 只读,值不能修改,除非readOnly = false |
disabled | Boolean | false | 禁用,值可以修改,但不能与用户交互,除非disabled = false |
名称 | 参数 | 返回值 | 描述 |
---|---|---|---|
show | / | / | 显示组件 |
hide | / | / | 隐藏组件 |
destroy | / | / | 析构 |
setter | 'value' / 'readOnly' / 'disabled' / 'step' | / | 设置参数对应的属性值 |
getter | 'value' / 'readOnly' / 'disabled' / 'step' | 返回参数对应的属性值 | 返回参数对应的属性值 |
名称 | 参数 | 描述 |
---|---|---|
create | 外抛的CustomEventObject | 组件创建后触发 |
start | 外抛的CustomEventObject | 组件开始滑动时触发 |
slide | 外抛的CustomEventObject | 组件滑动进行中触发 |
stop | 外抛的CustomEventObject | 组件停止滑动时触发 |
change | 外抛的CustomEventObject | 通过setter('value', xxx)改变组件当前值后触发 |
destroy | 外抛的CustomEventObject | 组件析构后触发 |
View1382
kissy版本1.4.X
“轮播组件”常用于滚动展示图片,例如:焦点图。
SnakeSlider是一个可定制复杂动画的轮播组件,支持在切换显示/隐藏切片时分别显示不同动画,基于LayerAnim组件实现动画效果。
切片(Slice)
轮播组件中,切换的部分称之为“切片”。一个轮播组件由多个切片组成。当切换到当前切片时,可显示切换动画。当前切片被隐藏时,也可显示切换动画。由于动画基于LayerAnim实现,因此SnakeSlider可支持定制各种个性化的分层动画。
当前(Actived)切片
当前显示的切片即为“当前切片”。
隐藏(Inactived)切片
未显示的切片为“隐藏切片”。
指示器(Indicator)
“指示器”用于标识每个切片在轮播组件中的顺序。
兼容所有主流浏览器:
KISSY.use('kg/snake-slider/2.0.0/index', function (S, SnakeSlider)
{
var slider = new SnakeSlider();
})
SnakeSlider可基于任意HTML结构创建,给开发者提供足够的灵活度。例如,基于以下简单的HTML:
<div class="slider">
<!-- 切片列表 -->
<ol>
<li> <!-- 切片1 -->
<img src="slice1.jpg"/>
</li>
<li> <!-- 切片2 -->
<img src="slice2.jpg"/>
</li>
</ol>
<!-- 指示器列表 -->
<div>
<span>1</span> <!-- 切片1的指示器 -->
<span>2</span> <!-- 切片2的指示器 -->
</div>
</div>
有两种方式来创建轮播组件:
KISSY.use("kg/snake-slider/2.0.0/, dom", function(S, SnakeSlider, DOM)
{
// 构造切片配置参数
var slices = []; // 切片列表配置参数
var sliceNodes = DOM.query("li"), i, size; // 切片节点列表
var navNodes = DOM.query("span"); // 指示器节点列表
for (i = 0, size = sliceNodes.size(); i < size; ++ i)
{
// 构造切片配置参数
slices[i] =
{
sliceNode: sliceNodes[i], // 切片节点
indicatorNode: navNodes[i] // 指示器节点
}
}
// 创建Slider
var slider = new SnakeSlider(
{
activeSliceStyle: "actived", // 当前切片样式(选择符)
activeIndicatorStyle: "actived", // 当前切片的指示器样式(选择符)
slices: slices // 切片配置
});
});
其中,我们遍历了所有的切片DOM节点,来构造切片的配置参数,格式如下:
{
sliceNode: ..., // 切片节点
indicatorNode: ... // 指示器节点
}
之后,通过配置参数activeSliceStyle
和activeIndicatorStyle
设置当前切片和指示器的选择符为actived
。
然后通过new SnakeSlider(...)
创建轮播组件,该轮播组件包含两个切片。鼠标移动到切片指示器上时,会切换到相应的切片。
除通过JS创建外,我们也可以直接从DOM创建轮播组件。此时,需要在HTML结构中增加一些属性(Attribute)和样式(Class),以便轮播组件能够识别所需的DOM结构。
HTML如下:
<div class="slider" activeSliceStyle="actived" activeIndicatorStyle="actived">
<!-- 切片列表 -->
<ol>
<li class="slice"> <!-- 切片1 -->
<img src="slice1.jpg"/>
</li>
<li class="slice"> <!-- 切片2 -->
<img src="slice2.jpg"/>
</li>
</ol>
<!-- 指示器列表 -->
<div>
<span class="slice-indicator">1</span> <!-- 切片1的指示器 -->
<span class="slice-indicator">2</span> <!-- 切片2的指示器 -->
</div>
</div>
其中,属性activeSliceStyle="actived"
表示当前切片的样式(选择符),activeIndicatorStyle="actived"
表示当前指示器的样式(选择符)。
注:指示器DOM节点必须是轮播组件DOM容器的子节点。
有了上面的HTML,创建轮播组件就非常简单了:
```javascript
KISSY.use("kg/snake-slider/2.0.0/", function(S, SnakeSlider)
{
// 从DOM节点创建轮播组件
SnakeSlider.transform(".slider");
});
其中,SnakeSlider.transform
为静态方法,参数支持选择符或DOM节点。
如果想在切片DOM中使用自定义选择符,不使用slice
等默认选择符,也没有问题。只需在创建轮播组件时,设置第2个参数,指定自定义的选择符即可。例如:
<div class="my-slider" activeSliceStyle="actived" activeIndicatorStyle="actived">
<!-- 切片列表 -->
<ol>
<li class="my-slice"> <!-- 切片1 -->
<img src="slice1.jpg"/>
</li>
<li class="my-slice"> <!-- 切片2 -->
<img src="slice2.jpg"/>
</li>
</ol>
<!-- 指示器列表 -->
<div>
<span class="my-slice-indicator">1</span> <!-- 切片1的指示器 -->
<span class="my-slice-indicator">2</span> <!-- 切片2的指示器 -->
</div>
</div>
切片和指示器都使用了自定义选择符my-slice
和my-slice-indicator
,那么,创建轮播组件的方法如下:
KISSY.use("kg/snake-slider/2.0.0/", function(S, SnakeSlider)
{
// 从DOM节点创建轮播组件
SnakeSlider.transform(".my-slider",
{
sliceSelector: "my-slice", // 切片选择符
indicatorSelector: "my-slice-indicator" // 指示器选择符
});
});
支持的选择符配置参数有:
上面创建的轮播组件在切换时没有任何动画,仅仅是显示和隐藏切片。下面我们为其添加切换动画,修改HTML结构:
<div class="slider" activeSliceStyle="actived" activeIndicatorStyle="actived">
<!-- 切片列表 -->
<ol>
<li class="slice" activeEffect="{to: {opacity: 1}, duration: 0.6}" inactiveEffect="{to: {opacity: 0}, duration: 0.6}">
<img src="slice1.jpg"/>
</li>
<li class="slice" activeEffect="{to: {opacity: 1}, duration: 0.6}" inactiveEffect="{to: {opacity: 0}, duration: 0.6}">
<img src="slice2.jpg"/>
</li>
</ol>
<!-- 指示器列表 -->
<div>
<span class="slice-indicator">1</span> <!-- 切片1的指示器 -->
<span class="slice-indicator">2</span> <!-- 切片2的指示器 -->
</div>
</div>
上面每个切片节点(<li>
)上,都增加了activeEffect
和inactiveEffect
属性,值为JSON字符串。
activeEffect:定义切片被显示时的动画。
inactiveEffect:定义切片被隐藏时的动画。
通常,轮播组件会每隔一段时间,自动切换切片。下面,我们通过switchInterval
配置参数来实现该功能。修改后的HTML如下:
<div class="slider" activeSliceStyle="actived" activeIndicatorStyle="actived" switchInterval="3">
<!-- 切片列表 -->
<ol>
<li class="slice" activeEffect="{to: {opacity: 1}, duration: 0.6}" inactiveEffect="{to: {opacity: 0}, duration: 0.6}">
<img src="slice1.jpg"/>
</li>
<li class="slice" activeEffect="{to: {opacity: 1}, duration: 0.6}" inactiveEffect="{to: {opacity: 0}, duration: 0.6}">
<img src="slice2.jpg"/>
</li>
</ol>
<!-- 指示器列表 -->
<div>
<span class="slice-indicator">1</span> <!-- 切片1的指示器 -->
<span class="slice-indicator">2</span> <!-- 切片2的指示器 -->
</div>
</div>
其中,switchInterval
设置为3,表示每隔3秒切换一次。如果当前切片已经是最后一个,则会自动切换显示第一个切片,如此循环往复。
如果未设置switchInterval
,或将switchInterval
设置为 < 0的值,则会自动切换会被禁用。
为提高页面加载的速度,可以将切片HTML放在<xmp>
或<textarea>
等节点中,当切换到该切片时,再渲染显示。
修改HTML如下:
<div class="slider" activeSliceStyle="actived" activeIndicatorStyle="actived" switchInterval="3">
<!-- 切片列表 -->
<ol>
<li class="slice" activeEffect="{to: {opacity: 1}, duration: 0.6}" inactiveEffect="{to: {opacity: 0}, duration: 0.6}">
<xmp class="slice-lazy">
<img src="slice1.jpg"/>
</xmp>
</li>
<li class="slice" activeEffect="{to: {opacity: 1}, duration: 0.6}" inactiveEffect="{to: {opacity: 0}, duration: 0.6}">
<xmp class="slice-lazy">
<img src="slice2.jpg"/>
</xmp>
</li>
</ol>
<!-- 指示器列表 -->
<div>
<span class="slice-indicator">1</span> <!-- 切片1的指示器 -->
<span class="slice-indicator">2</span> <!-- 切片2的指示器 -->
</div>
</div>
其中,class="slice-lazy"
用于标识延迟渲染的容器节点,该节点包含切片HTML,必须是切片节点的子节点。
延迟渲染的HTML中可包含JS脚本,该部分脚本会在延迟渲染后被执行。
一个轮播组件对象由两类JS对象组成:
轮播组件支持两种创建方式:
KISSY.use("kg/snake-slider/2.0.0/", function(S, SnakeSlider)
{
var config = /* 配置参数 */;
new SnakeSlider(config);
});
<轮播组件DOM activeSliceStyle="当前切片样式(全局配置)" inactiveSliceStyle="隐藏切片样式(全局配置)"
activeIndicatorStyle="当前指示器样式(全局配置)" inactiveIndicatorStyle="隐藏指示器样式(全局配置)"
switchOnIndicator="触发切换的时机("mouseover":鼠标移上时触发切换,"click":鼠标按下时触发切换)" switchInterval="切换间隔时间(单位:秒)" hoverPause="鼠标移到切片上时,是否停止自动切换">
<切片DOM id="切片标识" actived="初始时是否显示" activeSliceStyle="当前切片样式(覆盖全局配置)" inactiveSliceStyle="隐藏切片样式(覆盖全局配置)"
activeIndicatorStyle="当前指示器样式(覆盖全局配置)" inactiveIndicatorStyle="隐藏指示器样式(覆盖全局配置)" switchInterval="切换间隔时间(单位:秒)"
activeEffect="显示切片的动画" inactiveEffect="隐藏切片的动画">
<延迟渲染DOM>
... <-- 切片HTML -->
</延迟渲染DOM>
</切片DOM>
<切片DOM>
...
</切片DOM>
<指示器DOM>
...
</指示器DOM>
</轮播组件DOM>
KISSY.use("kg/snake-slider/2.0.0/", function(S, SnakeSlider)
{
var node = "/* DOM节点 */";
SnakeSlider.transform(node);
});
SnakeSlider继承了KISSY Base类,因此,配置参数可通过KISSY Attr的get方法读取,通过set方法设置。例如:
var slider = new SnakeSlider(...);
slider.get("slices"); // 获取切片列表
slider.set("switchInterval", 5); // 设置切片自动切换间隔时间为5秒
container {String / HTMLNode}【可选,默认值:<body>
节点】
轮播组件容器节点,支持选择符或DOM节点(支持的选择符请参考KISSY DOM选择符)。
该配置参数仅在初始化组件时有效,之后设置无效。
slices [Object]
切片配置(数组),具体请参考“切片配置参数”。该配置参数仅在初始化组件时有效,之后设置无效。
activeSliceStyle {String}【可选】
当前切片样式(选择符)。当前切片切换完毕后,在切片DOM节点上添加该样式。
inactiveSliceStyle {String}【可选】
隐藏切片样式(选择符)。切片被隐藏后,在切片DOM节点上添加该样式。该参数与activeSliceStyle
可同时设置,也可只设置其中一个。
activeIndicatorStyle {String}【可选】
当前切片的指示器样式(选择符)。当前切片切换完毕后,在指示器DOM节点上添加该样式。
inactiveIndicatorStyle {String}【可选】
隐藏切片的指示器样式(选择符)。切片被隐藏后,在指示器DOM节点上添加该样式。
switchOnIndicator {String}【可选】
触发切换的时机。取值如下:
"click":鼠标单击指示器时,触发切换。
该配置参数仅在初始化组件时有效,之后设置无效。
switchInterval {Number}【可选,默认值:0】
自动切换间隔时间(单位:秒)。如果该值≤0,则不自动切换。
hoverPause {Boolean}【可选】
鼠标移到切片上时,是否停止自动切换。【默认值:true】
id {String}【可选】
切片标识,用于查找切片对象。该配置参数仅在初始化组件时有效,之后设置无效。
index {String}【只读】
切片显示索引,从0开始。该参数为只读参数,设置无效。
sliceNode {String / HTMLNode}【可选】
切片DOM节点(选择符 / DOM节点)。该配置参数仅在初始化组件时有效,之后设置无效。
actived {Boolean}【可选,默认值:false】
初始时,该切片是否为当前切片。该配置参数仅在初始化组件时有效,之后设置无效。
activeSliceStyle {String}【可选】
当前切片样式(选择符)。如果设置,该参数会覆盖轮播组件配置参数activeSliceStyle
。
inactiveSliceStyle {String}【可选】
隐藏切片样式(选择符)。如果设置,该参数会覆盖轮播组件配置参数inactiveSliceStyle
。
indicatorNode {String / HTMLNode}【可选】
指示器DOM节点(选择符 / DOM节点)。该配置参数仅在初始化组件时有效,之后设置无效。
activeIndicatorStyle {String}【可选】
当前切片的指示器样式(选择符)。如果设置,该参数会覆盖轮播组件配置参数activeIndicatorStyle
。
inactiveIndicatorStyle {String}【可选】
隐藏切片的指示器样式(选择符)。如果设置,该参数会覆盖轮播组件配置参数inactiveIndicatorStyle
。
switchInterval {Number}【可选,默认值:0】
自动切换间隔时间(单位:秒)。如果设置,该参数会覆盖轮播组件配置参数switchInterval
。
activeEffect {Object}【可选】
切片被显示时的动画,其值请参考LayerAnim开发手册。
该配置参数仅在初始化组件时有效,之后设置无效。
inactiveEffect {Object}【可选】
切片被隐藏时的动画,其值请参考LayerAnim开发手册。
该配置参数仅在初始化组件时有效,之后设置无效。
activeIndicatorEffect {Object}【可选】
当前切片的指示器动画,其值请参考LayerAnim开发手册。
该配置参数仅在初始化组件时有效,之后设置无效。
inactiveIndicatorEffect {Object}【可选】
被隐藏切片的指示器动画,其值请参考LayerAnim开发手册。
该配置参数仅在初始化组件时有效,之后设置无效。
lazyRenderNode {String / HTMLNode}【可选】
延迟渲染的容器节点(选择符 / DOM节点)。该配置参数仅在初始化组件时有效,之后设置无效。
switchTo(slice)
切换到指定切片,同时触发beforeswitch
事件。
参数:
slice {Number / 切片对象}:要切换到的切片索引或切片对象。
nextSlice(recurring)
获取当前切片的下一切片。
参数:
recurring {Boolean}:是否循环(如果循环,则最后一个切片的下一个为第一个切片)。【可选参数,默认:false】
返回值:
{Slice} 下一切片对象。
previousSlice(recurring)
获取当前切片的上一切片。
参数:
recurring {Boolean}:是否循环(如果循环,则第一个切片的上一个为最后一个切片)。【可选参数,默认:false】
返回值:
{Slice} 上一切片对象。
getActiveSlice()
获取当前切片。
返回值:
{Slice} 当前切片对象。
getSliceByIndex(index)
按索引查找切片。
参数:
index {Number}:切片索引。
返回值:
{Slice} 找到的切片对象。
getSliceById(id)
按标识查找切片。
参数:
id {String}:切片标识。
返回值:
{Slice} 找到的切片对象。
bindSliceEvent(name, listener, context)
在所有切片上,绑定DOM事件。
参数:
bindIndicatorEvent(name, listener, context)
在所有切片指示器上,绑定DOM事件。
参数:
startAutoSwitch(switchInterval)
启动定时切换。
参数:
switchInterval {Number}:定时切换间隔时间。【可选参数,默认:轮播组件配置参数switchInterval
】
stopAutoSwitch()
停止定时切换。
pauseAutoSwitch()
暂停定时切换。如果之后用户手工切换到其它切片,则定时切换会重新启动。
resumeAutoSwitch()
如果已暂停定时切换,则调用该方法可继续定时切换。
isAutoSwitchStarted()
定时切换是否已启动。
返回值:
{Boolean} 定时切换是否已启动。
appendSlice(slice)
添加切片。切片添加后,触发sliceadd
事件。
参数:
slice {Object / Slice}:要添加的切片(配置参数或切片对象)。
返回值:
{Slice} 已添加的切片对象。
insertSlice(slice, index)
插入切片。插入后,会触发sliceadd
事件。
参数:
返回值:
{Slice} 已插入的切片对象。
removeSlice(index)
删除切片。如果被删除的切片为当前切片,则删除后会自动显示下一个切片。如果没有下一个切片,则会显示上一切片。切片删除后,触发sliceremove
事件。
参数:
index {Number}:被删除的切片索引。
返回值:
{Slice} 已删除的切片对象。
clearSlices()
删除所有切片。每删除一个切片,都会触发一次sliceremove
事件。
activate()
切换到该切片。
deactivate()
隐藏该切片。调用该方法仅仅隐藏切片,并不会显示其它切片。
bindSliceEvent(name, listener, context)
在该切片上,绑定DOM事件。
参数:
displayActiveSliceStyle()
显示当前切片样式,将切片样式设为配置参数activeSliceStyle
值。
displayInactiveSliceStyle()
显示隐藏切片样式,将切片样式设为配置参数inactiveSliceStyle
值。
bindIndicatorEvent(name, listener, context)
在该切片的指示器上,绑定DOM事件。
参数:
displayActiveIndicatorStyle()
显示当前指示器样式,将指示器的样式设为配置参数activeIndicatorStyle
值。
displayInactiveIndicatorStyle()
显示隐藏指示器样式,将指示器的样式设为配置参数inactiveIndicatorStyle
值。
renderLazily()
延迟渲染该切片。
appendTo(slider)
将该切片添加到轮播组件。
参数:
slider {SnakeSlider}:轮播组件。
返回值:
{Slice} 该切片对象。
insertTo(slider, index)
将该切片插入到轮播组件。
参数:
返回值:
{Slice} 该切片对象。
remove()
删除该切片,同时删除相应的切片节点和指示器节点。
beforeswitch(e)【事件可取消(e.preventDefault)】
切片切换前,触发该事件。
参数
e.slice {Slice}:将要显示的切片对象。
afterswitch(e)
切片切换后,触发该事件。该事件将在beforeswitch
事件后立即被触发,如果配置了切换动画,则该事件在动画播放前被触发。
参数
switchnext()【事件可取消(e.preventDefault)】
自动切换时,切换到下个切片前,触发该事件。
switchprevious()【事件可取消(e.preventDefault)】
自动切换时,切换到上个切片前,触发该事件。
sliceadd(e)
添加切片后,触发该事件。
参数
sliceremove(e)
删除切片后,触发该事件。
参数
activeslicestyledisplay(e)【事件可取消(e.preventDefault)】
添加当前切片的样式前,触发该事件。
参数
e.sliceInactived {Slice}:隐藏的切片对象。
inactiveslicestyledisplay(e)【事件可取消(e.preventDefault)】
添加隐藏切片的样式前,触发该事件。
参数
e.sliceActived {Slice}:当前切片对象。
activeindicatorstyledisplay(e)【事件可取消(e.preventDefault)】
显示当前指示器的样式前,触发该事件。
参数
e.sliceInactived {Slice}:隐藏切片对象。
inactiveindicatorstyledisplay(e)【事件可取消(e.preventDefault)】
显示隐藏指示器的样式前,触发该事件。
参数
e.sliceActived {Slice}:当前切片对象。
lazyrender()
延迟渲染切片后,触发该事件。