Intereactive Web Design - Sugar Land, TX

Overview

MultiSlide is a Mootools class that will group multiple slide effects together and allow you to slide them all in or out at one time. MultiSlide will also allow you to retain individual control over each slide and it contains several callback events for easier integration into your UI.

Current Version: 1.0

Download

Source is hosted at GitHub

Features

• Built on Mootools 1.2 and weighs in at 4kb (uncompressed)
• Opening or closing of multiple slides with one button
• Retains individual control over each separate slide
• Uses customizable CSS classes for hooks, so that no additional markup is needed
• Several callback events for custom UI controls
• Transition speed and type are configurable

Demo

• Basic Example
• Example with a few more options

How To Use It

The basic structure should closely follow the following structure when building multiple slides. You can have as many of the “ms_container’s” as you need and all are controlled by the top two elements. Consider each of the following sections as an HTML element with the class name as shown. Please note that these are just the default class names and can be replaced with your own custom ones to reduce markup.

The standard way to initialize MultiSlide is to call the class and pass in the CSS class name of the element that wraps each slide. In this case it would be:
var multislide = new multislide('ms_container');
You can also call the “expand all” and “collapse all” methods from your javascript by calling:
multilside.expand_all();
multilside.collapse_all();

Please read the documentation below and look at the demos to see how to further customize the MultiSlide class.

Documentation

Syntax

new multislide(container_class [, options]);

Arguments

• container_class – (mixed) A string of the CSS class name that wraps each slide instance
• options – (object, optional) key/value set of options

Options

• slide_duration – (number) duration (in milliseconds) of the slide; defaults to 300
• slide_transition – (string) transition that the slide should use; defaults to ‘sine:in:out’
• class_expand_all – (string) CSS class name that is applied to the element that will expand all the slides; defaults to ‘expand_all’
• class_collapse_all – (string) CSS class name that is applied to the element that will collapse all the slides; defaults to ‘collapse_all’
• class_toggler – (string) CSS class name that is applied to the element that will toggle the individual slide; defaults to ‘ms_toggler’
• class_expander – (string) CSS class name that is applied to the element that will be the slide; defaults to ‘ms_expander’

Methods

• expand_all – Used to expand all the slides at one time
• collapse_all – Used to collapse all the slides at one time

Custom Events

• onExpand – Fired anytime a single slide in the group is exapnded by it’s toggler. Passes the toggler element that was clicked back to the event to be able to make UI changes.
• onCollapse – Fired anytime a single slide in the group is collapsed by it’s toggler. Passes the toggler element that was clicked back to the event to be able to make UI changes.
• onExpand_all – Fired anytime the “exapand all” runs
• onCollapse_all – Fired anytime the “collapse all” runs