jQueryTools Scrollable详解
来源:互联网 发布:linux assert 编辑:程序博客网 时间:2024/06/05 22:37
在网页中加入各式各样的轮播广告都可以归结为滑动块的灵活使用,而jQueryTools提供了一套非常方便的滑动块解决方案,基本可以实现任何网页上的轮播图片或图片浏览功能。
滑动块设置说明(scrollable)
属性
默认值
说明
clonedClass
'cloned'
当循环滑动时程序会自动复制一组滑动单元以便平滑连接第一个或最后一个元素,此时复制后的这一组滑动单元还会增加一个CSS类名,默认为'cloned'
disabledClass
"disabled"
如果没有开启循环滑动,则滑动到第一个或最后一个元素时相应的向前、向后按钮会自动切换成此CSS类名
easing
"swing"
items
".items"
keyboard
true
circular
false
是否循环滑动
next
".next"
向后按钮,使用jQuery选择器
prev
".prev"
向前按钮,使用jQuery选择器
speed
400
滑动动画时长,毫秒
vertical
false
是否垂直滑动
导航插件属性设置说明(navigator)
属性
默认值
说明
activeClass
"active"
导航激活时的CSS类名
idPrefix
indexed
false
如果启用该选项,则自动填充导航仪元素的索引号。
history
false
navi
".navi"
naviItem
自动滑动设置说明(Scrollable autoscrolling)
属性
默认值
说明
steps
1
每次滑动移动多少个滑块单元
interval
1000
滑动间隔时间,毫秒
autoplay
true
是否自动播放,如果设置为false,则需要调用JavaScript API进行播放
autopause
true
鼠标悬停时是否自动暂停
Scrollable简单使用方法
滑动块设置说明(scrollable)
clonedClass
'cloned'
当循环滑动时程序会自动复制一组滑动单元以便平滑连接第一个或最后一个元素,此时复制后的这一组滑动单元还会增加一个CSS类名,默认为'cloned'
disabledClass
"disabled"
如果没有开启循环滑动,则滑动到第一个或最后一个元素时相应的向前、向后按钮会自动切换成此CSS类名
easing
"swing"
'swing' 滑动时会有加速度效果, 'linear' 则是匀速滑动
items
".items"
滑动区根元素,作为滑动单元的容器,使用jQuery选择器。此元素尽量简单比较好,一个简单的DIV元素就可以了。
keyboard
true
是否支持键盘方向键控制,水平滑动区使用左右键,垂直滑动区使用上下键。如果为true则当滑动区获得焦点之后可以监控键盘事件,可以在程序中使用focus()强制获取焦点。自1.1.0版本之后还可以支持'static',无论是否获取到焦点都会监控键盘事件。合理利用'static'和true属性值可以制作同时包含上下或左右滑动的滑区,如:A complete scrollable navigational system
circular
false
是否循环滑动
next
".next"
向后按钮,使用jQuery选择器
prev
".prev"
向前按钮,使用jQuery选择器
speed
400
滑动动画时长,毫秒
vertical
false
是否垂直滑动
导航插件属性设置说明(navigator)
activeClass
"active"
导航激活时的CSS类名
idPrefix
自1.1.2版本以后,可以设置导航ID前缀,如设置"foo",则自动为导航添加"foo0", "foo1", "foo2"作为每个页码的ID
indexed
false
如果启用该选项,则自动填充导航仪元素的索引号。
history
false
自1.2.0版本以后,配合 History tool 可以使浏览器的后退按钮成为滑动区的后退按钮。
navi
".navi"
导航容器根节点选择器
naviItem
导航元素选择器
自动滑动设置说明(Scrollable autoscrolling)
steps
1
每次滑动移动多少个滑块单元
interval
1000
滑动间隔时间,毫秒
autoplay
true
是否自动播放,如果设置为false,则需要调用JavaScript API进行播放
autopause
true
鼠标悬停时是否自动暂停
Scrollable简单使用方法
$("#scroller").scrollable({circular: true}).autoscroll({ autoplay: false });
一个稍微复杂点的垂直+水平嵌套滑动的例子:
在此例子中,按上下键可以垂直滑动"垂直滑动组"并且切换"水平滑动组",按左右键可以滑动"水平滑动组",详见A complete scrollable navigational system
$(document).ready(function() {
//主垂直划区
$("#main").scrollable({
// 设置为垂直滑动
vertical: true,
// 始终监控上下按键
keyboard: 'static',
// 当滑动后将焦点设置为当前水平滑区
onSeek: function(event, i) {
horizontal.eq(i).data("scrollable").focus();
}
// 导航
}).navigator("#main_navi");
// 水平划区
var horizontal = $(".scrollable").scrollable({ circular: true }).navigator(".navi");
// 当页面载入时将焦点设置为第0个水平滑区
horizontal.eq(0).data("scrollable").focus();
});
0 0
- jQueryTools Scrollable详解
- jQueryTools Scrollable和通用轮播图片原理分析
- JQueryTools
- react-native-scrollable-tab-view详解
- React Native之react-native-scrollable-tab-view详解
- jQueryTools Tab页使用方法
- Scrollable Cursors
- Creating a Scrollable DataGrid...
- J2me Scrollable Text
- jquery.mb.scrollable
- [AndEngine] Scrollable Background
- jQuery Tools Scrollable
- jquery scrollable.js
- Android scrollable tabs
- Freeze header of scrollable datagrid
- 深入理解JDBC Scrollable ResultSet
- 深入理解JDBC Scrollable ResultSet
- 深入理解JDBC Scrollable ResultSet
- Linux设备驱动程序(第三版)学习之内核的调试技术(三)_1
- Memcache 实现tomcat集群session共享
- Firebug & Chrome Console 控制台使用指南
- 用JS打开新窗口,防止被浏览器阻止的方法
- utf8页面post form到gb2312
- jQueryTools Scrollable详解
- jQueryTools Scrollable和通用轮播图片原理分析
- jQueryTools Tab页使用方法
- JavaScript取随机整数的方法
- PHP中foreach循环用法详解
- Uploadify 3.2 参数属性、事件、方法函数详解
- Uploadify 3.2 使用详解
- Windows路径常量总结
- FireFox、Chrome不支持Jquery Tools Validator的解决方法
原创粉丝点击
热门IT博客
热门问题
老师的惩罚
人脸识别
我在镇武司摸鱼那些年
重生之率土为王
我在大康的咸鱼生活
盘龙之生命进化
天生仙种
凡人之先天五行
春回大明朝
姑娘不必设防,我是瞎子
一定的近义词
不一定的英文
一定会的
谁说魔法师就一定要会魔法
一审判决书
车几年一审
一审终审
一审
七座车几年一审
第一审刑事判决书
一审刑事判决书
驾驶证几年一审
新车几年一审
驾照几年一审
b2驾照几年一审
六座车几年一审
小车几年一审
一审判决不服上诉二审时间
摩托车几年一审
五座车几年一审
第一审民事判决书
7坐车几年一审
红谷滩案一审开庭
刘洁被刺案一审
一审判决生效时间
一审上诉二审多久开庭
三号交通站一审未通过
龙岩黄晓炎一审判决书
轿车几年一审
汽车几年一审
15年车一年一审
面包车几年一审
七坐车几年一审
泉港碳九事故一审
内蒙古杀妻案一审
车辆免检两年一审怎么换标
毒驾撞交警案一审
泉港碳九泄漏案一审宣判
摩托车行驶证几年一审
从业资格证几年一审
小车六年后几年一审