有没有一种方法可以创建自己的HTML元素?

7
有没有办法创建自己的HTML元素?我想要制作一个特别设计的复选框。
我想这样的事情可以用JavaScript来完成。类似于document.createHTMLElement,但是有能力设计你自己的元素(和标签)。
8个回答

12

不,没有。

HTML元素受限于浏览器的处理能力。也就是说,如果您创建了一个自定义的Firefox插件,并让它处理您的特殊标签,那么您“可能”可以做到这一点,但其实取决于“做到”的不同解释。您可以在此处找到特定HTML版本的所有元素列表:http://www.w3.org/TR/html4/index/elements.html

然而,您可能并不想这样做。如果您想要“组合”几个现有元素以便它们一起运作,那么可以使用JavaScript轻松实现。例如,如果您想要一个复选框,在单击时显示某个地方的下拉列表,并填充其中的各种内容,您可以这样做。

也许您可以详细说明您实际想要实现的目标,我们可以提供更多帮助。


我想制作一个带有自定义背景图像的复选框(用于选中和未选中状态)。我希望在创建多个复选框时尽量减少需要处理的代码量。 - Alan
2
啊,那么,在这种情况下,你往往会使用服务器代码重用模式(取决于你的编程语言)或JavaScript模式来处理重复性。你想要的可以很容易地实现,只需在复选框上添加一个OnChanged事件(或类似事件,我忘记哪个最好),然后使用JavaScript更改其容器的背景。这很容易搜索到如何做到。如果需要具体帮助,请再次提问。 - Noon Silk
正如Augusto在我的回答评论中所说,您无法编辑W3C拥有所有权的HTML本身。但是,您可以创建自己的标签实现模式并相应地呈现您的标签。-1因为没有考虑到OP的愿望。 - BrunoLM
2
@Bruno:你将如何让浏览器呈现你的新标签? - John Saunders

3

是的,你可以创建自己的标签。你需要创建一个模式并在页面上导入它,并编写一个JavaScript层将你的新标签转换为现有的HTML标签。

例如,fbmlFacebook标记语言)包括Facebook编写的模式和JavaScript层。请参见:Open Graph协议

使用它,你可以轻松地制作一个“喜欢”按钮:

<fb:like href="http://developers.facebook.com/" width="450" height="80"/>

6
或许我误解了问题,但 Facebook 标记语言与 HTML 关系不大。它不由网页浏览器解释,而是由 Facebook 读取,并从中输出标准的 HTML 标签。请注意,这里只涉及翻译,不包括解释或提供其他内容。 - Paul D. Waite
1
在我看来,Alan所寻找的正是Bruno提出的方案。他在问题中只是说“HTML”是因为习惯性表达,并不是在协议意义上,而这一点W3C拥有唯一的权利。 - Edwin Jarvis
1
@Augusto/BrunoLM:抱歉,但这个问题有一个具体的答案,即:不可以。正如其他人和我已经说过的,虽然有一些方法可以实现它,但却达不到创建新标签的特定目标。 - Noon Silk
1
@silky,这里有两件事情... OP想要的是创建一个标签,该标签输出带有他的设置的复选框,这是可能的,我已经回答了。如果不考虑OP想要的,也就是所谓的“标题问题”,那么你的答案就适用了。我相信我的答案是OP正在寻找的。 - BrunoLM
4
@BrunoLM,虽然你的回答说他需要编写模式,但实际上他需要编写一个JavaScript层,将他的标签转换为HTML标签并为它们添加JavaScript行为。如果他这样做了,他可能会一开始就放入HTML标签,并为其添加JavaScript行为。 - Paul D. Waite
显示剩余4条评论

2
最简单的方法可能是编写一个插件,比如使用Jquery(或Dojo,MooTools之一)。 如果使用jQuery,则可以在此处找到一些插件,http://plugins.jquery.com/ 然后将它们用作样本。

2

1

这是一个有效的问题,但我认为从UI方面来看,游戏的名称是渐进式标记。首先构建有效的w3兼容标签,然后使用javascript(在我的情况下是Jquery或Dojo)和CSS适当地进行样式设置。一段良好编写的CSS代码可以反复使用(我最喜欢的案例是带有themeroller的Jquery UI),只需在类声明中添加一个或两个单词即可为页面上的任何元素设置样式。

以下是一些相对简单的Jquery / Javascript / CSS解决方案:

http://www.filamentgroup.com/examples/customInput/ http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/

这是即将推出(且很有前途)的JqueryUI表单元素更新的规格说明:http://wiki.jqueryui.com/Checkbox

如果您需要验证输入,这是一种使用单个类或ID标记进行内联验证的简单方法:http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

好吧,我的解决方案不是一个10个字符、一行代码的解决方案。然而,除了Jquery代码之外,每个单独的标记都不会超过:

<input type="checkbox" id="theid">

因此,虽然会有一些中等大小的Jquery代码块,但单个元素非常小,这对于像我上一个项目那样重复250次(以编程方式)非常重要。它易于编码,降级良好,验证良好,并且由于渐进式标记将在用户端进行,因此在服务器端几乎没有成本。

我的当前项目是Symfony - 不是我的选择 - 它使用复杂而笨重的服务器端标记来呈现表单元素,验证,执行javascript onclick,样式等。这似乎是您最初要求的...让我告诉您,它很笨重。调用链接的一个标记可能长达10行代码!在被迫这样做之后,我不是粉丝。


1

随着Web组件及其自定义元素规范的出现,创建自己定义的用户自定义元素成为可能(而且非常棒):https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html - 所有最新浏览器都有polyfills,并且正在Firefox和Chrome中积极实现。 - csuwldcat

0

随着新兴的 W3 Web Components 标准的出现,特别是 Custom Elements spec,您现在可以创建自己的自定义 HTML 元素,并使用 document.register() DOM 方法将它们注册到解析器中。

X-Tag 是一个有用的糖库,由 Mozilla 开发,使得使用 Web Components 更加容易,可以看一下:X-Tags.org


0
嗯,第一个想法是你可以创建自己的元素,并使用XSLT对其进行转换为有效的HTML。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接