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

接上一节jquery tools 之 scrollable（一），本文详细介绍scrollable中方法使用及本文完整示例。

scrollable提供的一系列获取scrollable对象的方法具体使用方式如下：

[javascript] view plaincopy
  1. var scrollable=$("div.scrollable").scrollable();   
  2.     //alert(scrollable.getConf().prev);//获取配置对象中的prev属性  
  3.     scrollable.getConf().speed=200;//设置配置对象的speed属性  
  4.     //alert(scrollable.getIndex());//获取当前滚动项的索引  
  5.     //alert(scrollable.getItems().length);//获取当前滚动项的数量  
  6.     //alert(scrollable.getItemWrap().html());//获取包含滚动项的节点(class=scrollable)，并将所有滚动项显示出来  
  7.     //alert(scrollable.getPageAmount());//获取当前滚动栏分页数  
  8.     //alert(scrollable.getPageIndex());//获取当前所在分页  
  9.     //alert(scrollable.getRoot().html());//获取滚动项的上一级节点（id=thumbs）  
  10.     //alert(scrollable.getSize());  
  11.     //alert(scrollable.getVisibleItems().length);//获取当前可见滚动项数量  
  12.     scrollable.next();//如果有下一个滚动项，则跳转到下一个滚动项  
  13.     scrollable.prev(3000,function(){return true});//跳转到前一滚动项  
  14.     //var seekTo= scrollable.click(0).seekTo(2,1000,function(){  
  15.         //alert(this.getIndex());  
  16.     //});  
  17.       
  18.     //scrollable.move(2);  
  19.     //scrollable.prevPage();//跳转到前一页  
  20.     //scrollable.nextPage();//跳转到下一页  
  21.     //scrollable.setPage(1);//跳转到下一页  
  22.     //scrollable.begin();//跳转到第一个滚动项  
  23.     //scrollable.end();//跳转到最后一个滚动项  
  24.     scrollable.click(3);//使第四个滚动项处于选中状态  
  25.       
  26.     scrollable.onBeforeSeek(function(){  
  27.             alert("you click the "+this.getIndex()+"st scrollable item!");  
  28.     });  
  29.       
  30.     $("#remove").click(function(){  
  31.         scrollable.getItems().filter(":last").remove();//删除最后一个滚动项  
  32.         scrollable.reload().prev();//自动更新相关配置信息，并跳转到被删除滚动项的前一项  
  33.     });  

以下是scrollable对象的方法说明描述：

 

方法名称
 返回值 说明
getConf() Object 返回scrollable的配置对象，并且可通过设置该对象的相关属性值来修改该配置对象的属性。
getIndex() number 获取当前滚动项的索引号，0代表第一个元素，1代表第二个元素，以此类推。此外，需注意的是，如果获取到多个滚动项，那么将会只返回第一个滚动项的索引号。
getItems() jQuery 返回所有的滚动项，结果以jquery对象的方式返回。
getItemWrap() jQuery 获取滚动项的父节点，结果以jquery对象的方式返回。
getPageAmount() number 获取当前滚动栏的分页数。
getPageIndex() number 返回当前分页索引号。比如说，如果分页设置为5个滚动项/页，并且当前滚动项位置为7的话，那么将会返回1（第二页）
getRoot() jQuery 获取滚动项的上一级节点。
getSize() number 返回滚动项的数量。该方法等同于getConf().size
getVisibleItems() jQuery 获取一个由当前可见滚动项组成列表，该列表为一个jquery对象，可见滚动项的数量由配置对象的size属性定义。
　 　 　
reload() API scrollable支持动态添加和删除滚动项的功能。在动态添加或删除滚动项以后，调用此方法来自动更新分页导航以及滚动项移动的相关信息。
prev() API 跳转到该滚动项的前一项（如果该滚动项不是第一个滚动项）
next() API 跳转到该滚动项的下一项（如果该滚动项不是最后一个滚动项）
seekTo(index) API 跳转到指定索引处的滚动项。
move(offset) API 将处于当前状态（激活）的滚动项位置由当前滚动项向前/后移动offset。Offset为正，则滚动项向右/下移动，否则，向左/上移动。比如:move(2),则处于当前状态的滚动项的索引由i滚动项转移至i+2滚动项。
prevPage() API 跳转到前一页（如果该页不是第一页）。
nextPage() API 跳转到后一页（如果该页不是最后一页）。
setPage(index) API 跳转到第index页。比如，index=2,那么会从当前页跳转到第3页。
movePage(offset) API 用于将显示页的位置由当前页切换到该页/后offset页，该方法其他解释类似于(offset)。
begin() API 跳转到第一个滚动项，相当于seekTo(0)。
end() API 跳转到最后一个滚动项。
click(index) API 使第index个滚动项处于选中（激活）状态。
　 　 　
onBeforeSeek(fn) API 参见配置对象的onBeforeSeek相关说明
onSeek(fn) API 参见配置对象的onSeek相关说明

注意：上面方法表中prev()方法以下的方法除了表中携带的参数外，还包含两个隐含参数：speed和callback。其中speed参数是用 于控制滚动项的动画效果持续时间的，而callback为其回调方法。具体实现可参见scrollable的prev()方法使用示例。

