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.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 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
PHP6 先修班 JSON实例代码
2008/08/23 PHP
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
js面向对象的写法
2016/02/19 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
Angular模版驱动表单的使用总结
2018/05/05 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
从零学Python之入门(三)序列
2014/05/25 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
文秘个人求职信范文
2014/04/22 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技