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 相关文章推荐
原型方法的不同写法居然会影响调试的解决方法
Mar 08 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
调试PHP程序的多种方法介绍
2014/11/06 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
详解vue路由
2020/08/05 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
python中的多线程实例教程
2014/08/27 Python
Python OS模块常用函数说明
2015/05/23 Python
python实现感知器算法详解
2017/12/19 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
Python 处理文件的几种方式
2019/08/23 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
python实现猜拳游戏项目
2020/11/30 Python
美德好少年事迹材料
2014/01/19 职场文书
大学生军训感想
2014/02/16 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
道路施工安全责任书
2014/07/24 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python