Что лучший HTML-атрибут состоит в том, чтобы использовать, чтобы хранить информацию для jQuery для парсинга?

Должен Поддерживать IE6 и должен Проверить по сравнению со Строгими 1.0 XHTML!

Это хитро для объяснения...

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

<a href="url.com" class="popup" rel="900x900" >My Link</a>

С этим jQuery будет искать все элементы, которые имеют 'всплывающее окно' и анализируют значение рэла для размеров всплывающего окна и инициируют всплывающее окно () функция каждый раз, когда на эту ссылку нажимают с окном размер w=900 h=900

но я должен взять это шаг вперед, потому что я хочу иметь больше опций...

<a href="url.com" class="popup" rel="900x900_scroll_tool_menu" >My Link</a>

Я не уверен, если использование атрибута рэла является местом для этого, потому что я также хочу использовать это на других элементах, которые не имеют рэла = атрибут.

Таким образом, я думал с помощью классов для этого также... Я придумал это:

 <a href="url.com" class="popup opt_dim-900x900_scroll_tool_menu" >My Link</a>
 <img src="pic.gif" class="popup opt_dim-150x200_location" >My Link</a>

От взглядов этого опции могут стать Очень длинными, использование класса кажется хорошо, но возможно лучше существует что-то..

То, какой путь делают Вы думаете, лучше? У Вас есть другая идея для этого? Я хочу сохранить опции в некотором атрибуте HTML.

Спасибо!

ОБНОВЛЕНИЕ

Мне постоянно напоминают, что существует дюжина способов сделать что-либо в JavaScript, с точки зрения решений здесь я позже изменил корректный ответ на html5 атрибут данных, который теперь, когда ie6 не является проблемой, походит на лучший метод.

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

10
задан qodeninja 21 September 2012 в 16:14
поделиться

7 ответов

Если вы можете использовать HTML5, используйте атрибуты data- * - они были разработаны именно для этой проблемы.

<div data-tool-menu="900x900">

http://ejohn.org/blog/html-5-data-attributes/

18
ответ дан 3 December 2019 в 13:37
поделиться

Почему бы не сделать это вместо этого:

<a href="url.com" class="popup">
<input type="hidden" value="900x900_scroll_tool_menu">My Link</a>

Тогда просто используйте правильный селектор jQuery для события щелчка. Просто, и это позволяет исключить javascript из этой части вашего HTML.

1
ответ дан 3 December 2019 в 13:37
поделиться

Технически rel имеет ограниченный список возможных значений, поэтому вы можете создать страницу, не будет подтверждать.

Я постоянно использую дополнительные занятия для подобных вещей. У меня никогда не было ни одного длиннее 20 символов, поэтому я никогда не превышал никаких ограничений по длине. Преимущество такого использования классов в том, что вы можете проверить страницу, что всегда хорошо (tm).

Обновление для комментария:

Я стараюсь не перегружать одно имя класса, а генерировать несколько классов, каждый из которых выполняет одно действие. Это не только упрощает синтаксический анализ, но также позволяет легко отделить поведение от идентичности от атрибута .

Например: код платформы Django Book недоступен (по крайней мере, я нигде не могу найти, и я внимательно искал), поэтому я повторно реализую его для клиента (и, да, он будет будет выпущена ОС). Слегка измененная версия Docutils автоматически добавляет поведение и идентификатор к тегам «комментируемых элементов» при преобразовании из reStructuredText в HTML. Специфика не имеет отношения к делу, но существует множество классов типов cg-13-134 и cg-15-u-142 , которые легки для глаз и парсер.

4
ответ дан 3 December 2019 в 13:37
поделиться

Я думаю, вы ищете jQuery.data().

Метод jQuery.data() позволяет нам прикреплять данные любого типа к DOM элементам ...

Из примера по ссылке выше:

var div = $("div")[0];
jQuery.data(div, "test", { first: 16, last: "pizza!" });
$("span:first").text(jQuery.data(div, "test").first);
$("span:last").text(jQuery.data(div, "test").last);
3
ответ дан 3 December 2019 в 13:37
поделиться

Извлечение метаданных из DOM-элемента и возвращение их в виде объекта.

Вы можете поддерживать / использовать jQuery metadata plugin. Есть несколько вариантов на выбор, и это хороший способ встроить метаданные в html.

Например, плагин поддерживает следующие варианты.

<li class="someclass {some: 'data'} anotherclass">...</li>
<li data="{some:'random', json: 'data'}">...</li>
<li class="someclass">
   <script type="application/json">{some:"json",data:true}</script>...
</li>

См. также: A Plugin Development Pattern на сайте learningjquery.com

5
ответ дан 3 December 2019 в 13:37
поделиться

Вы можете включить элемент в элемент

Если вы дадите элементу id , вы можете использовать что-то вроде:

<a href="/url" id="unique_id" class="popup">My Link
    <script type="text/javascript">
        popup['unique_id'] = { \\JSON object describing options
                             };
    </script>
</a>

Конечно, у вас все еще есть Javascript, связанный с вашим HTML, но он будет, по крайней мере, подтверждать.

4
ответ дан 3 December 2019 в 13:37
поделиться

Почему бы просто не встроить json в атрибут rel:

<a href="url.com" class="popup" rel="{w:900,h:900}" >My Link</a>

Таким образом, вы можете иметь столько свойств, сколько захотите, а формат стандартизирован и легок для доступа.

если проверка вызывает беспокойство; вы всегда можете использовать xhtml, определить свое собственное пространство имен, а затем добавить настраиваемый атрибут.

<a href="url.com" class="popup" custom:options="{w:900,h:900}" >My Link</a>

Edit : Спасибо @andras в комментариях, вот отличный пример этой техники:
http://www.bennadel.com/blog/1453-Using-jQuery-With-Custom-XHTML -Attributes-And-Namespaces-To-Store-Data.htm

8
ответ дан 3 December 2019 в 13:37
поделиться
Другие вопросы по тегам:

Похожие вопросы: