WinJS.UI.FlipView object

Displays a collection, such as a set of photos, one item at a time.

Syntax

<div data-win-control="WinJS.UI.FlipView"></div>
var object = new WinJS.UI.FlipView(element, options);

Members

The FlipView object has these types of members:

  • Constructors
  • Events
  • Methods
  • Properties

Constructors

The FlipView object has these constructors.

Constructor Description
FlipView Constructor

Creates a new FlipView.

 

Events

The FlipView object has these events.

Event Description
ondatasourcecountchanged Event

Raised when the number of items in the itemDataSource property changes.

onpagecompleted

Raised when the FlipView flips to a page and its renderer function completes.

onpageselected Event

Raised when the FlipView flips to a page.

onpagevisibilitychanged Event

Raised when FlipView page becomes invisible or visible.

 

Methods

The FlipView object has these methods.

Method Description
addEventListener Method

Registers an event handler for the specified event.

count Method

Returns the number of items in the FlipView control's itemDataSource.

dispatchEvent

Raises an event of the specified type and with additional properties.

dispose

Releases resources held by this FlipView. Call this method when the FlipView is no longer needed. After calling this method, the FlipView becomes unusable.

forceLayout

Forces the FlipView to update its layout. Use this function when making the FlipView visible again after its style.display property had been set to "none".

next Method

Navigates to the next page.

previous Method

Navigates to the previous item.

removeEventListener Method

Removes an event handler for the specified event that the addEventListener method registered.

setCustomAnimations Method

Sets custom animations for the FlipView to use when navigating between pages.

 

Properties

The FlipView object has these properties.

Property Access type Description

currentPage Property

Read/write

Gets or sets the index of the currently displayed page.

element

Read-only

Gets the HTML element that hosts this FlipView.

itemDataSource

Read/write

Gets or sets the data source that provides the FlipView with items to display. The FlipView displays one item at a time, on its own page.

itemSpacing Property

Read/write

Gets or sets the spacing between each item, in pixels.

itemTemplate

Read/write

Gets or sets a Template or function that defines the HTML for each item's page.

orientation Property

Read/write

Gets or sets the orientation of the FlipView, horizontal or vertical.

 

Remarks

To activate a FlipView that you created in HTML, you must call the WinJS.UI.processAll function (you have to do this for all Windows Library for JavaScript controls). For more info, see Quickstart: Adding WinJS controls.

Styling the ListView

CSS classes

To customize the FlipView, you can define your own styles for these Cascading Style Sheets (CSS) classes (defined by the WinJS style sheets):

CSS class Description

win-flipview

Styles the entire FlipView.

win-item

Styles items in the FlipView.

win-navbottom

Styles the bottom navigation button. Note that changing the font-family will cause the button to no longer contain the correct glyph.

win-navbutton

Styles all the navigation buttons. Note that changing the font-family will cause the button to no longer contain the correct glyph.

win-navleft

Styles the left navigation button. Note that changing the font-family will cause the button to no longer contain the correct glyph.

win-navright

Styles the right navigation button. Note that changing the font-family will cause the button to no longer contain the correct glyph.

win-navtop

Styles the top navigation button. Note that changing the font-family will cause the button to no longer contain the correct glyph.

 

Note that some of these classes (such as win-item) are used by multiple WinJS controls. To apply a style to just the FlipView, add .win-flipview to the style selector.

Setting the FlipView control's height

The FlipView does not dynamically adjust its height to fit your content. For a FlipView to render, you must specify an absolute value for its height. To set the height and width of a FlipView with the ID basicFlipView, add this CSS to the CSS style sheet for the HTML page that contains the FlipView:

#basicFlipView
{
    width: 480px;
    height: 270px;
    border: solid 1px black;    
}

Playing video in a FlipView

When displaying video in a FlipView, don't set it to automatically play, because it might start playing when it's not in view. Register for the onpagevisibilitychanged event and use it to pause a video when its page is not visible.

Examples

For a FlipView to display, you must provide an absolute value for its height. This example creates a FlipView with an ID of "simple_FlipView" and a Template for displaying its items.

<div id="simple_ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="overlaidItemTemplate">
        <img class="image" src="#" data-win-bind="src: picture; alt: title" />
        <div class="overlay">
            <h2 class="ItemTitle" data-win-bind="innerText: title"></h2>
        </div>
    </div>
</div>

<div id="simple_FlipView"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource: DefaultData.bindingList.dataSource, itemTemplate: select('#simple_ItemTemplate') }">
</div>

The next example creates a CSS style for the FlipView that sets its height and width. Include this CSS in the CSS style sheet for your HTML page.

#simple_FlipView {
    width: 480px;
    height: 270px;
    border: solid 1px black;
    background-image: url("/images/texture.png");
}

The final example defines the data used by the FlipView in a separate JavaScript file, named defaultData.js.

(function () {
    "use strict";

    var array = [
        { type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
        { type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
        { type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
        { type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
        { type: "item", title: "Valley", picture: "images/Valley.jpg" }
    ];
    var bindingList = new WinJS.Binding.List(array);

    WinJS.Namespace.define("DefaultData", {
        bindingList: bindingList,
        array: array
    });

    var e = DefaultData.bindingList.dataSource;
})();

Notice that the example makes the data publicly available by exposing it in a namespace. Otherwise, the FlipView wouldn't be able to access the data.

WinJS.Namespace.define("DefaultData", {
    bindingList: bindingList,
    array: array
});

For step-by-step instructions, see Quickstart: Adding a FlipView.

Requirements

Minimum WinJS version

WinJS 1.0

Namespace

WinJS.UI

See also

Quickstart: Adding a FlipView

HTML FlipView control sample (Windows)