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 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 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
谈谈PHP语法(5)
2006/10/09 PHP
一个PHP日历程序
2006/12/06 PHP
PHP产生随机字符串函数
2006/12/06 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
浅析javascript的return语句
2015/12/15 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
Python实现的石头剪子布代码分享
2014/08/22 Python
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
Python PIL图片添加字体的例子
2019/08/22 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
Python bisect模块原理及常见实例
2020/06/17 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
法警的竞聘演讲稿
2014/01/02 职场文书
活动宣传策划方案
2014/05/23 职场文书
学校献爱心活动总结
2014/07/08 职场文书
庆祝儿童节标语
2014/10/09 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
python 离散点图画法的实现
2022/04/01 Python