当前位置：Gxlcms > JavaScript > jquery tools 系列 scrollable学习

jquery tools 系列 scrollable学习

时间：2021-07-01 10:21:17 帮助过：12人阅读

代码如下:
<!-- 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方法中即可）：
代码如下:

  1. <br>$("div.scrollable").scrollable({ <br>        size: 3, <br>        vertical:false, <br>        //clickable:false, <br>        loop:true,//设置是否自动跳转（根据间隔时间） <br>        //interval: 1000,//设置间歇时间间隔 <br>        //speed:2000, <br>        items: '#thumbs', <br>        //prev:'.prev',//跳转到上一项 <br>        //next:'.next'//跳转到下一项 <br>        prevPage:'.prev',//跳转到上一页 <br>        nextPage:'.next',//跳转到下一页 <br>        hoverClass: 'hover', <br>        easing:'linear' <br>    });     <br> <br>下面对scrollable配置参数描述如下：<br><p></p>
  2. <table style="WIDTH: 817px; BORDER-COLLAPSE: collapse" cellspacing="0" cellpadding="0" border="0">
  3. <colgroup>
  4. <col style="WIDTH: 86pt; mso-width-source: userset; mso-width-alt: 3648" span="2" width="114">
  5. <col style="WIDTH: 442pt; mso-width-source: userset; mso-width-alt: 18848" width="589"></colgroup>
  6. <tbody>
  7. <tr style="HEIGHT: 14.25pt" height="19">
  8. <td class="xl28" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext 0.5pt solid; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 14.25pt; BACKGROUND-COLOR: silver" width="114" height="19">
  9. <span style="FONT-SIZE: small; FONT-FAMILY: 宋体">属性</span></td>
  10. <td class="xl29" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext 0.5pt solid; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: silver" width="114"><span style="FONT-SIZE: small; FONT-FAMILY: 宋体">默认值</span></td>
  11. <td class="xl24" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext 0.5pt solid; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: silver" width="589"><span style="FONT-SIZE: small; FONT-FAMILY: Lucida Sans Unicode">　</span></td></tr>
  12. <tr style="HEIGHT: 85.5pt; mso-height-source: userset" height="114">
  13. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 85.5pt; BACKGROUND-COLOR: white" width="114" height="114"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">size</span></td>
  14. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">5</span></td>
  15. <td class="xl27" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small; FONT-FAMILY: Lucida Sans Unicode">设置滚动项（图片或按钮等）显示的数量，但是前提条件是必须要正确设置滚动项的父节点（jquery tools官方网站和本文示例中该父节点的class为scrollable）CSS文件中的宽度（width），否则仅仅设置该处基本没效果；此外，如果设置分页的话，此处将会显示每页滚动项的数量，即触发“nextPage”或“prePage”后移动的滚动项数量。</span></td></tr>
  16. <tr style="HEIGHT: 47.25pt" height="63">
  17. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 47.25pt; BACKGROUND-COLOR: white" width="114" height="63"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">vertical</span></td>
  18. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">FALSE</span></td>
  19. <td class="xl30" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small"><span style="FONT-FAMILY: 宋体">设置滚动项滚动的方向，如果为</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">false</span><span class="font0" style="FONT-FAMILY: 宋体">的话，滚动项水平滚动，否则为垂直滚动；注：对于垂直滚动，不仅需要修改该属性，还需修改相应的</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">css</span><span class="font0" style="FONT-FAMILY: 宋体">文件。</span></span></td></tr>
  20. <tr style="HEIGHT: 28.5pt" height="38">
  21. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 28.5pt; BACKGROUND-COLOR: white" width="114" height="38"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">clickable</span></td>
  22. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">TRUE</span></td>
  23. <td class="xl30" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small; FONT-FAMILY: 宋体">当滚动项被点击时，是否触发滚动操作（即滚动项是否滚动）。</span></td></tr>
  24. <tr style="HEIGHT: 42.75pt" height="57">
  25. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 42.75pt; BACKGROUND-COLOR: white" width="114" height="57"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">loop</span></td>
  26. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">FALSE</span></td>
  27. <td class="xl30" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small; FONT-FAMILY: 宋体">当滚动到最后一个滚动项时，是否重新从第一个滚动项开始滚动，此项需和interval（interval不为0）属性共同使用。</span></td></tr>
  28. <tr style="HEIGHT: 42.75pt" height="57">
  29. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 42.75pt; BACKGROUND-COLOR: white" width="114" height="57"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">interval</span></td>
  30. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">0</span></td>
  31. <td class="xl30" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small; FONT-FAMILY: 宋体">用于设置滚动项间自动切换的间隔时间（毫秒）。通过将该属性设置为正值，滚动项会在到达间隔时间后自动切换到下一个滚动项。</span></td></tr>
  32. <tr style="HEIGHT: 21.75pt; mso-height-source: userset" height="29">
  33. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 21.75pt; BACKGROUND-COLOR: white" width="114" height="29"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">speed</span></td>
  34. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">400</span></td>
  35. <td class="xl30" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small; FONT-FAMILY: 宋体">自动滚动的速度（毫秒）</span></td></tr>
  36. <tr style="HEIGHT: 63.75pt" height="85">
  37. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 63.75pt; BACKGROUND-COLOR: white" width="114" height="85"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">keyboard</span></td>
  38. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">TRUE</span></td>
  39. <td class="xl30" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small"><span style="FONT-FAMILY: 宋体">通过将该属性设置为</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">true/false</span><span class="font0" style="FONT-FAMILY: 宋体">，来激活</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">/</span><span class="font0" style="FONT-FAMILY: 宋体">屏蔽键盘方向键对滚动项的切换操作。如果该属性设置为</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">true</span><span class="font0" style="FONT-FAMILY: 宋体">，那么通过左</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">/</span><span class="font0" style="FONT-FAMILY: 宋体">右方向键来切换水平滚动的滚动项；通过上</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">/</span><span class="font0" style="FONT-FAMILY: 宋体">下方向键来切换垂直滚动的滚动项。</span></span></td></tr>
  40. <tr style="HEIGHT: 42.75pt" height="57">
  41. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 42.75pt; BACKGROUND-COLOR: white" width="114" height="57"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">items</span></td>
  42. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">".items"</span></td>
  43. <td class="xl30" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small; FONT-FAMILY: 宋体">包含滚动项的HTML元素——通过jquery选择器获取；该（或这些）html元素必须置于滚动项的父节点（HTML元素）内</span></td></tr>
  44. <tr style="HEIGHT: 57pt" height="76">
  45. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 57pt; BACKGROUND-COLOR: white" width="114" height="76"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">prev</span></td>
  46. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">".prev"</span></td>
  47. <td class="xl30" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small; FONT-FAMILY: 宋体">包含向前移动滚动项（即向前按钮）的HTML元素——通过jquery选择器获取；该html元素必须为滚动项父节点的兄弟节点。但是，如果该选择器通过id获取html元素，那么该html元素可以置于页面的任何位置。</span></td></tr>
  48. <tr style="HEIGHT: 57pt" height="76">
  49. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 57pt; BACKGROUND-COLOR: white" width="114" height="76"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">next</span></td>
  50. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">".next"</span></td>
  51. <td class="xl30" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small; FONT-FAMILY: 宋体">包含向后移动滚动项（即向后按钮）的HTML元素——通过jquery选择器获取；该html元素必须为滚动项父节点的兄弟节点。但是，如果该选择器通过id获取html元素，那么该html元素可以置于页面的任何位置。</span></td></tr>
  52. <tr style="HEIGHT: 57pt" height="76">
  53. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 57pt; BACKGROUND-COLOR: white" width="114" height="76"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">prevPage</span></td>
  54. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">".prevPage"</span></td>
  55. <td class="xl30" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small; FONT-FAMILY: 宋体">包含跳转到上一页的HTML元素——通过jquery选择器获取；该html元素必须为滚动项父节点的兄弟节点。但是，如果该选择器通过id获取html元素，那么该html元素可以置于页面的任何位置。</span></td></tr>
  56. <tr style="HEIGHT: 57pt" height="76">
  57. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 57pt; BACKGROUND-COLOR: white" width="114" height="76"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">nextPage</span></td>
  58. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">".nextPage"</span></td>
  59. <td class="xl30" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small; FONT-FAMILY: 宋体">包含跳转到下一页的HTML元素——通过jquery选择器获取；该html元素必须为滚动项父节点的兄弟节点。但是，如果该选择器通过id获取html元素，那么该html元素可以置于页面的任何位置。</span></td></tr>
  60. <tr style="HEIGHT: 63.75pt" height="85">
  61. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 63.75pt; BACKGROUND-COLOR: white" width="114" height="85"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">navi</span></td>
  62. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">".navi"</span></td>
  63. <td class="xl30" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small"><span style="FONT-FAMILY: 宋体">包含分页导航器的</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">HTML</span><span class="font5" style="FONT-FAMILY: 宋体">元素</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">——</span><span class="font5" style="FONT-FAMILY: 宋体">通过</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">jquery</span><span class="font5" style="FONT-FAMILY: 宋体">选择器获取；该</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">html</span><span class="font5" style="FONT-FAMILY: 宋体">元素必须为滚动项父节点的兄弟节点。但是，如果该选择器通过</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">id</span><span class="font5" style="FONT-FAMILY: 宋体">获取</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">html</span><span class="font5" style="FONT-FAMILY: 宋体">元素，那么该</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">html</span><span class="font5" style="FONT-FAMILY: 宋体">元素可以置于页面的任何位置。</span></span></td></tr>
  64. <tr style="HEIGHT: 33pt" height="44">
  65. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 33pt; BACKGROUND-COLOR: white" width="114" height="44"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">naviItem</span></td>
  66. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">"a"</span></td>
  67. <td class="xl30" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small"><span style="FONT-FAMILY: 宋体">包含于分页导航器内的</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">HTML</span><span class="font0" style="FONT-FAMILY: 宋体">元素（分页导航项）——通过</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">jquery</span><span class="font0" style="FONT-FAMILY: 宋体">选择器获取；这些元素用于分页导航。</span></span></td></tr>
  68. <tr style="HEIGHT: 33pt" height="44">
  69. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 33pt; BACKGROUND-COLOR: white" width="114" height="44"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">activeClass</span></td>
  70. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">"active"</span></td>
  71. <td class="xl30" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small"><span style="FONT-FAMILY: 宋体">以下两种情况下对应项的</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">CSS</span><span class="font0" style="FONT-FAMILY: 宋体">类名称：</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">a.</span><span class="font0" style="FONT-FAMILY: 宋体">被点击的滚动项；</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">b.</span><span class="font0" style="FONT-FAMILY: 宋体">当前页对应的分页导航项</span></span></td></tr>
  72. <tr style="HEIGHT: 66pt" height="88">
  73. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 66pt; BACKGROUND-COLOR: white" width="114" height="88"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">disabledClass</span></td>
  74. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">"disabled"</span></td>
  75. <td class="xl30" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small"><span style="FONT-FAMILY: 宋体">用于将</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">next/nextPage</span><span class="font0" style="FONT-FAMILY: 宋体">（下一项</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">/</span><span class="font0" style="FONT-FAMILY: 宋体">下一页）和</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">prev/prevPage</span><span class="font0" style="FONT-FAMILY: 宋体">（前一项</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">/</span><span class="font0" style="FONT-FAMILY: 宋体">前一页）渲染为不可用的</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">CSS</span><span class="font0" style="FONT-FAMILY: 宋体">类名称。例如：当前滚动项前面没有滚动项时，</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">prev</span><span class="font0" style="FONT-FAMILY: 宋体">元素会被置为不可用（</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">disabled</span><span class="font0" style="FONT-FAMILY: 宋体">）状态。</span></span></td></tr>
  76. <tr style="HEIGHT: 33pt" height="44">
  77. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 33pt; BACKGROUND-COLOR: white" width="114" height="44"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">hoverClass</span></td>
  78. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">　</span></td>
  79. <td class="xl30" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small"><span style="FONT-FAMILY: 宋体">当鼠标移动到某滚动项上方时，该滚动项的</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">CSS</span><span class="font0" style="FONT-FAMILY: 宋体">类名称即被指为该</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">class</span><span class="font0" style="FONT-FAMILY: 宋体">。</span></span></td></tr>
  80. <tr style="HEIGHT: 57pt" height="76">
  81. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 57pt; BACKGROUND-COLOR: white" width="114" height="76"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">easing</span></td>
  82. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">"swing"</span></td>
  83. <td class="xl30" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small; FONT-FAMILY: 宋体">用于设置滚动项切换时的动画效果，目前jquery tools提供了“swing”和“linear”两种动画效果，更多的动画效果参考jquery easing plugin</span></td></tr>
  84. <tr style="HEIGHT: 33pt" height="44">
  85. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 33pt; BACKGROUND-COLOR: white" width="114" height="44"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">api</span></td>
  86. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">FALSE</span></td>
  87. <td class="xl30" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small"><span style="FONT-FAMILY: 宋体">该属性同该系列中</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">juqry tools </span><span class="font0" style="FONT-FAMILY: 宋体">之</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">tabs </span><span class="font0" style="FONT-FAMILY: 宋体">和</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode"> jquery tools </span><span class="font0" style="FONT-FAMILY: 宋体">之</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode"> tooltip</span></span></td></tr>
  88. <tr style="HEIGHT: 59.25pt" height="79">
  89. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 59.25pt; BACKGROUND-COLOR: white" width="114" height="79"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">onBeforeSeek</span></td>
  90. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">　</span></td>
  91. <td class="xl30" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small"><span style="FONT-FAMILY: 宋体">滚动项滚动前触发该该属性设置的函数。如果该属性设置函数返回</span><span class="font6" style="FONT-FAMILY: Lucida Sans Unicode">false</span><span class="font0" style="FONT-FAMILY: 宋体">，那么触发该函数的滚动项将不会滚动并替代前一个滚动项位置。该函数将会返回一个包含目标元素索引号的数组。</span></span></td></tr>
  92. <tr style="HEIGHT: 20.25pt; mso-height-source: userset" height="27">
  93. <td class="xl25" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; HEIGHT: 20.25pt; BACKGROUND-COLOR: white" width="114" height="27"><span style="COLOR: #0000ff; FONT-FAMILY: Lucida Console">onSeek</span></td>
  94. <td class="xl26" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 86pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="114"><span style="FONT-FAMILY: Lucida Console">　</span></td>
  95. <td class="xl30" style="BORDER-RIGHT: windowtext 0.5pt solid; BORDER-TOP: windowtext; BORDER-LEFT: windowtext; WIDTH: 442pt; BORDER-BOTTOM: windowtext 0.5pt solid; BACKGROUND-COLOR: white" width="589"><span style="FONT-SIZE: small; FONT-FAMILY: 宋体">滚动项滚动后触发该该属性设置的函数。</span></td></tr></tbody></table>对于scrollable方法及示例请参见jquery tools 之 scrollable（二）
  96.             
  97.

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！