jquery tools 系列 scrollable学习

wkwkjdd

wkwkjdd

2016-02-19 15:08

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的jquery tools 系列 scrollable学习,手机电脑控们准备好了吗?一起看过来吧!

代码如下:
!-- 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://m.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(二)
展开更多 50%)
分享

猜你喜欢

jquery tools 系列 scrollable学习

Web开发
jquery tools 系列 scrollable学习

jquery tools 系列 scrollable(2)

Web开发
jquery tools 系列 scrollable(2)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jquery tools系列 expose 学习

Web开发
jquery tools系列 expose 学习

jquery tools系列 overlay 学习查看

Web开发
jquery tools系列 overlay 学习查看

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jquery tools之tooltip

Web开发
jquery tools之tooltip

JQuery 初体验(建议学习jquery)

Web开发
JQuery 初体验(建议学习jquery)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

C#中ref和out的使用小结

C#中ref和out的使用小结

反正切值函数ATAN的使用

反正切值函数ATAN的使用
下拉加载更多内容 ↓