Лучший способ добавить метаданные к элементам HTML
Я пытаюсь соединить способ повысить различные компоненты в 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", и я абсолютно уверен, что некоторым браузерам не понравится он, и это не проверит.
Кто-либо получил какие-либо лучшие предложения?
6 ответов
Используйте для этого атрибут, но используйте префикс data- на нем. Атрибуты с префиксом data- явно разрешены для всех элементов, начиная с HTML5. Пример:
<a href="#" class="Theme-Button" data-theme="{style: 'win2007', icon: 'left', align:'center', fullWidth: true}"></a>
Сегодня он работает во всех браузерах (хотя валидатор W3 может пожаловаться, так как его поддержка HTML5 не совсем готова к работе в прайм-тайм), и, поскольку теперь его поведение задано, оно рассчитано на будущее.
Используйте свойство jquery ".data". Это очень удобно, и многие люди об этом не знают.
См. ссылку для получения дополнительной информации.
Можно также использовать классы для такого рода вещей.
<a href="#" class="Theme-Button Style-win2007 Icon-left Align-Center FullWidth"></a>
Вам нужно будет заранее определить множество классов, но это не сильно отличается от обработки каждой пары ключ-значение что вы должны создать.
Библиотека прототипов поддерживает:
element.store («ключ», «значение»)
и
element.retrieve («ключ», «значение» ) .
Просто. Приятно. Действует.
Используйте xhtml с добавленными пользовательскими элементами из другого DTD. или используйте html5 с настраиваемыми атрибутами data-