WinJS.UI.FlipView object

Artikel
01/26/2017

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

Dela via