Windows Dev Center

WinJS.UI.SemanticZoom object

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

Applies to: Metro style apps only

Enables the user to zoom between two different views supplied by two child controls. One child control supplies the zoomed-out view and the other provides the zoomed-in view.

Syntax


<div data-win-control="WinJS.UI.SemanticZoom">
     <!-- The control that provides the zoomed-in view goes here. -->
     <!-- The control that provides the zoomed-out view goes here. -->
</div>


var object = new WinJS.UI.SemanticZoom(element, options);

Members

The SemanticZoom object has these types of members:

Methods

The SemanticZoom object has these methods.

MethodDescription
addEventListener Method

Registers an event handler for the specified event.

forceLayout

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

removeEventListener Method

Unregisters an event handler for the specified event.

SemanticZoom

Creates a new SemanticZoom.

 

Properties

The SemanticZoom object has these properties.

PropertyDescription

element

Gets the DOM element that hosts the SemanticZoom control.

locked Property

Gets or sets a value that indicates whether SemanticZoom is locked and zooming between views is disabled.

zoomedOut Property

Gets or sets a value that indicates whether the control is zoomed out.

zoomFactor

Gets or sets a value that specifies the scale of the zoomed out view.

 

Remarks

SemanticZoom is used to present two levels of detail for the data or content based on a zoom factor: a zoomed in (detailed) view typically used for presenting individual items and a zoomed out (structured) view for presenting item groups based on metadata.

The SemanticZoom object does not expose any UI controls itself. It is a block level container for the two child controls that implement the IZoomableView interface and provide the UI for the semantic views.

Styling the SemanticZoom

CSS classes

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

CSS classDescription

win-semanticzoom

Styles the entire SemanticZoom.

win-semanticzoomactive

Styles the active view.

 

Setting the height of the SemanticZoom

The SemanticZoom does not dynamically adjust its height to fit your content. For a SemanticZoom to render, you must specify an absolute value for its height. The Windows Library for JavaScript style sheets set the SemanticZoom control's height to 400 pixels.

Examples

This example creates a SemanticZoom control that uses two ListView controls to provide its zoomed-in and zoomed-out views.


<div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom">   
            
    <!-- The zoomed-in view. -->    
    <div id="zoomedInListView"
        data-win-control="WinJS.UI.ListView" 
        data-win-options="{ itemDataSource: myData.groupedItemsList.dataSource, itemTemplate: mediumListIconTextTemplate, groupHeaderTemplate: headerTemplate, groupDataSource: myData.groupedItemsList.groups.dataSource, selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none' }"
    ></div>

    <!--- The zoomed-out view. -->
    <div id="zoomedOutListView"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource: myData.groupedItemsList.groups.dataSource, itemTemplate: semanticZoomTemplate, selectionMode: 'none', tapBehavior: 'invoke', swipeBehavior: 'none' }"
    ></div>

</div>

The next example creates the data used by the ListView objects in a separate file named data.js. Add a reference to this file in to your HTML page that creates the ListView.



// data.js
(function () {
    "use strict";


    
    var myData = [
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Orangy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Orangy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Absolutely Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Absolutely Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Triple Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Triple Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Green Mint", text: "Gelato", picture: "images/60Mint.png" }
    ];

    // Create a WinJS.Binding.List from the array. 
    var itemsList = new WinJS.Binding.List(myData);

    // Sorts the groups.
    function compareGroups(left, right) {
        return left.charCodeAt(0) - right.charCodeAt(0);
    }

    // Returns the group key that an item belongs to.
    function getGroupKey(dataItem) {
        return dataItem.title.toUpperCase().charAt(0);
    }

    // Returns the title for a group.
    function getGroupData(dataItem) {
        return {
            title: dataItem.title.toUpperCase().charAt(0)
        };
    }

    // Create the groups for the ListView from the item data and the grouping functions
    var groupedItemsList = itemsList.createGrouped(getGroupKey, getGroupData, compareGroups);



    WinJS.Namespace.define("myData",
        {
            groupedItemsList: groupedItemsList
        }); 


})(); 

The last example defines CSS styles for the SemanticZoom and ListView controls.


/* Template for headers in the zoomed-in ListView */
.simpleHeaderItem
{
    width: 50px;
    height: 50px;
    padding: 8px;
}   

/* Template for items in the zoomed-in ListView */  
.mediumListIconTextItem
{
    width: 282px;
    height: 70px;
    padding: 5px;
    overflow: hidden;
    display: -ms-box;
}

    .mediumListIconTextItem img.mediumListIconTextItem-Image 
    {
        width: 60px;
        height: 60px;
        margin: 5px;
        -ms-grid-column: 1;
    }

    .mediumListIconTextItem .mediumListIconTextItem-Detail
    {
        margin: 5px;
        -ms-grid-column: 2;
    }

/* Template for items in the zoomed-out ListView */
.semanticZoomItem
{
    width: 130px;
    height: 130px;
    background-color: rgba(38, 160, 218, 1.0);
}   

    .semanticZoomItem .semanticZoomItem-Text
    {
        padding: 10px;
        line-height: 150px;
        white-space: nowrap;
        color: white;
    }

/* CSS for the zoomed-in ListView */
#zoomedInListView
{
    width: 600px;
    height: 300px;
    border: solid 2px rgba(0, 0, 0, 0.13);
}

#semanticZoomDiv 
{
    width: 600px;
    height: 300px;
    border: solid 2px rgba(0, 0, 0, 0.13);
}

For a walkthrough of this code, see Quickstart: Adding SemanticZoom controls.

Requirements

Minimum supported client

Windows 8 Consumer Preview

Minimum supported server

Windows Server 8 Beta

Namespace

WinJS.UI

Library

Ui.js

See also

Quickstart: Adding SemanticZoom controls
CSS classes

 

 

Build date: 2/10/2012

Ajouts de la communauté

AJOUTER
Afficher:
© 2015 Microsoft