20

我正在尝试组合一种方法来标记 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”做了一些研究，我很确定有些浏览器不会喜欢它，也不会验证。

有人有更好的建议吗？

4

6 回答 6

33

继续并为此使用属性，但data-在其上使用前缀。从 HTML5 开始，所有元素data-都明确允许带有前缀的属性。例子：

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

它现在适用于所有浏览器，并且因为它现在是指定的行为，所以它是面向未来的。

于 2009-12-17T17:28:50.463 回答
2

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

有关更多信息，请参阅此链接。

于 2009-12-17T17:28:52.870 回答
1

查看jQuery .data()函数。

于 2009-12-17T17:28:54.337 回答
1

原型库支持：

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

和

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

简单的。好的。有效的。

于 2009-12-17T18:01:14.423 回答
0

人们也可以为这类事情使用类。

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

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

于 2009-12-17T17:26:45.327 回答
0

将 xhtml 与从另一个 DTD 混合的自定义元素一起使用。或使用带有自定义data-属性的 html5

于 2009-12-17T18:08:48.127 回答