How to use

your base html is a container div with a series of inner divs that will each act as separate "pages" or "tabs"

<div id="container_a">
    <div>
        <p>this is the first page</p>
    </div>
    <div>
        <p>this is the second page</p>
    </div>
    <div>
        <p>this is the third page</p>
    </div>
</div>

and optionally a menu to activate those "pages" #HTML

• page1
• page2
• page3

some really basic css to get the typical results

.rubik_container, .rubik_page{width: 640px; height: 400px;}
.rubik_container{overflow: hidden;}
.rubik_page{float: left; height: 400px; width: 640px;}

The javascript is simply invoking the class with the specified element and needed options. A simple usage example

var myRubik = new Rubik('container_a',{
autoMenu:'topnav',
current: 0});

More elaborate usage example

var myRubik = new Rubik('container_b',{
autoMenu:'servicesnav',
nextBtn: 'btn_more',
current: 0,
mode: 'vertical',
menuMap:[0,1,2,2,3,4,4,5,6,7,8,9,10,11,12,13]
});

See the Properties & Methods section for more details

Options And Methods

OPTIONS:

mode: 'horizontal' or 'vertical'. Defaults to horizontal. Specifies animation axis. autoMenu: pass a ul/li tree for automatically assigning sequential menu elements. menuMap: specify an unusual order for the autoMenu assignment. [2,1,0] would assign 3 elements in reverse order. nextBtn: element to assign "next slide" action transition: fx transition. defaults to sine.easeInOut duration: time it takes to transition between pages current: index of the slide to start on by default scrollAct: will the mousewheel activate slide transition? defaults true. constVelo: defaults true. if false, the time between slide transistions is dictated by distance.

there's also a complete set of options for setting container classes automatically

EVENTS: scrollstart triggered at the time of slide transition scrollstop triggered when slide transition is complete

METHODS: jumpTo( index ) trigger a transition to the specified slide. skipTrans( index ) jump to the specified slide without transition next() transition to next slide, will jump to the first if at the end slide. addmenu(menuid, [map]) adds an additional automenu, with mapping if specified.

A Note About Menu Mapping

The menu mapping feature is designed to build an out-of-sequence automenu. the automenu is ordinarily assigned sequentially with the first link in the ul pointing at the first "page" in the rubik and so on. Passing the menu map option allows you to set them to an unorthodox order. each element in the array is a "page number" (starting at 0) and the array elements are assigned sequentially to the autoMenu ul/li. You can skip an li by assigning -1 to that slot in the map. The same page can be assigned many times to different li's, and not all of the pages must be specified.

Release History

• rev 1.3 - December 2009 -- changed in this version
• consolidated Fx for memory saving and performance.
• fixed bug in event chaining.
• rev 1.2 - August 2009
• start and stop events added
• added public menu()
• conditional "zoom" to fix IE "first click" issue.
• rev 1.1 - June 2009
• menu element no longer passed in constructor.
• autoMenu property now should be the menu ul/li to which events are assigned.
• rev 1.0 - March 2009

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.