jquery tools 系列(三)——scrollable（1）

接着上次juery tools之tooltip的学习，今天继续jquery tools六大功能之第三功能——scrollable的学习。一如既往，首先给出操作的html代码（此html代码修改自jquery tools官方网站demo代码）:

  1. <!-- navigator -->  
  2. <div class="navi"></div>  
  3.   
  4. <!-- prev link -->  
  5. <a class="prev"></a>  
  6.   
  7. <!-- root element for scrollable -->  
  8. <div class="scrollable">  
  9.       
  10.     <div id="thumbs">  
  11.       
  12.           
  13.             <div>  
  14.               
  15.                 <img src="http://static.flowplayer.org/img/demos/thumbs/thumb5.jpg" mce_src="http://static.flowplayer.org/img/demos/thumbs/thumb5.jpg" />  
  16.                   
  17.                 <h3><em>1. </em>An example title</h3>  
  18.                   
  19.                 <p>  
  20.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget   
  21.                     tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.  
  22.                 </p>  
  23.                   
  24.                 <span class="blue">60 sec</span>  
  25.                   
  26.             </div>  
  27.           
  28.             <div>  
  29.               
  30.                 <img src="http://static.flowplayer.org/img/demos/thumbs/thumb6.jpg" mce_src="http://static.flowplayer.org/img/demos/thumbs/thumb6.jpg" />  
  31.                   
  32.                 <h3><em>2. </em>An example title</h3>  
  33.                   
  34.                 <p>  
  35.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget   
  36.                     tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.  
  37.                 </p>  
  38.                   
  39.                 <span class="blue">80 sec</span>  
  40.                   
  41.             </div>  
  42.           
  43.             <div>  
  44.               
  45.                 <img src="http://static.flowplayer.org/img/demos/thumbs/thumb7.jpg" mce_src="http://static.flowplayer.org/img/demos/thumbs/thumb7.jpg" />  
  46.                   
  47.                 <h3><em>3. </em>An example title</h3>  
  48.                   
  49.                 <p>  
  50.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget   
  51.                     tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.  
  52.                 </p>  
  53.                   
  54.                 <span class="blue">100 sec</span>  
  55.                   
  56.             </div>  
  57.           
  58.             <div>  
  59.               
  60.                 <img src="http://static.flowplayer.org/img/demos/thumbs/thumb8.jpg" mce_src="http://static.flowplayer.org/img/demos/thumbs/thumb8.jpg" />  
  61.                   
  62.                 <h3><em>4. </em>An example title</h3>  
  63.                   
  64.                 <p>  
  65.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget   
  66.                     tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.  
  67.                 </p>  
  68.                   
  69.                 <span class="blue">120 sec</span>  
  70.                   
  71.             </div>  
  72.           
  73.             <div>  
  74.               
  75.                 <img src="http://static.flowplayer.org/img/demos/thumbs/thumb9.jpg" mce_src="http://static.flowplayer.org/img/demos/thumbs/thumb9.jpg" />  
  76.                   
  77.                 <h3><em>5. </em>An example title</h3>  
  78.                   
  79.                 <p>  
  80.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget   
  81.                     tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.  
  82.                 </p>  
  83.                   
  84.                 <span class="blue">140 sec</span>  
  85.                   
  86.             </div>  
  87.           
  88.     </div>  
  89.       
  90. </div>  
  91.   
  92. <!-- next link -->  
  93. <a class="next"></a>  
  94.   
  95. <!-- let rest of the page float normally -->  
  96. <br clear="all" />  

       该功能是通过jqueryObject.scrollable()方法来实现的，其中scrollable方法提供以下两种方式：

       1. $("div.scrollable").scrollable//该方法为采用默认方法显示滚动栏

       2. $("div.scrollable").scrollable({config object}) //该方法通过配置对象来定制滚动栏显示内容及方式。

以下代码为第二种方式的配置参数实现（只需将该实现放于jquery的ready方法中即可）：

[javascript] view plaincopy
  1. $("div.scrollable").scrollable({  
  2.         size: 3,  
  3.         vertical:false,  
  4.         //clickable:false,  
  5.         loop:true,//设置是否自动跳转（根据间隔时间）  
  6.         //interval: 1000,//设置间歇时间间隔   
  7.         //speed:2000,  
  8.         items: '#thumbs',    
  9.         //prev:'.prev',//跳转到上一项  
  10.         //next:'.next'//跳转到下一项  
  11.         prevPage:'.prev',//跳转到上一页  
  12.         nextPage:'.next',//跳转到下一页  
  13.         hoverClass: 'hover',  
  14.         easing:'linear'  
  15.     });   

 下面对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（二）

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/piuba/p/2615647.html