jquery tools 系列 scrollable学习

【 tulaoshi.com - Web开发 】

代码如下:
!-- navigator --
div class="navi"/div
!-- prev link --
a class="prev"/a
!-- root element for scrollable --
div class="scrollable"
div id="thumbs"
div
img src="http://static.flowplayer.org/img/demos/thumbs/thumb5.jpg" src="http://static.flowplayer.org/img/demos/thumbs/thumb5.jpg" /
h3em1. /emAn example title/h3
p
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
/p
span class="blue"60 sec/span
/div
div
img src="http://static.flowplayer.org/img/demos/thumbs/thumb6.jpg" src="http://static.flowplayer.org/img/demos/thumbs/thumb6.jpg" /
h3em2. /emAn example title/h3
p
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
/p
span class="blue"80 sec/span
/div
div
img src="http://static.flowplayer.org/img/demos/thumbs/thumb7.jpg" src="http://static.flowplayer.org/img/demos/thumbs/thumb7.jpg" /
h3em3. /emAn example title/h3
p
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
/p
span class="blue"100 sec/span
/div
div
img src="http://static.flowplayer.org/img/demos/thumbs/thumb8.jpg" src="http://static.flowplayer.org/img/demos/thumbs/thumb8.jpg" /
h3em4. /emAn example title/h3
p
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
/p
span class="blue"120 sec/span
/div
div
img src="http://static.flowplayer.org/img/demos/thumbs/thumb9.jpg" src="http://static.flowplayer.org/img/demos/thumbs/thumb9.jpg" /
h3em5. /emAn example title/h3
p
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
/p
span class="blue"140 sec/span
/div
/div
/div
!-- next link --
a class="next"/a
!-- let rest of the page float normally --
br clear="all" /


该功能是通过jqueryObject.scrollable()方法来实现的，其中scrollable方法提供以下两种方式：
1. $("div.scrollable").scrollable//该方法为采用默认方法显示滚动栏
2. $("div.scrollable").scrollable({config object}) //该方法通过配置对象来定制滚动栏显示内容及方式。
以下代码为第二种方式的配置参数实现（只需将该实现放于jquery的ready方法中即可）：
代码如下:
$("div.scrollable").scrollable({
size: 3,
vertical:false,
//clickable:false,
loop:true,//设置是否自动跳转（根据间隔时间）
//interval: 1000,//设置间歇时间间隔
//speed:2000,
items: '#thumbs',
//prev:'.prev',//跳转到上一项
//next:'.next'//跳转到下一项
prevPage:'.prev',//跳转到上一页
nextPage:'.next',//跳转到下一页
hoverClass: 'hover',
easing:'linear'
});

下面对scrollable配置参数描述如下：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）属性默认值　size5设置滚动项（图片或按钮等）显示的数量，但是前提条件是必须要正确设置滚动项的父节点（jquery tools官方网站和本文示例中该父节点的class为scrollable）CSS文件中的宽度（width），否则仅仅设置该处基本没效果；此外，如果设置分页的话，此处将会显示每页滚动项的数量，即触发“nextPage”或“prePage”后移动的滚动项数量。verticalFALSE设置滚动项滚动的方向，如果为false的话，滚动项水平滚动，否则为垂直滚动；注：对于垂直滚动，不仅需要修改该属性，还需修改相应的css文件。clickableTRUE当滚动项被点击时，是否触发滚动操作（即滚动项是否滚动）。loopFALSE当滚动到最后一个滚动项时，是否重新从第一个滚动项开始滚动，此项需和interval（interval不为0）属性共同使用。interval0用于设置滚动项间自动切换的间隔时间（毫秒）。通过将该属性设置为正值，滚动项会在到达间隔时间后自动切换到下一个滚动项。speed400自动滚动的速度（毫秒）keyboardTRUE通过将该属性设置为true/false，来激活/屏蔽键盘方向键对滚动项的切换操作。如果该属性设置为true，那么通过左/右方向键来切换水平滚动的滚动项；通过上/下方向键来切换垂直滚动的滚动项。items".items"包含滚动项的HTML元素——通过jquery选择器获取；该（或这些）html元素必须置于滚动项的父节点（HTML元素）内prev".prev"包含向前移动滚动项（即向前按钮）的HTML元素——通过jquery选择器获取；该html元素必须为滚动项父节点的兄弟节点。但是，如果该选择器通过id获取html元素，那么该html元素可以置于页面的任何位置。next".next"包含向后移动滚动项（即向后按钮）的HTML元素——通过jquery选择器获取；该html元素必须为滚动项父节点的兄弟节点。但是，如果该选择器通过id获取html元素，那么该html元素可以置于页面的任何位置。prevPage".prevPage"包含跳转到上一页的HTML元素——通过jquery选择器获取；该html元素必须为滚动项父节点的兄弟节点。但是，如果该选择器通过id获取html元素，那么该html元素可以置于页面的任何位置。nextPage".nextPage"包含跳转到下一页的HTML元素——通过jquery选择器获取；该html元素必须为滚动项父节点的兄弟节点。但是，如果该选择器通过id获取html元素，那么该html元素可以置于页面的任何位置。navi".navi"包含分页导航器的HTML元素——通过jquery选择器获取；该html元素必须为滚动项父节点的兄弟节点。但是，如果该选择器通过id获取html元素，那么该html元素可以置于页面的任何位置。naviItem"a"包含于分页导航器内的HTML元素（分页导航项）——通过jquery选择器获取；这些元素用于分页导航。activeClass"active"以下两种情况下对应项的CSS类名称：a.被点击的滚动项；b.当前页对应的分页导航项disabledClass"disabled"用于将next/nextPage（下一项/下一页）和prev/prevPage（前一项/前一页）渲染为不可用的CSS类名称。例如：当前滚动项前面没有滚动项时，prev元素会被置为不可用（disabled）状态。hoverClass　当鼠标移动到某滚动项上方时，该滚动项的CSS类名称即被指为该class。easing"swing"用于设置滚动项切换时的动画效果，目前jquery tools提供了“swing”和“linear”两种动画效果，更多的动画效果参考jquery easing pluginapiFALSE该属性同该系列中juqry tools 之tabs 和 jquery tools 之 tooltiponBeforeSeek　滚动项滚动前触发该该属性设置的函数。如果该属性设置函数返回false，那么触发该函数的滚动项将不会滚动并替代前一个滚动项位置。该函数将会返回一个包含目标元素索引号的数组。onSeek　滚动项滚动后触发该该属性设置的函数。对于scrollable方法及示例请参见jquery tools 之 scrollable（二）