Как правильно клонировать (jQuery) элемент, стиль которого применяется через PIE? - PullRequest
Новая
       17

Как правильно клонировать (jQuery) элемент, стиль которого применяется через PIE?

3 голосов
/ 28 марта 2011

Я успешно использую .htc версию PIE в новом проекте (который будет специально нацелен на IE8 +), однако у меня возникают проблемы при попытке клонировать элемент с PIE- стиль применяется к нему.

Я получил jsfiddle, иллюстрирующий проблему здесь , и ввод приветствуется (даже другие, аналогичные подходы / альтернативы PIE) - однако на файлы .htc нельзя ссылаться междоменная, так что эта скрипка просто содержит фактическую разметку и CSS, который я использую.

Любая помощь приветствуется. Что может быть причиной этого, существует ли потенциальный обходной путь?

Cheers, Peol

1 Ответ

6 голосов
/ 17 июня 2011

При клонировании элементов с потомками PIE встречаются две проблемы:

  1. Элементы VML, вставленные PIE, также будут включены в клонированный контент, но по какой-то причине они клонированы неправильно, без префикса пространства имен, и
  2. Уникальный атрибут _pieId, который PIE помещает в каждый из своих целевых элементов, также копируется в клон, что приводит к конфликтам между идентификаторами, которые больше не являются уникальными.

Итак, чтобы сделать правильный клон, нам нужно избавиться от обоих. Первое можно сделать, временно установив для свойства стиля поведения каждого элемента PIE значение 'none', одновременно клонируя и восстанавливая его. Установка его в «none» запускает методы очистки PIE, которые удаляют все элементы VML. Второй элемент должен быть выполнен вручную, поскольку PIE не удаляет атрибуты _pieId автоматически. Оба эти сценария достаточно просты для написания сценариев.

Вот собственное расширение jQuery, которое обрабатывает это в моем ограниченном тестировании: 

jQuery.fn.cloneWithPIE = function(dataAndEvents, deepDataAndEvents) {
    // Find elements with PIE attached and remove their behaviors:
    var pied = this.find('[_pieId]').css('behavior', 'none');

    // Perform the clone:
    var clone = this.clone(dataAndEvents, deepDataAndEvents);

    // Remove the _pieId from each of the original and cloned 
    // elements, and restore the behavior:
    pied.add(clone.find('[_pieId]')).removeAttr('_pieId').css('behavior', '');

    return clone;
}

Затем вы вызываете метод cloneWithPIE, как если бы вы вызывали обычный метод клона: 

$('.someEl').cloneWithPIE().appendTo(newParent)

Надеюсь, что это работает для вас.

...