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