jqueryTools之Scrollable使用


scrollable()方法中的参数

属性 默认值 说明
clonedClass "cloned" The plugin behaves so that the first and last items are clonedat both ends. These cloned items are assigned the CSS class name given in this configuration variable.
disabledClass "disabled" The CSS class name for disabled next and prev elements. For example, the prev element is disabled when there are no previous items to scroll to. Typically you assign the visibility: 'hidden' CSS definition to disabled elements.
easing "swing" 释放滚动项的速度控制.swing类型意味着有加速度,其次是恒定速度,后跟一个减速;linear类型意味着整个滚动效果速度均衡
items ".items" 包含所有滚动内容的外置容器的class名称
keyboard TRUE 如果为true,键盘方向键可以控制水平或垂直滚动项切换
circular FALSE 是否循环执行滚动
next ".next" 下一个滚动项按钮的class名称,它必须是滚动项父节点的兄弟节点。但是,如果该选择器通过id获取html元素,那么该html元素可以置于页面的任何位置。
prev ".prev" 上一个滚动项按钮的class名称,它必须是滚动项父节点的兄弟节点。但是,如果该选择器通过id获取html元素,那么该html元素可以置于页面的任何位置。
speed 400 自动滚动的速度(毫秒)
vertical FALSE 设置滚动项滚动的方向,false水平滚动,true为垂直滚动;注:对于垂直滚动,不仅需要修改该属性,还需修改相应的css文件。
属性
默认值  
size 5 设置滚动项(图片或按钮等)显示的数量,但是前提条件是必须要正确设置滚动项的父节点(jquery tools官方网站和本文示例中该父节点的class为scrollable)CSS文件中的宽度(width),否则仅仅设置该处基本没效果;此外,如果设置分页的话,此处将会显示每页滚动项的数量,即触发"nextPage"或"prePage"后移动的滚动项数量。
vertical FALSE 设置滚动项滚动的方向,如果为 false 的话,滚动项水平滚动,否则为垂直滚动;注:对于垂直滚动,不仅需要修改该属性,还需修改相应的 css 文件。
clickable TRUE 当滚动项被点击时,是否触发滚动操作(即滚动项是否滚动)。
loop FALSE 当滚动到最后一个滚动项时,是否重新从第一个滚动项开始滚动,此项需和interval(interval不为0)属性共同使用。
interval 0 用于设置滚动项间自动切换的间隔时间(毫秒)。通过将该属性设置为正值,滚动项会在到达间隔时间后自动切换到下一个滚动项。
speed 400 自动滚动的速度(毫秒)
keyboard TRUE 通过将该属性设置为 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 plugin
api FALSE 该属性同该系列中 juqry tools tabs jquery tools tooltip
onBeforeSeek   滚动项滚动前触发该该属性设置的函数。如果该属性设置函数返回 false ,那么触发该函数的滚动项将不会滚动并替代前一个滚动项位置。该函数将会返回一个包含目标元素索引号的数组。
onSeek   滚动项滚动后触发该该属性设置的函数。

autoscroll()方法中的参数

属性 默认值 说明
steps 1 一次滚屏的网页数量
interval 1000 间隔时间,如果使用时只有这个配置,可以直接写:$("#id").scrollable().autoscroll(2000);
autoplay true 是否自动滚动
autopause true 当鼠标移动到上面时,自动暂停滚动
posted @ 2012-05-30 13:41  奎宇工作室  阅读(473)  评论(0编辑  收藏  举报