Ответ 1
Если вы можете использовать HTML5, используйте атрибуты data- * - они были разработаны именно для этой проблемы.
<div data-tool-menu="900x900">
Должен поддерживать 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 не является проблемой, кажется лучшим методом,
Лучше всего, потому что он использует стандартные функции и избегает любого из хакеров, которые я пытался делать с именами классов. Конечно, классные имена чрезвычайно гибкие, но это решение не является семантическим, и оно не соответствует лучшей практике разделения представлений от поведения.
Если вы можете использовать HTML5, используйте атрибуты data- * - они были разработаны именно для этой проблемы.
<div data-tool-menu="900x900">
Почему бы просто не вставлять 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
Извлечь метаданные из элемента 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
Технически, rel
имеет ограниченный список возможных значений, поэтому вы можете создать страницу, которая не будет проверяться.
Я использую дополнительные классы для этого типа вещей все время. У меня никогда не было более 20 символов, поэтому я никогда не настаивал на ограничении длины. Хорошо использовать классы таким образом, что вы можете проверить страницу, которая всегда является хорошей вещью (tm).
Обновить для комментария:
Я стараюсь не перегружать одно имя класса, а генерировать несколько классов, каждый из которых делает One Thing. Это не только упрощает анализ, но также облегчает разделение behavior
на identity
на attribute
.
Например: код платформы Django Book не был доступен (по крайней мере, это не то, что я могу найти где угодно, и я смотрел тяжело), поэтому я переоцениваю его для клиента (и, да, он будет выпустить ОС). Немного измененная версия docutils
автоматически добавляет behavior
и identity
в теги "примечательных элементов", которые преобразуются из reStructuredText в HTML. Специфичность не уместна, но существует множество классов типов cg-13-134
и cg-15-u-142
, которые легко видны на глазах и в парсере.
Вы можете включить элемент внутри элемента
Если вы укажете элемент 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, но он будет, по крайней мере, проверять.
Я думаю, что вы ищете 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);
Почему бы не вместо этого:
<a href="url.com" class="popup">
<input type="hidden" value="900x900_scroll_tool_menu">My Link</a>
Затем просто используйте правильный селектор jQuery в событии click. Простой и он держит javascript из этой части вашего HTML.
Поскольку вы собираетесь использовать 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");
...
});