Class wink.ui.layout.SlidingPanels

Implement a sliding container Create a sliding panels container container with which you can navigate through pages with an Iphone like UX To instantiate a sliding panels container, the pages (dom nodes) MUST already be present in the page and each one MUST be defined by a unique id. Use the 'getDomNode' method to add the sliding panels container into the page.

Defined in: slidingpanels.js

Class Summary
Constructor Attributes	Constructor Name and Description
	wink.ui.layout.SlidingPanels(properties)

Compatibility
Compatibility list	Supported platforms / browsers
	iOS2, iOS3, iOS4, iOS5, iOS6, Android 1.5, Android 2.1, Android 2.2, Android 2.3, Android 3.0, Android 3.1, Android 4.0, BlackBerry 6, BlackBerry 7, Bada 1.0, Windows Phone 8

Field Summary
Field Attributes	Field Name and Description
	duration The slide duration in milliseconds.
	pages The list of pages ids of the slidingpanels
	transitionType The type of the transition between pages
	uId Unique identifier

Method Summary

Method Attributes	Method Name and Description
	add(id) Add a page
	getDomNode()
	remove(id, options) Remove a page
	slideBack() Come back to the previous page
	slideTo(id) Move to the selected page

Event Summary
Event Attributes	Event Name and Description
	/slidingpanels/events/slideend slide just ended
	/slidingpanels/events/slidestart slide just started

Class Detail

wink.ui.layout.SlidingPanels(properties)

var properties = 
{
  'duration': 500,
  'transitionType': 'default',
  'pages': ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7', 'page8']
}

slidingPanels = new wink.ui.layout.SlidingPanels(properties);
document.body.appendChild(slidingPanels.getDomNode());

Parameters:
{object} properties: The properties object
{integer} properties.duration Optional, Default: 800: The slide duration in milliseconds
{string} properties.transitionType Optional, Default: "default": The type of the transition between pages ('default', 'cover' or 'reveal'). If you use the 'cover' or 'reveal' option, all your pages should have the same height
{array} properties.pages: An array containing the ids of the pages to add into the sliding panels container. The pages dom nodes MUST be present in the page at instantiation time

See:: Test page; Test page (cover); Test page (reveal); Test page (with history); Test page (dynamic)

Field Detail

{integer} duration

The slide duration in milliseconds. The default value is 800

{array} pages

The list of pages ids of the slidingpanels

{string} transitionType

The type of the transition between pages

{integer} uId

Unique identifier

Method Detail

add(id)

Add a page

Parameters:

{string} id

The id of the page to add
{HTMLElement} getDomNode()

Returns:

{HTMLElement} The DOM node containing the slidingpanels
remove(id, options)

Remove a page

Parameters:

{string} id

The id of the page to remove

{object} options

options

{boolean} options.fromdom

allow to remove the node from the DOM
slideBack()

Come back to the previous page
slideTo(id)

Move to the selected page

Parameters:

{string} id

The id of the page to display

Event Detail

/slidingpanels/events/slideend

slide just ended

Parameters:
{object} param: The parameters object
{string} param.id: the current first page

/slidingpanels/events/slidestart

slide just started

Parameters:
{object} param: The parameters object
{string} param.id: the current first page

documentation

Search

Classes