Лучший способ добавить метаданные к элементам HTML

Я пытаюсь собрать способ разметки различных компонентов в HTML, которые обрабатываются jQuery script и создаются при загрузке страницы.

Например, на данный момент я могу разместить на моей странице следующее.

<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 script найдет его, он добавит html, необходимый для создания кнопки с иконкой на ней и всеми необходимыми событиями и т.д.

Однако это грязно и требует много длинных имен классов. Я бы скорее сделал что-то вроде этого...

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

Это не намного короче, но более аккуратный, на мой взгляд, и требует меньше разбора. Проблема в том, что я немного изучил "expandos", и я уверен, что некоторым браузерам это не понравится, и оно не будет проверяться.

У кого-нибудь есть лучшие предложения?

Ответы

Ответ 1

Идем дальше и используем для этого атрибут, но используем префикс data-. Атрибуты с префиксом data- явно разрешены для всех элементов с HTML5. Пример:

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

Он работает сегодня во всех браузерах (хотя валидатор W3 может жаловаться, поскольку его поддержка HTML5 не совсем готова к прайм-тайму), а потому, что теперь она указала на поведение, она будет защищена будущим.

Ответ 2

Использовать свойство jquery ".data". Это очень удобно, и многие люди об этом не знают.

Подробнее см. эту ссылку.

Ответ 3

Посмотрите на функцию jQuery.data().

Ответ 4

Можно также использовать классы для такого рода вещей.

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

Вам нужно предварительно определить множество классов, но это не слишком сильно отличается от обработки каждой пары значений ключа, которую вы должны создать.