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