php spry文本域_spry菜单栏(二)

自定义选项卡式面板构件

尽管使用属性检查器可以简化对选项卡式面板构件的编辑，但是属性检查器并不支持自定义的样式设置任务。您可以修改选项卡式面板构件的 CSS 规则，并创建根据自己的喜好设置样式的构件。有关样式任务的更高级列表，请访问 www.adobe.com/go/learn_dw_sprytabbedpanels_custom_cn。

下列主题中的所有 CSS 规则都是指 SpryTabbedPanels.css 文件中的默认规则。每当您创建 Spry 选项卡式面板构件时，Dreamweaver 都会将 SpryTabbedPanels.css 文件保存到您的站点的 SpryAssets 文件夹中。此文件中还包括有关适用于该构件的各种样式的有用的注释信息。

尽管可以直接在相关联的 CSS 文件中方便地编辑选项卡式面板构件的规则，您还可以使用“CSS 样式”面板来编辑选项卡式面板构件的 CSS。“CSS 样式”面板对于查找分配给构件不同部分的 CSS 类非常有用，在使用面板的“当前”模式时尤其如此。

设置选项卡式面板构件文本的样式

，通过设置整个选项卡式面板构件容器的属性或分别设置构件的各个组件的设置，可以设置选项卡式面板构件的文本样式。

要更改选项卡式面板构件的文本样式，请使用下表来查找相应的 CSS 规则，然后添加自己的文本样式属性和值：

要更改的文本

相关 CSS 规则

要添加的属性和值的示例

整个构件中的文本

.TabbedPanels

font: Arial; font-size:medium;

仅限面板选项卡中的文本

.TabbedPanelsTabGroup 或 .TabbedPanelsTab

font: Arial; font-size:medium;

仅限内容面板中的文本

.TabbedPanelsContentGroup 或 .TabbedPanelsContent

font: Arial; font-size:medium;

更改选项卡式面板构件的背景颜色

要更改选项卡面板构件不同部分的背景颜色，请使用下表来查找相应的 CSS 规则，然后根据自己的喜好添加或更改背景颜色的属性和值：

要更改的颜色

相关 CSS 规则

要添加或更改的属性和值的示例

面板选项卡的背景颜色

.TabbedPanelsTabGroup 或 .TabbedPanelsTab

background-color: #DDD;(这是默认值。)

内容面板的背景颜色

.Tabbed PanelsContentGroup 或 .TabbedPanelsContent

background-color: #EEE;(这是默认值。)

选定选项卡的背景颜色

.TabbedPanelsTabSelected

background-color: #EEE;(这是默认值。)

当鼠标指针移过面板选项卡上方时，选项卡的背景颜色

.TabbedPanelsTabHover

background-color: #CCC;(这是默认值。)

限制选项卡式面板的宽度

默认情况下，选项卡式面板构件会展开以填充可用空间。但是，您可以通过设置折叠式容器 width 属性来限制选项卡式面板构件的宽度。

打开 SpryTabbedPanels.css 文件查找 .TabbedPanels CSS 规则。此规则可为选项卡式面板构件的主容器元素定义属性。

查找规则的另一种方法是：选择选项卡式面板构件，然后在“CSS 样式”面板(“窗口”>“CSS 样式”)中进行查找。请确保该面板设置为“当前”模式。

向该规则中添加一个 width 属性和值，例如width: 300px;。

关于验证文本域构件

Spry 验证文本域构件是一个文本域，该域用于在站点访问者输入文本时显示文本的状态(有效或无效)。例如，您可以向访问者键入电子邮件地址的表单中添加验证文本 域构件。如果访问者无法在电子邮件地址中键入“@”符号和句点，验证文本域构件会返回一条消息，声明用户输入的信息无效。

下例显示一个处于各种状态的验证文本域构件：

A.文本域构件(提示已激活) B.文本域构件(有效状态)C.文本域构件(无效状态)

D.文本域构件(必需状态)

验证文本域构件具有许多状态(例如，有效、无效和必需值等)。您可以根据所需的验证结果，使用属性检查器来修改这些状态的属性。验证文本域构件可以在不同的时间点进行验证，例如当访问者在构件外部单击时、键入内容时或尝试提交表单时。

初始状态

在浏览器中加载页面或用户重置表单时构件的状态。

焦点状态

当用户在构件中放置插入点时构件的状态。

有效状态

当用户正确地输入信息且表单可以提交时构件的状态。

无效状态

当用户所输入文本的格式无效时构件的状态。(例如，用 06 而不是用 2006 表示年份。)

必需状态

当用户在文本域中没有输入必需文本时构件的状态。

最小字符数状态

当用户输入的字符数少于文本域所要求的最小字符数时构件的状态。

最大字符数状态

当用户输入的字符数多于文本域所允许的最大字符数时构件的状态。

最小值状态

当用户输入的值小于文本域所需的值时构件的状态。(适用于整数、实数和数据类型验证。)

最大值状态

当用户输入的值大于文本域所允许的最大值时构件的状态。(适用于整数、实数和数据类型验证。)

每当验证文本域构件以用户交互方式进入其中一种状态时，Spry 框架逻辑会在运行时向该构件的 HTML 容器应用特定的 CSS 类。例如&#x