通过

设置 FlipView 及其各项的样式 (HTML)

  • 项目

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]

你可以通过许多方式来自定义 FlipView。你可以为 FlipView 本身、它所包含的项目或者构成这些项目的模板设置样式。

先决条件

你可以设置样式的 FlipView 的部件

与大部分适用于 JavaScript 的 Windows 库控件一样，FlipView 也提供一组 CSS 类，你可以使用这些类来设置控件的特定部分的样式。 例如，若要设置 FlipView 控件的左导航按钮，则请覆盖 win-leftnav CSS 类。

下面是你可以设置样式的 FlipView 控件的部件图表。

你可以设置样式的 FlipView 的部件

设置 FlipView 本身的样式

若要创建 FlipView，请创建一个 div 元素并将其 data-win-control 属性设置为 "WinJS.UI.FlipView"。你可以将 CSS 样式应用到此 div 元素（主机元素），就像你将它们应用到任何其他元素一样。实际上，始终指定主机 div 元素的 width 和 height。

 <div id="basicFlipView" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>

应用了基本样式的 FlipView 控件

你还可以使用 win-flipview 类设置整个 FlipView 的样式。当创建 FlipView 时，此类将添加到主机 div 元素。

设置 FlipView 控件的导航按钮的样式

FlipView 具有四个导航按钮。当 FlipView 控件的 orientation 为“水平”""时，它将使用左和右导航按钮。当 orientation 为“垂直”""时，它将使用顶部和底部导航按钮。下面是你可以用于设置 FlipView 控件的导航按钮的样式的部件。

  • win-navbottom
    设置底部导航按钮的样式。

  • win-navbutton
    设置所有导航按钮的样式。

  • win-navleft
    设置左导航按钮的样式。

  • win-navright
    设置右导航按钮的样式。

  • win-navtop
    设置顶部导航按钮的样式。

本例将左导航按钮设置为红色并带有黑色边框。

#styledHorizontalFlipview .win-navleft {
    background-color: red;
    border: 2px solid black;
}

<div id="styledHorizontalFlipview" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>

带有设置了样式的左导航按钮的 FlipView

用于设置导航按钮样式的伪类

当导航按钮处于特定的状态时，你可以使用伪类作为选择器来设置这些按钮的样式。下面是可用于设置导航按钮样式的某些较为有用的伪类：

  • win-navbutton:hover
    当用户将光标悬停在 FlipView 控件的导航按钮上，但尚未通过单击激活该按钮时，向该按钮应用样式。

    此示例定义处于悬停状态的导航按钮的样式。

    #styledHorizontalFlipview .win-navbutton:hover {
    background-color: orange;
    border: 2px solid white;
}

    <div id="styledHorizontalFlipview" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>

  • win-navbutton:active
    当 FlipView 控件的导航按钮处于活动状态时，向该按钮应用样式。在用户按下该控件之后，在释放该控件之前，导航按钮处于活动状态。如果用户按下该控件并将指针从按钮中移开，则在用户释放指针之前，该控件会一直处于活动状态。

    本示例将会更改处于活动状态的导航按钮的背景颜色。

    #styledHorizontalFlipview .win-navbutton:active {
    background-color: limegreen;
}

    <div id="styledHorizontalFlipview" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>

设置项的样式

设置项样式的一个方法是，使用 CSS 来设置模板本身中的 HTML 元素的样式。

本例使用 CSS 来设置模板本身的样式。

.itemStyling p {
    margin-left: 120px;
}

.simpleItemTemplateRoot {
    width: 480px; 
    height: 310px;
}

.simpleItemTemplateImage {
    height: 270px; 
    width: 480px;
}

.simpleItemTemplateText {
    height: 40px; 
    padding: 5px;
}

 <div id="simpleItemTemplate" 
     data-win-control="WinJS.Binding.Template" 
     style="display: none">
    <div class="simpleItemTemplateRoot">
        <img class="simpleItemTemplateImage"
             src="#" 
             data-win-bind="src: picture; alt: title"
             />       
        <div class="simpleItemTemplateText" 
            data-win-bind="innerText: title" >
        </div>     
    </div>
</div>
  
 <div id="basicFlipView" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>

你还可以使用 win-item CSS 类来设置包含项的 div 元素的样式。

相关主题

FlipView 控件指南