zoukankan      html  css  js  c++  java

  • 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.      646px;      
    13.     height:300px;     
    14. }  
    15.   
    16. #thumbs {     
    17.     position:absolute;  
    18.     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.     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.      646px;      
    61.     height:300px;     
    62. }  
    63.   
    64. #thumbs {     
    65.     position:absolute;  
    66.     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.     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>  
  • 相关阅读:
    XML 增、删、改和查示例
    DataGrid 完全攻略之三（实现删除全选或者全不选）
    DataGrid 完全攻略之七（实现选择、编辑和修改）
    ASP.NET 2.0，无刷新页面新境界
    DataGrid 完全攻略之二（把数据导出到Excel）
    ASP.NET 2.0角色及成员管理
    动态改变页面的CSS样式
    ASP.NET 2.0新控件、管理外观、布局及其它用户体验
    页面一postback，它就显示页面的最顶端，怎样让它定位在某一位置？
    20100120 ~ 20100220 小结与本月计划
  • 原文地址：https://www.cnblogs.com/piuba/p/2615651.html
Copyright © 2011-2022 走看看