Могу ли я хранить пользовательские атрибуты в HTML DOM, как запись базы данных?

При разработке для браузеров FF3 и IE6/7 с jQuery существуют ли проблемы с совместимостью при настройке настраиваемых атрибутов в тегах HTML?

Во-первых, я знаю функцию jQuery data(), и она по существу делает то, что я хочу, но данные не выдерживают функцию clone(). Это проблема при использовании перетаскиваемых /droppable плагинов jQuery UI, поскольку он клонирует элементы DOM во время перетаскивания. Для этого вопроса мне нужна альтернатива data().

Я хочу сохранить данные между операциями перетаскивания. Я хочу иметь возможность вводить данные в элемент DOM, который перемещается во время операции перетаскивания. Для этого я могу создать дочерние элементы HTML для имитации записи базы данных. Быстрое экспериментирование показывает, что у Firefox нет проблем с использованием любых имен атрибутов. Я хочу хранить поля данных. Однако спецификация HTML 4 говорит о том, что определенные теги могут содержать только определенные имена атрибутов. Будет ли заполнение DOM нестандартными атрибутами вызывать проблемы несовместимости с браузерами, о которых я упоминал?

Ответы

Ответ 1

Взгляните на этот похожий вопрос, который я задал некоторое время назад: Могу ли я просто добавлять атрибуты в свои HTML-теги?

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

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

http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#embedding-custom-non-visible-data

Ответ 2

Отсутствие стандартного способа сделать это в HTML4, у меня возникнет соблазн создать скрытый элемент, соответствующий моему перетаскиванию, и сохранить в нем связанные данные. Назовите скрытый элемент относительно перетаскиваемого, чтобы вы могли легко найти информацию для него. Следующее расширение реализует это, используя скрытый диапазон. Примечание: при тестировании я не мог реплицировать ваши проблемы с перетаскиваемыми элементами - data(), казалось, работал нормально для меня, но я не тестировал его с помощью различных плагинов, просто UI.Draggable.

Использование:

$('#draggableDiv').externalData('key','data');
var d = $('#draggableDiv').externalData('key');

jQuery.fn.externalData = function(key, data) {
    var value = this;
    this.each( function() {
        var id = this.id+'_external_data';
        var elem = jQuery('#'+id+':first');
        if (elem.size() == 0) {
            elem = $('<span style="display: none;" id="' + id + '"></span>"' );
            elem.appendTo(document.body);
        }
        if (data) {
            elem.data(key,data);
        }
        else {
            value = elem.data(key);
            return false;
        }
    });
    return value;
};

Ответ 4

Это относительно неизвестно, но довольно полезно: jQuery Плагин метаданных. Это позволит вам хранить данные в именах классов для извлечения. Он в основном используется для плагина проверки, но, действительно, может быть адаптирован к любому сценарию.

Удачи вам в том, над чем вы работаете.