jQuery滚动插件scrollable.js用法分析


Posted in jQuery onMay 25, 2017

本文实例讲述了jQuery滚动插件scrollable.js用法。分享给大家供大家参考,具体如下:

Scrollable是一个灵活、轻量级用于创建滚动内容的jQuery插件。任何内容(HTML、视频、文件、图片等...)都可以作为一个滚动项。支持水平与垂直两种滚动方向。

用途:滚动效果,可制作分步验证页面

以下scrollable.js方法说明描述:

方法名称 返回值 说明
getConf() Object 返回scrollable的配置对象,并且可通过设置该对象的相关属性值来修改该配置对象的属性。
getIndex() number 获取当前滚动项的索引号,0代表第一个元素,1代表第二个元素,以此类推。此外,需注意的是,如果获取到多个滚动项,那么将会只返回第一个滚动项的索引号。
getItems() jQuery 返回所有的滚动项,结果以jquery对象的方式返回。
getItemWrap() jQuery 获取滚动项的父节点,结果以jquery对象的方式返回。
getPageAmount() number 获取当前滚动栏的分页数。
getPageIndex() number 返回当前分页索引号。比如说,如果分页设置为5个滚动项/页,并且当前滚动项位置为7的话,那么将会返回1(第二页)
getRoot() jQuery 获取滚动项的上一级节点。
getSize() number 返回滚动项的数量。该方法等同于getConf().size
getVisibleItems() jQuery 获取一个由当前可见滚动项组成列表,该列表为一个jquery对象,可见滚动项的数量由配置对象的size属性定义。
     
reload() API scrollable支持动态添加和删除滚动项的功能。在动态添加或删除滚动项以后,调用此方法来自动更新分页导航以及滚动项移动的相关信息。
prev() API 跳转到该滚动项的前一项(如果该滚动项不是第一个滚动项)
next() API 跳转到该滚动项的下一项(如果该滚动项不是最后一个滚动项)
seekTo(index) API 跳转到指定索引处的滚动项。
move(offset) API 将处于当前状态(激活)的滚动项位置由当前滚动项向前/后移动offset。Offset为正,则滚动项向右/下移动,否则,向左/上移动。比如:move(2),则处于当前状态的滚动项的索引由i滚动项转移至i+2滚动项。
prevPage() API 跳转到前一页(如果该页不是第一页)。
nextPage() API 跳转到后一页(如果该页不是最后一页)。
setPage(index) API 跳转到第index页。比如,index=2,那么会从当前页跳转到第3页。
movePage(offset) API 用于将显示页的位置由当前页切换到该页/后offset页,该方法其他解释类似于(offset)。
begin() API 跳转到第一个滚动项,相当于seekTo(0)。
end() API 跳转到最后一个滚动项。
click(index) API 使第index个滚动项处于选中(激活)状态。
     
onBeforeSeek(fn) API 参见配置对象的onBeforeSeek相关说明
onSeek(fn) API 参见配置对象的onSeek相关说明

注意:上面方法表中prev()方法以下的方法除了表中携带的参数外,还包含两个隐含参数:speed和callback。其中speed参数是用于控制滚动项的动画效果持续时间的,而callback为其回调方法。具体实现可参见scrollable的prev()方法使用示例。

具体使用方法:

var scrollable=$("div.scrollable").scrollable();
//alert(scrollable.getConf().prev);//获取配置对象中的prev属性
scrollable.getConf().speed=200;//设置配置对象的speed属性
//alert(scrollable.getIndex());//获取当前滚动项的索引
//alert(scrollable.getItems().length);//获取当前滚动项的数量
//alert(scrollable.getItemWrap().html());//获取包含滚动项的节点(class=scrollable),并将所有滚动项显示出来
//alert(scrollable.getPageAmount());//获取当前滚动栏分页数
//alert(scrollable.getPageIndex());//获取当前所在分页
//alert(scrollable.getRoot().html());//获取滚动项的上一级节点(id=thumbs)
//alert(scrollable.getSize());
//alert(scrollable.getVisibleItems().length);//获取当前可见滚动项数量
scrollable.next();//如果有下一个滚动项,则跳转到下一个滚动项
scrollable.prev(3000,function(){return true});//跳转到前一滚动项
//var seekTo= scrollable.click(0).seekTo(2,1000,function(){
    //alert(this.getIndex());
//});
//scrollable.move(2);
//scrollable.prevPage();//跳转到前一页
//scrollable.nextPage();//跳转到下一页
//scrollable.setPage(1);//跳转到下一页
//scrollable.begin();//跳转到第一个滚动项
//scrollable.end();//跳转到最后一个滚动项
scrollable.click(3);//使第四个滚动项处于选中状态
scrollable.onBeforeSeek(function(){
    alert("you click the "+this.getIndex()+"st scrollable item!");
});
$("#remove").click(function(){
    scrollable.getItems().filter(":last").remove();//删除最后一个滚动项
    scrollable.reload().prev();//自动更新相关配置信息,并跳转到被删除滚动项的前一项
});

另外,如果你的表单页面要自适应屏幕并且resize的话能让表单页面不至于偏离,可以使用 scrollable.seekTo(index)来解决。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
js和jquery中获取非行间样式
May 05 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jquery实现加载更多"转圈圈"效果(示例代码)
Nov 09 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 #jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 #jQuery
jquery.masonry瀑布流效果
May 25 #jQuery
浅谈struts1 & jquery form 文件异步上传
May 25 #jQuery
jquery Form轻松实现文件上传
May 24 #jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 #jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 #jQuery
You might like
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
php 问卷调查结果统计
2015/10/08 PHP
golang与PHP输出excel示例
2016/07/22 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
img的onload的另类用法
2008/01/10 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
Python中的TCP socket写法示例
2018/05/11 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
Python flask框架端口失效解决方案
2020/06/04 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
企业标语口号
2014/06/10 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