jQuery Tools Scrollable使用的限制-阿里云开发者社区

开发者社区> liminjun88> 正文

jQuery Tools Scrollable使用的限制

简介:
+关注继续查看

在现在很多项目中,都会使用到jQuery Tools中scrollable。特别对于显示Photo Gallery,当然目前国内国外都有第三方非常优秀的的类似jQuery Tools。这是一个基本demo地址:http://jquerytools.org/demos/scrollable/index.html

 

项目中使用了3个Tab,简称 TabA,TabB,TabC,每个Tab下面对应一张图片,图片上有很多hot point,用户点击hot point之后,显示一个overlay。上面的图片是使用Scrollable制作的,上面的图片时一系列的,可以点击previous和next按钮 来显示上一张或下一张图片。

image

 

Overlay效果:

image

 

第一种方案:点击对应的Tab时去加载相应的overlay内容,点击hot point时,显示overlay。但是这里有一个问题,Ajax加载overlay内容时需要时间,并且overlay里面包好了4张图片,加载时间相对较长。我们需要使用一下代码:

// initialize scrollable together with the autoscroll plugin
var slideroot= $("#autoscroll").scrollable({circular: true}).autoscroll({ autoplay: false });
 
// provide scrollable API for the action buttons
window.slideapi = slideroot.data("scrollable");
slideapi .seekTo(index, 500); //index是要显示的哪张图片
 

这时Scrollable API地址:http://jquerytools.org/documentation/scrollable/index.html#api

。然后previous和next按钮自动绑 上了事件,就可以上一张和下一张。但是在第一种方案中,我每次都会调用上面的方法。因为只有等Ajax内容加载完毕,我才可以使用上面的方法。所有每次点 击一个hot point时,都会执行上面的方法,这时问题就来了。在第二次执行代码是,slideroot.data(“scrollable”);显示e没有 data()方法,也就是scrollable不能同时绑定多次,只能绑定一次,然后赋值给slideapi。但是在Ajax调用的方案中,我不能在页面 ready时候就是用上面的代码,因为overlay内容没有加载过来。

第二种方案:换成最原始的方法,在页面加载的时候,把3个tab对应的overlay content都加载过来,隐藏在那里。然后调用上面的方法,在点击第二个hot point时,只需要调用

slideapi.seekTo(index,500);就可以。

 

具体scrollable实现机制没有彻底的分析,但是不值得为什么不对这种方法绑定2次或多次。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【spring 注解 错误】使用controller 作为后台给前台ajax交互数据出错
controller作为后台与前台的ajax进行交互,后台的方法处理完成返回一个boolean类型的值,想传给前台用来判断是否执行成功,BUT,问题来了: 1 严重: Servlet.service() for servlet rest threw exception 2 java.
703 0
PolarDB-X 1.0-SQL 手册-Sequence-Sequence限制及注意事项
限制与注意事项 转换 Sequence 类型时,必须指定 START WITH 起始值; 单元化 Group Sequence 不支持作为源或目标的类型转换,也不支持起始值以外的参数修改; 属于同一个全局唯一数字序列分配空间的每个单元化 Group Sequence,必须指定相同的单元数量和不同的单元索引; 在 PolarDB-X 非拆分模式库(即后端仅关联一个已有的 RDS 物理库)、或拆分模式库中仅有单表(即所有表都是单库单表,且无广播表)的场景下执行 INSERT 时, PolarDB-X 会自动优化并直接下推语句,绕过优化器中分配 Sequence 值的部分。此时 INSERT INT
14 0
如何配置阿里云容器服务K8S Ingress Controller使用私网SLB
本文主要讲述如何配置阿里云容器服务K8S Ingress Controller使用私网SLB。
11742 0
iOS系统菜单控制器UIMenuController使用简介(一)
iOS系统菜单控制器UIMenuController使用简介
24 0
iOS系统菜单控制器UIMenuController使用简介(二)
iOS系统菜单控制器UIMenuController使用简介
23 0
使用 Chrome Dev tools 分析应用的内存泄漏问题
使用 Chrome Dev tools 分析应用的内存泄漏问题
24 0
使用setuptools自动安装python模块
setuptools绝对是个好东西,它可以自动的安装模块,只需要你提供给它一个模块名字就可以了,并且自动帮你解决模块的依赖问题。
648 0
+关注
90
文章
5
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载