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

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>

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

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

Answer 1

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

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

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

Answer 2

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

См. эту ссылку для получения дополнительной информации.

Answer 3

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

Answer 4

Использовать xhtml с пользовательскими элементами, смешанными с другим DTD. или используйте html5 с пользовательскими data- атрибутами

Answer 5

Библиотека прототипов поддерживает:

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

и

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

Simple. Ницца. Эффективное.

Answer 6

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

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

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