专栏首页快乐八哥jQuery Tools Scrollable使用的限制

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 条评论
登录 后参与评论

相关文章

  • Javascript对象的方法赋值

    Javascript对象编程学习中,一直不能很好的掌握对象的属性(property)和方法(method)。今天在写代码过程中,又犯了一个低级错误。 <!DOC...

    八哥
  • JavaScript内置对象--Math对象

    在JavaScript开发中,除了简单加减乘除运算之外,有时候开发,特别是动画或者游戏开发中,需要使用复杂的数学运算。JavaScript中Math对象提供了一...

    八哥
  • 让IE7/8使用CSS中first-child和last-child样式属性

    项目最终效果如下图所示: ? 可以看出2个tab之间有一天分割线,这条分割线没有使用单独的div或者span。而是使用li标签的border-right。但是最...

    八哥
  • Javascript对象的方法赋值

    Javascript对象编程学习中,一直不能很好的掌握对象的属性(property)和方法(method)。今天在写代码过程中,又犯了一个低级错误。 <!DOC...

    八哥
  • JavaScript内置对象--Math对象

    在JavaScript开发中,除了简单加减乘除运算之外,有时候开发,特别是动画或者游戏开发中,需要使用复杂的数学运算。JavaScript中Math对象提供了一...

    八哥
  • 如何开发YUI3的扩展

    YUI是Yahoo发布的一个JS框架,虽然不如jQuery简单,但是如果你是要做一些复杂的事情的时候,有一个合适量级的框架还是能有用不少。

    大江小浪
  • JavaScript中的内置对象--Number对象

    JavaScript中的内置对象有以下6个: 1.Number对象 2.Boolean对象 3.Data对象 4.Math对象 5.String对象 6.Arr...

    八哥
  • ICCV 2019 | 旷视研究院提出新型抠图方法AdaMatting,实现当前最佳

    两年一度的国际计算机视觉大会 ICCV 2019 ( IEEE International Conference on Computer Vision) 将于当...

    AI科技大本营
  • 生成项目目录结构

    如果你经常浏览github,readme.md中经常会出现目录结构图,这种图怎么来的?其实很简单,使用tree命令即可。

    河岸飞流
  • 如何高效?

    之前写过的文章:《如何做一个高效的前端》 获得了不少喜欢。本文侧重讲 如何高效 的方法论。

    Joel

扫码关注云+社区

领取腾讯云代金券