Navigator plugin

The Navigator plugin will allow your users to more easily navigate between different pages in the scrollable. This plugin is convenient if you have lots of items in a scrollable list. Here is the navigator plugin in action:

standalone demo

HTML setup

Here is the HTML setup for the example above:

<!-- wrapper for navigator elements -->
<div class="navi"></div>

HTML

This navigator element will be auto-populated with the type of HTML elements specified by your configuration's naviItem property, as follows:

  <div class="navi">
    <a href="#0" class="active"></a>
    <a href="#1" ></a>
    <a href="#2" ></a>
  </div>

HTML

The number of nested naviItem elements depends on the number of scrollable items you have. It's up to you how you visualize those elements using CSS. The navigator knows which page you are currently viewing, and will assign the class name specified in the activeClass configuration property to the active navigation element.

JavaScript setup

Here is the JavaScript setup for the example above.

// initialize scrollable together with the navigator plugin
$("#navigator").scrollable().navigator();

JavaScript

Manual setup

You can also use an existing HTML structure as a navigator. Here is an example:

  <!-- manual navigator configuration -->
  <ul class="tabs">
    <li><a href="#first">First item</a></li>
    <li><a href="#second">Second item</a></li>
    <li><a href="#third">Third item</a></li>
  </ul>

HTML

This can be setup as a navigator by doing the following:

  $("jquery selector").scrollable().navigator({
 
  // ul.tabs now functions as our navigator
  navi:'ul.tabs'
  });

JavaScript

The items inside navigator can be anything such as li, a, span or p elements. By default the plugin uses the direct children as navigator items but you can supply the naviItem configuration that will select the specified child elements to be used as navigator items.

If you are using a tags inside the wrapper and you supply href attributes for them you have the added benefit of automatically seeking to the correct item when you enter the page with a matching "hash" of the URL. For example if you go to the URL mypage.html#second for the above setup, the scrollable will automatically seek to the second item. You can see an example of this here. Note that the third tab is automatically opened.

Configuration

Here is a full list of available configuration options:

property	default	description
activeClass	`"active"`	The CSS class name for the navigator item which corresponds to the current page.
idPrefix		Since 1.1.2.. By supplying a value here the navigator generates an `id` attribute for each item so that they can be uniquely styled with CSS. For example, the value "foo" generates the IDs: "foo0", "foo1", "foo2" and so on.
indexed	`false`	If this is enabled then the auto-populated navigator elements will have an index number.
history	`false`	Since 1.2.0. Enables support for the browser's "back button" so that when the user clicks on the back or forward buttons the scrollable seeks backwards and forward accordingly. Requires that the History tool is included on your page.
navi	`".navi"`	Selector for the element that contains a navigator for switching between pages. You can have any number of navigator elements on your page and they will all do the same thing. If you want to instantiate multiple scrollables with a navigator instance then you should read this.
naviItem		The HTML element name for navigational items which are auto-populated inside the navigator. If none is supplied the `a` tag will be used. In manual setup this property is used to select the elements inside the root element that will be used as navigator items. The `activeClass` CSS class name is assigned to these items. If this property is not supplied the direct children of the root element are used as navigator items.

JavaScript API

The navigator plugin overrides the getNaviButtons methods of the scrollable API so that it will also contain the navigator element.