有两个scrollable,但是当按a(#NewInitiatives)的翻页不会影响b(#UpcomingEvents)，按b会影响到a.
$("#NewsInitiatives").scrollable();
$("#NewsInitiatives a.next").click(function () {
$(this).data("scrollable").next();
});
$("#NewsInitiatives a.prev").click(function () {
$(this).data("scrollable").prev();
});
$("#UpcomingEvents").scrollable();
$("#UpcomingEvents a.next").click(function () {
$(this).data("scrollable1").next();
});
$("#UpcomingEvents a.prev").click(function () {
$(this).data("scrollable1").prev();
})
关于这个data，要先从api说起。
Every tool has a well defined Application Programming Interface (API) that you can work with. This is one of the greatest strengths of this library. You can call tool methods and access their properties. The internal state is hidden and private variables are not accessible by the outer world which is what you would expect from good programming practice. You can get access to the API by using jQuery'sdatamethod.
The argument to thedatamethod is the tool's name. Once you have the API available, you can start calling its methods.
然后还必须了解api里面到底默认了些什么属性：
Here is a list of all available configuration options:
| Property | Default value | Description |
|---|---|---|
| clonedClass | 'cloned' |
The plugin behaves so that the first and last items are cloned at both ends. These cloned items are assigned the CSS class name given in this configuration variable. |
| disabledClass | "disabled" |
The CSS class name for disablednext andprevelements. For example, theprevelement is disabled when there are no previous items to scroll to. Typically you assign thevisibility: 'hidden'CSS definition to disabled elements. |
| easing | "swing" |
The type of "easing" applied to the scrolling animation. 'swing' means that there is an acceleration, followed by a constant speed, followed by a deceleration. 'linear' means that the whole animation happens at a constant speed. You can also make your own easing effects. |
| items | ".items" |
The scrollable root element is not directly used as a parent for the scrollable items. The root must have one nested element that contains the actual items. By default scrollable uses the first and only elementinside the root as a wrapper for the items. It does not have to have any particular CSS class name. A simpledivis fine. If for some reason you have multiple elements inside the root element, then scrollable looks for the element specified by this property. By default an element with the class name "items" is used, but you can use any jQuery selector you like for this property. See the minimal setup for an understanding of the HTML setup for scrollable. |
| keyboard | true |
Whether or not keyboard arrow key navigation is enabled. The horizontal scroller moves backwards/forwards with the left/right arrow keys; the vertical scroller moves with the up/down keys. The arrow keys are valid for the scrollable that was used most recently. Since version 1.1.0 you can also supply the value'static'here which means that the scrollable is always controlled with the arrow keys and it does not have to be active. You can also use thefocus()method to force the focus to a certain scrollable on the page. You can take a look at the A complete scrollable navigational systemdemo which takes advantage of the "static" value and thefocus()method. If you want to disable the keyboard for a particular scrollable, you can do the following: // grab second scrollabe and its API var instance = $(".horizontal").eq(1).data("scrollable"); // disable keyboard navigation instance.getConf().keyboard = false;
|
| circular | false |
A property indicating whether scrolling starts from the beginning when the last item is exceeded making an "infinite loop". |
| next | ".next" |
Selector for the elements to which a "scroll forwards" action should be bound. These elements should have a mutual wrapper element together with the scrollable itself. |
| prev | ".prev" |
Selector for the elements to which a "scroll backwards" action should be bound. These elements should have a mutual wrapper element together with the scrollable itself. |
| speed | 400 |
The time (in milliseconds) of the scrolling animation. |
| vertical | false |
The scrollable is good at guessing whether it's vertical or horizontal by investigating it's dimensions. If the height is larger than the width then the scrollable is vertical. This can also be manually configured with this configuration option which overrides the automatic determination. |
http://jquerytools.github.com/documentation/scrollable/index.html#multiple
原来官方文档里面确实也提到了next，prev容易混淆的问题，说是要在最外层wrap 一个div，我在opera 里面试还是不行换到firefox里面竟然就好了。。。这个是什么问题，难道是要我赶紧更新opera ？
接下来用jquery tools继续完善我的menu bar...总觉得active后有点变扭