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 相关文章推荐
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
Highcharts学习之数据列
Aug 03 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
Vue + ts实现轮播插件的示例
Nov 10 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
基于文本的搜索
2006/10/09 PHP
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python 打印对象的所有属性值的方法
2016/09/11 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
python selenium xpath定位操作
2020/09/01 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
大学生工作推荐信范文
2013/12/02 职场文书
公司董事长岗位职责
2014/06/08 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
开展读书活动总结
2014/06/30 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
2015年端午节活动方案
2015/05/05 职场文书
田径运动会广播稿
2015/08/19 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
python 模块重载的五种方法
2021/04/24 Python