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按钮来显示上一张或下一张图片。

Overlay效果:

第一种方案:点击对应的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是要显示的哪张图片
<!-- .csharpcode, .csharpcode pre { 	font-size: small; 	color: black; 	font-family: consolas, "Courier New", courier, monospace; 	background-color: #ffffff; 	/*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt  { 	background-color: #f4f4f4; 	width: 100%; 	margin: 0em; } .csharpcode .lnum { color: #606060; } -->
<!-- .csharpcode, .csharpcode pre { 	font-size: small; 	color: black; 	font-family: consolas, "Courier New", courier, monospace; 	background-color: #ffffff; 	/*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt  { 	background-color: #f4f4f4; 	width: 100%; 	margin: 0em; } .csharpcode .lnum { color: #606060; } --><!-- .csharpcode, .csharpcode pre { 	font-size: small; 	color: black; 	font-family: consolas, "Courier New", courier, monospace; 	background-color: #ffffff; 	/*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt  { 	background-color: #f4f4f4; 	width: 100%; 	margin: 0em; } .csharpcode .lnum { color: #606060; } -->

这时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次或多次。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏娱乐心理测试

小程序设置启动页面

5376
来自专栏cnblogs

Webpack+Vue如何导入Jquery和Jquery的第三方插件

创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; win...

25510
来自专栏Angular&服务

cordova扫描二维码

1353
来自专栏前端布道

桌面端前端性能优化策略

例如同一个域名 CDN 服务器上的 a.js,b.js,c.js 就可以按如下方式在一个请求中下载:

1022
来自专栏上善若水

013 mysql 忘记密码,修改密码

启动:sudo service mysql start 停止:sudo service mysql stop

985
来自专栏python学习之旅

Python+Selenium笔记(九):操作警告和弹出框

#之前发的 driver.switch_to_alert() 这句虽然可以运行通过,但是会弹出警告信息(这种写法3.x不建议使用)  改成 driver.swi...

6009
来自专栏王磊的博客

解决React Native unable to load script from assets index.android.bundle on windows

React Native运行的时候,经常碰到React Native unable to load script from assets index.andro...

3567
来自专栏企鹅号快讯

前端性能优化——桌面浏览器前端优化策略

作者:ouven https://my.oschina.net/zhangstephen/blog/1601382 摘要: 前端性能优化是一个很宽泛的概念,本书...

2396
来自专栏技术墨客

Next.js入门教程 原

参考代码:https://github.com/chkui/nextjs-getting-started 。

5442
来自专栏web编程技术分享

【Java框架型项目从入门到装逼】第八节 - 用EasyUI绘制主界面

3928

扫码关注云+社区