jquery tools 系列 scrollable学习


Posted in Javascript onSeptember 06, 2009
<!-- 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" /> 
<h3><em>1. </em>An 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" /> 
<h3><em>2. </em>An 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" /> 
<h3><em>3. </em>An 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" /> 
<h3><em>4. </em>An 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" /> 
<h3><em>5. </em>An 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配置参数描述如下:
属性 默认值  
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   滚动项滚动后触发该该属性设置的函数。
对于scrollable方法及示例请参见jquery tools 之 scrollable(二)
Javascript 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
JavaScript 变量命名规则
Sep 23 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
Vue底层实现原理总结
Feb 17 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
javascript事件问题
Sep 05 #Javascript
js跨域和ajax 跨域问题的实现思路
Sep 05 #Javascript
JavaScript 密码强度判断代码
Sep 05 #Javascript
关于javascript中的parseInt使用技巧
Sep 03 #Javascript
jquery判断单个复选框是否被选中的代码
Sep 03 #Javascript
javascript 触发事件列表 比较不错
Sep 03 #Javascript
javascript concat数组累加 示例
Sep 03 #Javascript
You might like
Look And Say 序列php实现代码
2011/05/22 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
jquery实现手风琴案例
2020/05/04 jQuery
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
解决Mac安装scrapy失败的问题
2018/06/13 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
财务分析个人的自荐书范文
2013/11/24 职场文书
教师绩效工资方案
2014/02/01 职场文书
11月升旗仪式讲话稿
2014/02/15 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
篮球比赛口号
2014/06/10 职场文书
舞蹈专业求职信
2014/06/13 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
研究生简历自我评
2015/03/11 职场文书
通讯稿格式及范文
2015/07/22 职场文书