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

本文实例讲述了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中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

# jQuery  # 滚动插件  # scrollable.js  # jQuery中关于ScrollableGridPlugin.js（固定表头）插件的使用逐步解析  # jquery tools 系列 scrollable（2）  # jquery tools 系列 scrollable学习  # jQuery控制li上下循环滚动插件用法实例(附demo源码下载)  # 基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage  # 基于编写jQuery的无缝滚动插件  # 基于jQuery的图片左右无缝滚动插件  # 超级有用的13个基于jQuery的内容滚动插件和教程  # jQuery新闻滚动插件 jquery.roller.js  # jcarousellite.js 基于Jquery的图片无缝滚动插件  # 基于jQuery图片平滑连续滚动插件  # 宋体  # 跳转到  # 第一个  # 分页  # 跳转  # 该页  # 将会  # 下一页  # 表单  # 到第  # 到该  # 的是  # 是一个  # 相关内容  # 多个  # 当前页  # 两种  # 以此类推  # 感兴趣  # 第二个 

相关文章： 如何选购建站域名与空间？自助平台全解析  网站制作外包价格怎么算,招聘网站上写的“外包”是什么意思？  如何在IIS中新建站点并配置端口与IP地址？  如何在Golang中处理模块冲突_解决依赖版本不兼容问题  宿州网站制作公司兴策,安徽省低保查询网站？  javascript基本数据类型及类型检测常用方法小结  制作营销网站公司,淘特是干什么用的？  如何用景安虚拟主机手机版绑定域名建站？  山东网站制作公司有哪些,山东大源集团官网？  如何选择高效便捷的WAP商城建站系统？  如何选择高性价比服务器搭建个人网站？  公司网站建设制作费用,想建设一个属于自己的企业网站，该如何去做？  如何选择建站程序？包含哪些必备功能与类型？  广德云建站网站建设方案与建站流程优化指南  香港服务器WordPress建站指南：SEO优化与高效部署策略  如何制作一个表白网站视频,关于勇敢表白的小标题？  如何打造高效商业网站？建站目的决定转化率  图册素材网站设计制作软件,图册的导出方式有几种？  制作充值网站的软件,做人力招聘为什么要自己交端口钱？  如何撰写建站申请书？关键要点有哪些？  建站主机选购指南：核心配置与性价比推荐解析  武汉外贸网站制作公司,现在武汉外贸前景怎么样啊？  建站之星Pro快速搭建教程：模板选择与功能配置指南  如何用AWS免费套餐快速搭建高效网站？  如何零成本快速生成个人自助网站？  实现点击下箭头变上箭头来回切换的两种方法【推荐】  安云自助建站系统如何快速提升SEO排名？  企业在线网站设计制作流程,想建设一个属于自己的企业网站，该如何去做？  建站之星好吗？新手能否轻松上手建站？  如何快速搭建高效WAP手机网站吸引移动用户？  企业网站制作费用多少,企业网站空间一般需要多大，费用是多少？  网站企业制作流程,用什么语言做企业网站比较好？  高配服务器限时抢购：企业级配置与回收服务一站式优惠方案  如何在阿里云虚拟主机上快速搭建个人网站？  宝华建站服务条款解析：五站合一功能与SEO优化设置指南  如何用西部建站助手快速创建专业网站？  如何通过VPS搭建网站快速盈利？  宝塔新建站点报错如何解决？  无锡营销型网站制作公司,无锡网选车牌流程？  如何制作网站标识牌,动态网站如何制作（教程）？  如何用IIS7快速搭建并优化网站站点？  大型企业网站制作流程,做网站需要注册公司吗？  如何快速搭建二级域名独立网站？  建站10G流量真的够用吗？如何应对访问高峰？  如何通过.red域名打造高辨识度品牌网站？  Python如何创建带属性的XML节点  建站IDE高效指南：快速搭建+SEO优化+自适应模板全解析  模具网站制作流程,如何找模具客户？  东莞专业制作网站的公司,东莞大学生网的网址是什么？  如何通过FTP空间快速搭建安全高效网站？