Question

我正在尝试整理一种在HTML中标记各种组件的方法，这些组件由jQuery脚本解析并在页面加载时创建。

例如，目前我可以将以下内容放入我的页面..

<a href="link.html" class="Theme-Button Theme-Button-Style-win2007 Theme-Button-iconLeft Theme-Button-AlignmentCenter Theme-Button-fullWidth">This is a button</a>

当jQuery脚本找到它时，它会注入创建一个带有图标的按钮所需的html以及所有必要的事件等。

然而，这很麻烦，需要很多长课程名称。我宁愿做这样的事......

<a href="#" class="Theme-Button" data="{style: 'win2007', icon: 'left', align:'center', fullWidth: true}"></a>

它不是那么短，但在我看来更整洁，需要更少的解析。麻烦的是，我已经对“expandos”进行了一些研究，我相当肯定有些浏览器不喜欢它并且它不会验证。

有人有更好的建议吗？

Answer 1

继续使用属性，但在其上使用data-前缀。从HTML5开始，所有元素的前缀为data-的属性为explicitly allowed。例如：

<a href="#" class="Theme-Button" data-theme="{style: 'win2007', icon: 'left', align:'center', fullWidth: true}"></a>

今天它适用于所有浏览器（尽管W3验证器可能会抱怨因为它的HTML5支持尚未准备好进入黄金时段），并且因为它现在已经指定了行为，所以它具有前瞻性。

Answer 2

使用jquery的“.data”属性。这非常方便，很多人都不知道。

有关详细信息，请参阅this link。

Answer 3

查看jQuery .data()函数。

Answer 4

也可以使用类来做这类事情。

<a href="#" class="Theme-Button Style-win2007 Icon-left Align-Center FullWidth"></a>

您必须预先定义很多类，但与处理您必须创建的每个键值对没有太大的不同。

Answer 5

Prototype library支持：

element.store("key","value")

和

element.retrieve("key","value")。

简单。尼斯。有效的。

Answer 6

将xhtml与来自其他DTD的自定义元素结合使用。或者使用带有custom data- attributes

的html5

向HTML元素添加元数据的最佳方法

6 个答案: