资讯专栏INFORMATION COLUMN

【译】怎样创建定制表单组件

wanghui / 3519人阅读

摘要:若你想在诸如元素的组件上应用高级样式或者想定制组件的行为,你就只能选择创建自己的表单组件。我们将通过本文学习如何构建一个表单组件。

系列文章说明

原文

在许多情况下,[可用的HTML表单组件]()是不够的。若你想在诸如元素作为例子。

注意:我们会专注于构建组件,但不会关注如何保证代码的通用和可重用。构建组件时会涉及到一些特殊的JavaScript代码和未知上下文中的DOM操作,而这些内容已经超出了本文的讨论范围。

设计,结构和语义

在构建一个定制组件前,应先从明确你想要达到的效果开始,这会节省你宝贵的时间。具体来讲,清晰地定义组件的所有状态是很重要的。要做到这点,最好从一个已经存在的、状态和行为已经为人所熟知的组件开始,这样你就只需尽可能地模仿该组件即可。

在我们的例子中,我们会重构元素以查看所有可用的选项(这和用鼠标点击元素所需的代码:


Cherry
  • Cherry
  • Lemon
  • Banana
  • Strawberry
  • Apple

要注意此处class名的使用;这些class标记了每个相关的元素,而不需要依赖其实际使用的HTML元素。这么做能确保我们不会把CSS和JavaScript与HTML结构作强关联,从而做到改变后续的组件代码实现时,不破坏使用该组件的代码。比如你想实现一个同样的元素时,可用直接用相同的代码来调用。

用CSS创建样式和交互

现在我们已经有了组件的结构了,接下来要来设计组件了。创建这个自定义组件的目的,是为了用我们想要的形式来给该组件添加样式。要做到这点,我们要把CSS的编码工作拆为两部分:第一部分是让我们组件和元素。要做到这点,得先来做两件事。

首先,我们要在使用自定义组件之前,添加一个普通的

Cherry

第二,我们还得添加两个新的类名,实现隐藏不需要的元素(即在脚本能运行时的`元素 - 要么body的类名没有改变,仍是"no-widget",那么类名为"select"的元素就要被隐藏了 */ position : absolute; left : -5000em; height : 0; overflow : hidden; }

至此,我们只需要一个JavaScript开关来决定脚本是否能运行了。这个开关很简单:若页面加载了脚本并运行,就会移除no-widget类并添加widget类,实现对元素,并在页面中的每个