Windows Dev Center

WinJS.UI.FlipView object

[This documentation is preliminary and is subject to change.]

Applies to: Metro style apps only

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.FlipView(element, options);

Members

The FlipView object has these types of members:

Events

The FlipView object has these events.

EventDescription
datasourcecountchanged Event

Occurs when the datasource count changes.

pageselected Event

Raised when the FlipView flips to a page.

pagevisibilitychanged Event

Occurs when an item becomes invisible or visible.

 

Methods

The FlipView object has these methods.

MethodDescription
addEventListener Method

Registers an event handler for the specified event.

count Method

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

FlipView Constructor

Creates a new FlipView.

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

Unregisters an event handler for the specified event.

setCustomAnimations Method

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

 

Properties

The FlipView object has these properties.

PropertyDescription

currentPage Property

Gets or sets the index of the currently displayed page.

itemDataSource

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

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

itemTemplate

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

orientation Property

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

 

Remarks

Styling the ListView

CSS classes

To customize the FlipView, you can define your own styles for these CSS classes (defined by the Windows Library for JavaScript style sheets):

CSS classDescription

win-container

Styles the container for an item in the FlipView.

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-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 Windows Library for JavaScript 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. For a FlipView to render, you must specify its height with an absolute value. 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;    
}

Examples

For a FlipView to display, you must provide an absolute value for its height. This example creates a FlipView with an ID of "basicFlipView".


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

<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : 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.


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

For the complete example, see Quickstart: Adding a FlipView.

Requirements

Minimum supported client

Windows 8 Consumer Preview

Minimum supported server

Windows Server 8 Beta

Namespace

WinJS.UI

Library

Ui.js

 

 

Build date: 2/10/2012

Ajouts de la communauté

AJOUTER
Afficher:
© 2015 Microsoft