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

Question

Должен поддерживать IE6 и должен проверяться против XHTML Strict 1.0!

Это сложно объяснить ...

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

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

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

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

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

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

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

 <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.

Спасибо!

UPDATE

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

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

Answer 1

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

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

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

Answer 2

Почему бы просто не вставить 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>

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

Answer 3

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

Вы можете поддерживать / использовать метаданные jQuery плагин . Есть несколько вариантов на выбор, и это хороший способ встроить метаданные в 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>

См. Также: Шаблон разработки плагинов на сайте learningjquery.com

Answer 4

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

Если вы дадите элементу 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, но он, по крайней мере, подтвердит.

Answer 5

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

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

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

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

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

Answer 6

Я думаю, что вы ищете 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);

Answer 7

Поскольку вы собираетесь использовать javascript, я предлагаю добавить дополнительные параметры / информацию, которые вам нужны, в качестве параметров для вашего URL. Я искал аналогичное решение для вашего вопроса, и я наконец решил пойти по этому пути. Это также способ, которым работает ThickBox (http://jquery.com/demo/thickbox/), и я успешно использовал его в нескольких проектах.

<a href="url.com?width=900&height=900&randomKey=randomValue" class="popup">My Link</a>

Тогда в вашем JS

$(".popup").click(function(){
  var url = $(this).attr("href");
  var width = fancyFunctionToParseParameters(url, "width");
  ...
});

Answer 8

Почему бы не это вместо этого:

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

Тогда просто используйте правильный селектор jQuery для вашего события клика. Это просто, и это не дает JavaScript-кодам этой части вашего HTML.