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

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

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

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

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

При этом jQuery будет искать все элементы, которые имеют "всплывающее окно", и анализировать значение 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 не является проблемой, кажется лучшим методом,

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

Ответ 1

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

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

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

Ответ 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

Ответ 3

Извлечь метаданные из элемента 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>

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

Ответ 4

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

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

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

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

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

Ответ 5

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

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

Ответ 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);

Ответ 7

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

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

Затем просто используйте правильный селектор jQuery в событии click. Простой и он держит javascript из этой части вашего HTML.

Ответ 8

Поскольку вы собираетесь использовать 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");
  ...
});