最后，给出本scrollable系列的完整示例代码：

[xhtml] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3.   
  4. <mce:script src="http://cdn.jquerytools.org/1.0.2/jquery.tools.min.js" mce_src="http://cdn.jquerytools.org/1.0.2/jquery.tools.min.js"></mce:script>  
  5. <mce:script src="http://static.flowplayer.org/js/jquery.mousewheel.js" mce_src="http://static.flowplayer.org/js/jquery.mousewheel.js"></mce:script>  
  6. <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-navig.css" mce_href="http://static.flowplayer.org/tools/css/scrollable-navig.css" />  
  7.   
  8. <mce:style><!--  
  9. div.scrollable {    
  10.     position:relative;  
  11.     overflow:hidden;  
  12.     width: 646px;      
  13.     height:300px;     
  14. }  
  15.   
  16. #thumbs {     
  17.     position:absolute;  
  18.     width:20000em;    
  19.     clear:both;  
  20.     border:1px solid #222;  
  21. }  
  22.   
  23. a.prev, a.next {  
  24.     margin-top:118px;     
  25. }  
  26.   
  27. #thumbs div {  
  28.     float:left;  
  29.     width:214px;  
  30.     height:300px;  
  31.     background:#333 url(http://static.flowplayer.org/img/global/gradient/h150.png) repeat-x 0 146px;  
  32.     color:#fff;  
  33.     border-left:1px solid #333;  
  34.     cursor:pointer;  
  35. }  
  36.   
  37. #thumbs div.hover {  
  38.     background-color:#444;    
  39. }  
  40.   
  41. #thumbs div.active {  
  42.     background-color:#066;  
  43.     cursor:default;  
  44. }  
  45.   
  46. #thumbs h3, #thumbs p, #thumbs span {  
  47.     margin:13px;          
  48.     font-family:"bitstream vera sans";  
  49.     font-size:13px;  
  50.     color:#fff;   
  51. }  
  52.   
  53. #thumbs h3 em {  
  54.     font-style:normal;  
  55.     color:yellow;  
  56. }  
  57. --></mce:style><style mce_bogus="1">div.scrollable {    
  58.     position:relative;  
  59.     overflow:hidden;  
  60.     width: 646px;      
  61.     height:300px;     
  62. }  
  63.   
  64. #thumbs {     
  65.     position:absolute;  
  66.     width:20000em;    
  67.     clear:both;  
  68.     border:1px solid #222;  
  69. }  
  70.   
  71. a.prev, a.next {  
  72.     margin-top:118px;     
  73. }  
  74.   
  75. #thumbs div {  
  76.     float:left;  
  77.     width:214px;  
  78.     height:300px;  
  79.     background:#333 url(http://static.flowplayer.org/img/global/gradient/h150.png) repeat-x 0 146px;  
  80.     color:#fff;  
  81.     border-left:1px solid #333;  
  82.     cursor:pointer;  
  83. }  
  84.   
  85. #thumbs div.hover {  
  86.     background-color:#444;    
  87. }  
  88.   
  89. #thumbs div.active {  
  90.     background-color:#066;  
  91.     cursor:default;  
  92. }  
  93.   
  94. #thumbs h3, #thumbs p, #thumbs span {  
  95.     margin:13px;          
  96.     font-family:"bitstream vera sans";  
  97.     font-size:13px;  
  98.     color:#fff;   
  99. }  
  100.   
  101. #thumbs h3 em {  
  102.     font-style:normal;  
  103.     color:yellow;  
  104. }</style>  
  105.   
  106.   
  107.   
  108.   
  109. <!-- navigator -->  
  110. <div class="navi"></div>  
  111.   
  112. <!-- prev link -->  
  113. <a class="prev"></a>  
  114.   
  115. <!-- root element for scrollable -->  
  116. <div class="scrollable">  
  117.       
  118.     <div id="thumbs">  
  119.       
  120.           
  121.             <div>  
  122.               
  123.                 <img src="http://static.flowplayer.org/img/demos/thumbs/thumb5.jpg" mce_src="http://static.flowplayer.org/img/demos/thumbs/thumb5.jpg" />  
  124.                   
  125.                 <h3><em>1. </em>An example title</h3>  
  126.                   
  127.                 <p>  
  128.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget   
  129.                     tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.  
  130.                 </p>  
  131.                   
  132.                 <span class="blue">60 sec</span>  
  133.                   
  134.             </div>  
  135.           
  136.             <div>  
  137.               
  138.                 <img src="http://static.flowplayer.org/img/demos/thumbs/thumb6.jpg" mce_src="http://static.flowplayer.org/img/demos/thumbs/thumb6.jpg" />  
  139.                   
  140.                 <h3><em>2. </em>An example title</h3>  
  141.                   
  142.                 <p>  
  143.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget   
  144.                     tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.  
  145.                 </p>  
  146.                   
  147.                 <span class="blue">80 sec</span>  
  148.                   
  149.             </div>  
  150.           
  151.             <div>  
  152.               
  153.                 <img src="http://static.flowplayer.org/img/demos/thumbs/thumb7.jpg" mce_src="http://static.flowplayer.org/img/demos/thumbs/thumb7.jpg" />  
  154.                   
  155.                 <h3><em>3. </em>An example title</h3>  
  156.                   
  157.                 <p>  
  158.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget   
  159.                     tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.  
  160.                 </p>  
  161.                   
  162.                 <span class="blue">100 sec</span>  
  163.                   
  164.             </div>  
  165.           
  166.             <div>  
  167.               
  168.                 <img src="http://static.flowplayer.org/img/demos/thumbs/thumb8.jpg" mce_src="http://static.flowplayer.org/img/demos/thumbs/thumb8.jpg" />  
  169.                   
  170.                 <h3><em>4. </em>An example title</h3>  
  171.                   
  172.                 <p>  
  173.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget   
  174.                     tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.  
  175.                 </p>  
  176.                   
  177.                 <span class="blue">120 sec</span>  
  178.                   
  179.             </div>  
  180.           
  181.             <div>  
  182.               
  183.                 <img src="http://static.flowplayer.org/img/demos/thumbs/thumb9.jpg" mce_src="http://static.flowplayer.org/img/demos/thumbs/thumb9.jpg" />  
  184.                   
  185.                 <h3><em>5. </em>An example title</h3>  
  186.                   
  187.                 <p>  
  188.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget   
  189.                     tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.  
  190.                 </p>  
  191.                   
  192.                 <span class="blue">140 sec</span>  
  193.                   
  194.             </div>  
  195.           
  196.     </div>  
  197.       
  198. </div>  
  199.   
  200. <!-- next link -->  
  201. <a class="next"></a>  
  202.   
  203. <!-- let rest of the page float normally -->  
  204. <br clear="all" />  
  205. <div>  
  206.     <input type="button" value="remove" id="remove"/>  
  207. </div>  
  208. <mce:script type="text/javascript"><!--  
  209. $(function() {        
  210.       
  211.     $("div.scrollable").scrollable({  
  212.         size: 3,  
  213.         vertical:false,  
  214.         //clickable:false,  
  215.         loop:true,//设置是否自动跳转（根据间隔时间）  
  216.         //interval: 1000,//设置间歇时间间隔   
  217.         //speed:2000,  
  218.         items: '#thumbs',    
  219.         //prev:'.prev',//跳转到上一项  
  220.         //next:'.next'//跳转到下一项  
  221.         prevPage:'.prev',//跳转到上一页  
  222.         nextPage:'.next',//跳转到下一页  
  223.         hoverClass: 'hover',  
  224.         easing:'linear'  
  225.     });   
  226.       
  227.     var scrollable=$("div.scrollable").scrollable();   
  228.     //alert(scrollable.getConf().prev);//获取配置对象中的prev属性  
  229.     scrollable.getConf().speed=200;//设置配置对象的speed属性  
  230.     //alert(scrollable.getIndex());//获取当前滚动项的索引  
  231.     //alert(scrollable.getItems().length);//获取当前滚动项的数量  
  232.     //alert(scrollable.getItemWrap().html());//获取包含滚动项的节点(class=scrollable)，并将所有滚动项显示出来  
  233.     //alert(scrollable.getPageAmount());//获取当前滚动栏分页数  
  234.     //alert(scrollable.getPageIndex());//获取当前所在分页  
  235.     //alert(scrollable.getRoot().html());//获取滚动项的上一级节点（id=thumbs）  
  236.     //alert(scrollable.getSize());  
  237.     //alert(scrollable.getVisibleItems().length);//获取当前可见滚动项数量  
  238.     scrollable.next();//如果有下一个滚动项，则跳转到下一个滚动项  
  239.     scrollable.prev(3000,function(){return true});//跳转到前一滚动项  
  240.     //var seekTo= scrollable.click(0).seekTo(2,1000,function(){  
  241.         //alert(this.getIndex());  
  242.     //});  
  243.       
  244.     //scrollable.move(2);  
  245.     //scrollable.prevPage();//跳转到前一页  
  246.     //scrollable.nextPage();//跳转到下一页  
  247.     //scrollable.setPage(1);//跳转到下一页  
  248.     //scrollable.begin();//跳转到第一个滚动项  
  249.     //scrollable.end();//跳转到最后一个滚动项  
  250.     scrollable.click(3);//使第四个滚动项处于选中状态  
  251.       
  252.     scrollable.onBeforeSeek(function(){  
  253.             alert("you click the "+this.getIndex()+"st scrollable item!");  
  254.     });  
  255.       
  256.     $("#remove").click(function(){  
  257.         scrollable.getItems().filter(":last").remove();//删除最后一个滚动项  
  258.         scrollable.reload().prev();//自动更新相关配置信息，并跳转到被删除滚动项的前一项  
  259.     });  
  260.       
  261. });  
  262. // --></mce:script>  

 

posted @ 2012-07-30 17:37  piuba  阅读(330)  评论(0)  编辑  收藏  举报