Home > Web Front-end > JS Tutorial > jquery tools 系列 scrollable(2)_jquery

jquery tools 系列 scrollable(2)_jquery

WBOY
Release: 2016-05-16 18:47:06
Original
1372 people have browsed it

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

复制代码 代码如下:

var scrollable=$("div.scrollable").scrollable();
    //alert(scrollable.getConf().prev);//获取配置对象中的prev属性
    scrollable.getConf().speed=200;//设置配置对象的speed属性
    //alert(scrollable.getIndex());//获取当前滚动项的索引
    //alert(scrollable.getItems().length);//获取当前滚动项的数量
    //alert(scrollable.getItemWrap().html());//获取包含滚动项的节点(class=scrollable),并将所有滚动项显示出来
    //alert(scrollable.getPageAmount());//获取当前滚动栏分页数
    //alert(scrollable.getPageIndex());//获取当前所在分页
    //alert(scrollable.getRoot().html());//获取滚动项的上一级节点(id=thumbs)
    //alert(scrollable.getSize());
    //alert(scrollable.getVisibleItems().length);//获取当前可见滚动项数量
    scrollable.next();//如果有下一个滚动项,则跳转到下一个滚动项
    scrollable.prev(3000,function(){return true});//跳转到前一滚动项
    //var seekTo= scrollable.click(0).seekTo(2,1000,function(){
        //alert(this.getIndex());
    //});

    //scrollable.move(2);
    //scrollable.prevPage();//跳转到前一页
    //scrollable.nextPage();//跳转到下一页
    //scrollable.setPage(1);//跳转到下一页
    //scrollable.begin();//跳转到第一个滚动项
    //scrollable.end();//跳转到最后一个滚动项
    scrollable.click(3);//使第四个滚动项处于选中状态

    scrollable.onBeforeSeek(function(){
            alert("you click the "+this.getIndex()+"st scrollable item!");
    });

    $("#remove").click(function(){
        scrollable.getItems().filter(":last").remove();//删除最后一个滚动项
        scrollable.reload().prev();//自动更新相关配置信息,并跳转到被删除滚动项的前一项
    });

以下是scrollable对象的方法说明描述:
方法名称
Return value Description
getConf() Object returns the configuration object of scrollable, and the properties of the configuration object can be modified by setting the relevant property values ​​of the object.
getIndex() number Get the index number of the current scroll item, 0 represents the first element, 1 represents the second element, and so on. In addition, it should be noted that if multiple scroll items are obtained, only the index number of the first scroll item will be returned.
getItems() jQuery Returns all scroll items, and the results are returned as jquery objects.
getItemWrap() jQuery Get the parent node of the scroll item, and the result is returned as a jquery object.
getPageAmount() number Get the number of pages of the current scroll bar.
getPageIndex() number Returns the current paging index number. For example, if paging is set to 5 scroll items/page, and the current scroll item position is 7, then 1 (second page) will be returned
getRoot() jQuery Get the upper-level node of the scroll item.
getSize() number Returns the number of scroll items. This method is equivalent to getConf().size
getVisibleItems() jQuery Gets a list of currently visible scroll items. The list is a jquery object. The number of visible scroll items is defined by the size attribute of the configuration object.
   
reload() API scrollable supports the function of dynamically adding and removing scroll items. After dynamically adding or removing scroll items, call this method to automatically update information about paging navigation and scroll item movement.
prev() API Jump to the previous item of this scroll item (if this scroll item is not the first scroll item)
next() API Jump to the next item of this scroll item (if this scroll item is not the last scroll item)
seekTo(index) API Jump to the scroll item at the specified index.
move(offset) API Move the position of the scroll item in the current state (activated) forward/backward by the offset of the current scroll item. If Offset is positive, the scroll item moves to the right/down, otherwise, it moves to the left/up. For example: move(2), the index of the scroll item in the current state is transferred from the i scroll item to the i 2 scroll item.
prevPage() API Jump to the previous page (if it is not the first page).
nextPage() API Jump to the next page (if it is not the last page).
setPage(index) API Jump to page index. For example, index=2, then it will jump from the current page to page 3.
movePage(offset) API is used to switch the position of the displayed page from the current page to this page/the next offset page. Other explanations of this method are similar to (offset).
begin() API Jump to the first scroll item, equivalent to seekTo(0).
end() API Jump to the last scroll item.
click(index) API makes the index scroll item selected (activated).
     
onBeforeSeek(fn) API 参见配置对象的onBeforeSeek相关说明
onSeek(fn) API 参见配置对象的onSeek相关说明
Note: In addition to the parameters carried in the table, the methods below the prev() method in the above method table also contain two implicit parameters: speed and callback. The speed parameter is used to control the duration of the animation effect of the scroll item, and callback is its callback method. For specific implementation, please refer to the usage example of scrollable's prev() method.

Finally, the complete sample code of this scrollable series is given:
Copy the code The code is as follows:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



















    


        
            


                

                

1. An example title



                


                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
                    tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
                



                60 sec

            


            


                

                

2. An example title



                


                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
                    tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
                



                80 sec

            


            


                

                

3. An example title



                


                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
                    tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
                



                100 sec

            


            


                

                

4. An example title



                


                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
                    tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
                



                120 sec

            


            


                

                

5. An example title



                


                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
                    tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
                



                140 sec

            


    











    





Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template