jquery tools 系列 scrollable（2）_jquery-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

jquery tools 系列 scrollable（2）_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:47 PM

jquery

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">