定义视图行为

您可以通过添加 JavaScript 和样式以及在事件处理程序中定义函数来定义视图的行为和外观。

过程

切换至“行为”以定义视图的功能和外观：

  • 添加动态样式以控制视图的外观。
    动态样式将 Less 样式表与在父代（通常是应用程序）中设置的样式定义进行组合。 有关 Less 语言的信息，请参见 http://lesscss.org/ 外部链接会打开一个新窗口或选项卡. 将 Less 样式表与样式定义相结合会生成运行时 CSS 文件。 运行时 CSS 文件用于在应用程序中显示视图实例。 通过在容器级别设置定义值，该容器中的视图实例可具有一致的样式。 另外，可以从一个位置对该样式进行全局更改。
  • 使用随附的脚本添加库中现有脚本和样式表文件。
    通常，这些文件是可复用的 .js 和 .css 文件。 您可以将这些文件作为单个 Web 文件添加到库中，或者将其打包在 .zip 文件中，并将该文件添加为 Web 文件。 将这些文件打包在 .zip 文件中意味着它们保持其相对关系。 例如，如果打包 .css 文件并包含使用相对链接引用的图像，那么系统将查找这些图像。 但是，如果将 .css 打包在一个 .zip 文件中并将其引用的图像打包在不同的 .zip 文件中，那么系统不会查看这些图像。

    如果将 .css 文件添加为单个 Web 文件，那么可以在低代码设计器中编辑这些文件。 您无法编辑打包在设计器中的 .zip 文件中的 .css 文件。 相反，您必须在外部对其进行编辑，重新打包它们，然后将 .zip Web 文件替换为已更新的 .zip 文件。

  • 通过使用内联 CSS，对设定视图样式时所需的 CSS 建立原型。 开发 CSS 后，将其复制到 .css 文件并将该文件作为包含的脚本导入。
    由于内联 CSS 类名是全局的，因此可能会存在名称冲突，导致仅应用最后的样式定义。 为此，请将内联 CSS 用作开发视图 CSS 样式的临时位置。
    如果指向 .zip 文件中的一个图像文件，请对 URL 使用以下格式：file.zip!path/file.extension。
    注: 仅在内联 CSS 行为中支持使用 "!" 表示法来引用归档内的文件。
    在低代码设计器中运行时，在 .css 文件和内联 CSS 中指定的视图样式将应用于布局窗格中的视图，支持您查看视图在运行时的显示方式，并且无需运行或测试视图。 对该设计时样式支持有以下几个限制：
    • 如果在 CSS 中使用介质查询语句，将只解析介质类型为 screen 的介质查询，并仅在设计时应用 max-width 和 min-width 规范。 此设计时样式仅支持简单语法，例如，将在设计时处理以下介质类型语句：
      @media screen ….
	@media all
	@media (min-width: 520 px )
      但是，将不会在设计时处理以下语句：
      @media not screen
@media not print
@media not (tty and screen)
    • 如果您使用 Internet Explorer 9（不推荐使用），那么设计时样式仅应用于已打开的前 25 个视图或应用程序。 系统不会对应用程序中的后续视图或页面应用设计时样式。
    • 仅会将所包含脚本和内联 CSS 内的导入处理至一级嵌入。 例如，如果您有包含语句 @import url('File1.css')的内联 CSS ，那么在设计时将反映 File1 中的 css ，但在设计时不会反映 File1 中的任何 import 语句。

    如果您有大型或复杂页面和视图，那么设计时样式可能会导致某些性能问题。 要禁用当前会话的设计时样式，请切换至“布局”，右键单击画布上的任意位置，然后选择禁用设计时样式。 对于会话的其余部分，将不会应用指定的视图样式。 要对会话重新开启设计样式，请在画布上右键单击，然后选择启用设计时样式。

  • 添加条件样式，以处理浏览器和介质类型之间的差异。
    当应用条件时，条件样式将覆盖缺省样式。
    例如，您可以对 Microsoft Internet Explorer 应用一个 .css 文件，对其他浏览器应用另一个 .css 文件。 使用条件样式来应用相应的文件。
    要添加条件样式，请执行以下操作：
    1. 将特定于屏幕大小的样式或特定于浏览器的样式添加到 .css 文件。
      例如，可以添加针对平板电脑的样式，以对标签使用较小的字体并减少填充。
    2. 添加 .css 文件作为包含的脚本。
    3. 在 IE Condition 或 Media 字段中，添加在 .css 文件中应用样式的条件。
      例如，如果 .css 文件包含平板电脑演示文稿的样式，请向 媒体 字段添加类似 screen and (max-width: 600px) 的条件。 如果用户的屏幕宽度为 600 像素或更小，那么视图将使用 .css 文件中的样式，而不是缺省值。
    您也可以通过添加内联 JavaScript 和内联 CSS 来添加条件样式。
    注: 任何内联 JavaScript 样式以及在 IE Condition 和 Media 字段中输入的任何样式条件仅在运行时处理，在设计时不会反映出来。
  • 使用内联 JavaScript为视图的事件处理程序定义公共变量和函数。
    编辑器包含代码片段。 编辑器不会显示代码片段的验证消息。
  • 定义用于标识用户定义事件处理程序的变量。
  • 要将类似 <meta> 标记的代码插入到视图的标题中，请使用 标题 HTML。
  • 如果需要，请定义视图在相应的事件处理程序中所使用的函数。
    如果在概述属性中选择了可触发边界事件，请添加代码以触发边界事件。 要触发此事件，请对 JavaScript 进行编码以在适当时间调用 this.context.trigger(callback)。