jquery Tools Series Scrollable learning _jquery

Copy Code code as follows:

<!--navigator-->
<div class= "Navi" ></div>
<!--prev Link-->
<a class= "prev" ></a>
<!--root element for scrollable-->
<div class= "scrollable" >
&LT;DIV id= "Thumbs" >
<div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing. Proin et felis eget
Tellus Pharetra porttitor. Praesent dui Arcu, Egestas quis, adipiscing a.
</p>
<span class= "Blue" >60 sec</span>
</div>
<div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing. Proin et felis eget
Tellus Pharetra porttitor. Praesent dui Arcu, Egestas quis, adipiscing a.
</p>
<span class= "Blue" >80 sec</span>
</div>
<div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing. Proin et felis eget
Tellus Pharetra porttitor. Praesent dui Arcu, Egestas quis, adipiscing a.
</p>
<span class= "Blue" >100 sec</span>
</div>
<div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing. Proin et felis eget
Tellus Pharetra porttitor. Praesent dui Arcu, Egestas quis, adipiscing a.
</p>
<span class= "Blue" >120 sec</span>
</div>
<div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing. 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-->
&LT;BR clear= "All"/>

This feature is implemented through the Jqueryobject.scrollable () method, where the scrollable method provides the following two ways:
1. $ ("div.scrollable"). scrollable//This method shows the scroll bar in the default way
2. $ ("div.scrollable"). Scrollable ({Config object})//The method customizes the scroll bar display content and method by configuring the object.
The following code is implemented for the configuration parameter of the second way (simply place the implementation in the Ready method of jquery):

Copy Code code as follows:

$ ("div.scrollable"). Scrollable ({
Size:3,
Vertical:false,
Clickable:false,
loop:true,//set whether to jump automatically (based on time interval)
interval:1000,//Set Intermittent interval
speed:2000,
Items: ' #thumbs ',
Prev: '. Prev ',//jump to previous item
Next: '. Next '//jump to next item
PrevPage: '. Prev ',//Jump to previous page
NextPage: '. Next ',//jump to the next page
Hoverclass: ' Hover ',
Easing: ' Linear '
});

The following scrollable configuration parameters are described below:

disabledclass

Property	Default value
Size	5	Sets the number of scrolling items (pictures or buttons) to display, but only if the width (width) of the parent node of the scrolling item must be set correctly (the jquery Tools official site and the parent node's class scrollable) CSS file in this example. Otherwise, simply setting the place has no effect; In addition, if you set up pagination, the number of scroll items per page is displayed here, that is, the number of scroll items that are moved after "NextPage" or "prepage" are triggered.
Vertical	FALSE	Sets the direction in which the scroll item scrolls, or, if false , scrolls horizontally, otherwise it is scrolled vertically; note: For vertical scrolling, you need to modify the attribute as well as the corresponding CSS file.
Clickable	TRUE	Whether a scrolling action is triggered (that is, whether the scroll item scrolls) when the scroll item is clicked.
Loop	FALSE	When scrolling to the last scroll item, whether to start scrolling again from the first scroll item, which needs to be used in conjunction with the interval (interval 0) attribute.
Interval	0	The time interval (in milliseconds) that is used to set the automatic toggle between scroll items. By setting this property to a positive value, the scroll item automatically switches to the next scroll item after the interval is reached.
Speed	400	The speed of automatic scrolling (milliseconds)
Keyboard	TRUE	You can activate / shield keyboard arrow keys to toggle scrolling items by setting this property to True/false. If this property is set to true, toggle scroll items that scroll horizontally through the left /right ARROW keys, and Toggle Scroll items that are scrolled vertically by the UP/down ARROW keys.
Items	". Items"	The HTML element that contains the scrolling item-obtained through the jquery selector, which must be placed within the parent node (HTML element) of the scrolling item
Prev	". Prev"	The HTML element that contains the forward moving scroll item (that is, the forward button) is obtained through the jquery selector, which must be the sibling of the scrolling item parent. However, if the selector obtains HTML elements by ID, the HTML element can be placed anywhere on the page.
Next	". Next"	An HTML element that contains the backward movement of the scroll item (that is, the back button), which is obtained through the jquery selector, which must be the sibling of the scrolling item parent node. However, if the selector obtains HTML elements by ID, the HTML element can be placed anywhere on the page.
PrevPage	". PrevPage"	Contains HTML elements that jump to the previous page--obtained through the jquery selector; The HTML element must be a sibling of the scrolling item parent node. However, if the selector obtains HTML elements by ID, the HTML element can be placed anywhere on the page.
NextPage	". NextPage"	Contains HTML elements that jump to the next page--obtained through the jquery selector; The HTML element must be a sibling of the scrolling item parent node. However, if the selector obtains HTML elements by ID, the HTML element can be placed anywhere on the page.
Navi	". Navi"	The HTML element that contains the pager is obtained through the jquery selector, which must be the sibling of the scrolling item parent. However, if the selector obtains HTML elements by ID , the HTML element can be placed anywhere on the page.
Naviitem	A	HTML elements (pager items) that are included in the pager are obtained through the jquery selector, which is used for paging navigation.
Activeclass	"Active"	The CSS class name for the corresponding item in the following two cases :A. clicked scrolling item;b. Paging navigation items for the current page
disabled	for next/nextpage / Next) and prev/prevpage/css class name. For example, when there is no scroll item before the current scroll item, the prevdisabled
Hoverclass		When the mouse moves over a scroll item, the CSS class name of the scroll item is referred to as the class.
Easing	"Swing"	Used to set the animation effect when scrolling items are switched, the jquery tools currently offer both "swing" and "linear" animation effects, and more animations refer to jquery easing plugin
Api	FALSE	This property is the same as the tabs of Juqry tools and the tooltip of jquery tools in this series
Onbeforeseek		The function that triggers the setting of the property before the scroll item scrolls. If the property set function returns False, the scroll item that triggers the function will not scroll and replace the previous scroll item position. The function returns an array containing the index number of the target element.
Onseek		A function that triggers the setting of the property when the scroll item scrolls.

For scrollable methods and examples, see the jquery Tools scrollable (ii)