UXC.Slider Class
Slider 划动菜单类
页面加载完毕后, Slider 会查找那些有 class = js_autoSlider 的标签进行自动初始化
requires: jQuery
UXC Project Site | API docs | demo link
Slider 可以指定的一些常用 html 属性, 这个类的属性很多, 想了解得更详细看源码吧~
slidersubitems: 指定具体子元素是那些, selector ( 子元素默认是 layout的子标签 )
sliderleft: 左移的触发selector
sliderright: 右移的触发selector
sliderwidth: 主容器宽度
slideritemwidth: 子元素的宽度
sliderhowmanyitem: 每次滚动多少个子元素, 默认1
sliderdefaultpage: 默认显示第几页
sliderstepms: 滚动效果运动的间隔时间(毫秒), 默认 5
sliderdurationms: 滚动效果的总时间
sliderdirection: 滚动的方向, 默认 horizontal, { horizontal, vertical }
sliderloop: 是否循环滚动
sliderinitedcb: 初始完毕后的回调函数, 便于进行更详细的声明
sliderautomove: 是否自动滚动
sliderautomovems: 自动滚动的间隔
Constructor
UXC.Slider
-
_selector
Parameters:
-
_selector
Selector | String
Example:
<style>
.hslide_list dd{ display: none; }
.hslide_list dd, .hslide_list dd img{
width: 160px;
height: 230px;
}
.slider_one_item dd, .slider_one_item dd img{
width: 820px;
height: 230px;
}
</style>
<link href='../../Slider/res/hslider/style.css' rel='stylesheet' />
<script src="../../../lib.js"></script>
<script>
UXC.debug = true;
UXC.use( 'Slider' );
function sliderinitedcb(){
var _sliderIns = this;
UXC.log( 'sliderinitedcb', new Date().getTime() );
_sliderIns.on('outmin', function(){
UXC.log( 'slider outmin' );
}).on('outmax', function(){
UXC.log( 'slider outmax' );
}).on('movedone', function( _evt, _oldpointer, _newpointer){
UXC.log( 'slider movedone', _evt, _oldpointer, _newpointer );
}).on('beforemove', function( _evt, _oldpointer, _newpointer ){
UXC.log( 'slider beforemove', _evt, _oldpointer, _newpointer );
});
}
</script>
<table class="hslide_wra">
<tr>
<td class="hslide_left">
<a href="javascript:" hidefocus="true" style="outline:none;" class="js_slideleft">左边滚动</a>
</td>
<td class="hslide_mid">
<dl
style="width:820px; height: 230px; margin:0 5px;"
class="hslide_list clearfix js_slideList js_autoSlider"
slidersubitems="> dd" sliderleft="a.js_slideleft" sliderright="a.js_slideright"
sliderwidth="820" slideritemwidth="160"
sliderdirection="horizontal" sliderhowmanyitem="5"
sliderloop="false" sliderdurationms="300"
sliderinitedcb="sliderinitedcb"
>
<dd style="display: block; left: 0; " class="tipsItem">content...</dd>
<dd style="display: block; left: 0; " class="tipsItem">content...</dd>
<dd style="display: block; left: 0; " class="tipsItem">content...</dd>
</dl>
</td>
<td class="hslide_right">
<a href="javascript:" hidefocus="true" style="outline:none;" class="js_slideright">右边滚动</a>
</td>
</tr>
</table>
Methods
_init
()
private
内部初始化方法
Returns:
_initAutoMove
()
private
初始化自动滚动
如果 layout 的 html属性 sliderautomove=ture, 则会执行本函数
Returns:
find
-
_selector
查找 layout 的内容
Parameters:
-
_selector
Selector
Returns:
getInstance
-
_selector
-
_ins
从 selector 获得 或 设置 Slider 的实例
Parameters:
-
_selector
Selector -
_ins
SliderInstance
Returns:
init
-
_selector
批量初始化 Slider
Parameters:
-
_selector
Selector
Returns:
isSlider
-
_selector
判断 selector 是否具备 实例化 Slider 的条件
Parameters:
-
_selector
Selector
Returns:
layout
()
获取 Slider 的主外观容器
Returns:
move
-
_backwrad
控制 Slider 向左或向右划动
Parameters:
-
_backwrad
Bool_backwrad = ture(向左), false(向右), 默认false
Returns:
moveTo
-
_newpointer
控制 Slider 划动到指定索引
Parameters:
-
_newpointer
Int
Returns:
on
-
_evtName
-
_cb
自定义事件绑定函数
使用 jquery on 方法绑定 为 Slider 实例绑定事件
Returns:
page
-
_ix
获取指定索引页的 selector 对象
Parameters:
-
_ix
Int
Returns:
pointer
()
获取 Slider 的当前索引数
Returns:
totalpage
()
获取 Slider 的总索引数
Returns:
trigger
-
_evtName
自定义事件触发函数
使用 jquery trigger 方法绑定 为 Slider 实例函数自定义事件
Parameters:
-
_evtName
String
Returns:
Properties
autoInit
Bool
static
页面加载完毕后, 是否自动初始化 带有 class=js_autoSlider 的应用
Default: true