2009-10-21 2 views
4

Очень общий вопрос.Хранение произвольной информации в HTML-тегах для JavaScript?

Я динамически генерирую форму, разбитую на несколько уровней вкладок с использованием HTML/JavaScript.

Я хочу выделить некоторые поля (те, которые имеют значение, отличное от глобального шаблона) с символом звезды *, используя CSS и фоновое изображение.

Поле JS выполняет итерацию через каждое поле, сравнивает его значение и при необходимости устанавливает для него класс CSS. Все идет нормально.

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

Потому что я люблю это просто, я хотел бы сохранить элемент ID вкладки как атрибута где-нибудь в теге HTML каждого поля (что-то вроде «parentTab»). Затем функция JS выделяет поле и его элемент «parentTab» (и, возможно, его «parentTab»).

Мой первый подход заключается в неправильном использовании атрибута title или somethiong для хранения parentTab. Конечно, это грязно. Однако, если я просто добавляю произвольные атрибуты в тег DIV или INPUT, он больше не будет проверяться, и я чувствую себя меньше, чем безопасный доступ к этим атрибутам, - кто знает, как разные браузеры справляются с ним, и справится с ним в будущем?

Итак, мой вопрос: есть ли допустимый, совместимый со стандартами способ - атрибут какого-то типа - хранить произвольные данные внутри HTML-тегов для дальнейшей обработки с помощью JavaScript?

Конечно, я мог бы создать массив JS «parentTabs» и сделать с ним. Но хранение его во входном файле было бы намного более элегантным.

+1

См. Http://stackoverflow.com/questions/992115/custom-attributes-yay-or-nay/992464, http://stackoverflow.com/questions/1331587/how-should-i-associate-server- side-data-with-client-side-ui-elements-in-html для получения дополнительной информации о передаче данных в JS. – bobince

ответ

2

Вы можете узнать, какие вкладки элемента поле принадлежит написав функцию isChildOf, как этот: http://jimkeller.blogspot.com/2008/07/jquery-ischildof-is-element-child-of.html

Использования DOM, чтобы работать это всегда будет более «элегантным», чем дублирование данных в некотором пользовательском формате.

+0

, который требует jQuery, хотя ... Но это также должно быть довольно легко без jQuery. – peirix

+0

«Использование DOM для работы с этим всегда будет более« элегантным », чем дублирование данных в каком-то обычном формате». - Дело принято. На данный момент я, вероятно, займусь атрибутом «rel», так как это так быстро сделать; в долгосрочной перспективе подход DOM является правильным. –

22

с введением html5, вы можете использовать attributes that start with data-, и они все равно подтвердят.

<input type="text" name="username" data-parentTab="tab1" value="non-default"> 
+1

Хорошо, что отлично подходит для 5-10% населения, имеющего браузеры с поддержкой HTML5. – cletus

+2

Пятно на[email protected]: ** И ** вы можете сразу начать использовать его, даже если спецификация не закончена. Просто измените ваше объявление doctype на '' (вот и все, HTML5 делает доктрины * много * легче запомнить). –

+4

@cletus: для старых браузеров это не имеет значения, поскольку на самом деле это ничего не делает, кроме информации об удержании. Это будет отлично работать в IE6. Он просто не будет проверяться как XHTML или HTML4 ... – peirix

1

В jQuery у вас есть API данных для этого вопроса. http://docs.jquery.com/Internals/jQuery.data

Если вы не используете jQuery, вы можете добавить свои собственные теги и сохранить что-нибудь в нем. все расскажут вам, что это не приятно и т. Д., Но все великие интернет-фирмы делают это. так что вы окажетесь в отличной компании ;-)

2

Атрибут rel часто является отличным выбором для хранения таких данных.

+0

Верно, и я поеду с ним на данный момент. Тем не менее, это вопиющее злоупотребление атрибутом, я искал пути вокруг этого :) –

0

Мне нравится, как John Resig сделал это: тег сценария с произвольным типом. Его пример касается шаблонов, но вы действительно можете использовать это для чего угодно.

Смежные вопросы