20、WinJS 应用样式与控件风格全解析

WinJS 应用样式与控件风格全解析

一、全局样式中的元素与控件风格

在应用开发中，WinJS 库为我们提供了丰富的样式和控件支持，帮助我们打造具有 Windows 8 风格的应用。

1. 后退按钮与设置标题的样式

包含后退按钮和设置标题的 div 元素，使用了 win-ui-dark 和 win-header 类值进行装饰，其背景颜色通过 CSS 片段中的样式规则设置。后退按钮是一个带有 win-backbutton 类的标准 HTML 按钮，与页面中后退按钮的声明方式相同。不过，CSS 通过 .win-settingsflyout .win-backbutton 选择器来区分设置弹出窗口中的后退按钮。

2. 弹出窗口与菜单

WinJS 库提供的弹出窗口（Flyouts）和菜单（Menus）是更全局、应用级别的控件。它们有相似的行为，都以覆盖层的形式出现在现有设计表面上，并且支持轻触关闭，即用户在外部触摸或点击即可关闭。

• 弹出窗口（Flyouts） ：是一个 HTML 容器，可自由创建内部内容。它是一种很好的方式来提示用户输入，例如通过一个“添加用户”按钮，点击后在按钮附近显示一个输入姓名的弹出窗口。以下是一个完整的弹出窗口实现示例：

<!-- lst0810.html -->
<!DOCTYPE htm