Можно ли использовать jQuery для манипулирования элементами XUL?

Question

Я знаю, что возможно интегрировать jQuery в аддоны Firefox, но можем ли мы управлять (анимировать, перемещать, настраивать прозрачность и т. Д.) Самими элементами XUL?

Насколько я понимаю, аддон Firefox может использовать jQuery для манипулирования элементами HTML / DOM, но не уверен насчет элементов XUL.

Answer 1

Краткий ответ: Да

Длинный ответ:

Я экспериментировал с этим сам. Я мог использовать это только ограниченным образом. Возможно манипулирование элементами XUL. Но мне трудно наблюдать за событиями, так как я довольно плохо знаком с jQuery - я не знаю, как настроить его, чтобы наблюдать за событиями на уровне Firefox / XUL - я даже не знаю, требуется ли настройка: D

Пример:

overlay.xul

<?xml version="1.0"?>    
<?xml-stylesheet href="chrome://testaddon/content/overlay.css" type="text/css"?>

<overlay id="testaddon_overlay"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        xmlns:html="http://www.w3.org/1999/xhtml">

    <script type="application/x-javascript" src="chrome://testaddon/content/jquery-1.4.2.js" />
    <script type="application/x-javascript" src="chrome://testaddon/content/overlay.js" />

    <toolbox id="navigator-toolbox">
        <toolbar toolbarname="TestAddonToolbar" class="chromeclass-toolbar">
            <toolbaritem>
                <toolbarbutton id="btnHide" label="HideMe" onclick="hideMe();" />
            </toolbaritem>            
        </toolbar>
    </toolbox>

</overlay>

overlay.js

function hideMe()
{
    $('#btnHide').hide();
}

Приведенный выше код будет скрывать кнопку при нажатии на нее - основные манипуляции с XUL с помощью jQuery!

Но, как я уже сказал, попробуйте наблюдать за загрузкой документов и другими подобными событиями, и это очень быстро усложняется (или я не знаю много: D).

Обновление: Я попробовал некоторые эффекты. Effects.fadeIn () работает, но поскольку свойства прозрачности в XUL устанавливаются по-разному по сравнению с HTML, кнопка остается там и, в конце концов, внезапно исчезает. Теперь становится ясно, в какой степени мы можем (не можем) использовать jQuery для манипулирования XUL.

Answer 2

XUL и HTML на самом деле работают с непрозрачностью точно так же, и именно jQuery неправильно определяет, что может делать браузер. jQuery считает, что он находится в другом браузере, когда он живет внутри XUL, и поэтому эффекты непрозрачности обрабатываются по-разному - jQuery. Так как он есть в Firefox и должен нормально работать с непрозрачностью, вы можете переопределить это так:

jQuery.support.opacity = true

Сделайте это сразу после загрузки jQuery.

Вероятно, существует целая категория подобных исправлений, которые можно пост-применить к jQuery, чтобы заставить его вести себя лучше, но я не обращал на это внимания.

Answer 3

Мне самому недавно было интересно. Очевидно, что DHTML не имеет смысла, но, по слухам, основной синтаксический сахар и другие вещи работают.

• Это обсуждение jQuery для XUL из группы jQuery указывает на то, что оно загружается с некоторыми исключениями.
• Также см. Этот чуть более свежий пост в блоге о jQuery и DHTML в XUL . Этот человек ищет HTML-код в XUL, который не совсем вам нужен, но у него есть хорошая информация.

Answer 4

Мое объяснение относится к jQuery 1.7.1.

Моя цель состояла в том, чтобы выполнить анимацию затухания в контексте XUL, но возникали ошибки, потому что jQuery ошибочно полагает, что он имеет дело с IE, если jQuery.support.opacity не соответствует действительности.

Логика, которая заполняет объект , поддерживающий , преждевременно возвращал пустой объект из-за невозможности взаимодействия с элементом DOM, созданным с помощью document.createElement ("div") . Моя проблема была решена с помощью document.createElementNS :

createElementNS("http://www.w3.org/1999/xhtml", "div");

Я искал трекер ошибок jQuery после того, как нашел это решение, и нашел следующий связанный запрос: http://bugs.jquery.com/ticket/5206

jQuery не объявляется работающим в контексте XUL, и поэтому у группы нет планов по решению этой проблемы, хотя они должны решить проблему ложного срабатывания IE. Я доволен тем, что вручную изменил эту строку в исходном коде моего приложения.

Ура, Andy

Answer 5

Ответ сейчас "в основном".

Основные вещи работают, включая выбор, удаление и поиск. Я очень интенсивно использую 1.5.2 как внутри расширения, так и на страницах с содержанием.

$. Ready () также не работает, потому что jQuery предполагает и ожидает тело. Это коммит , который сломал его.

Некоторые вещи не работают, потому что, как описывает @Daniel, jQuery не может правильно определить, что он может и чего не может делать в XUL (более подробно ниже) Начиная с пошагового кода jQuery, который я обнаружил, вам нужно как минимум следующие строки в своем собственном коде.

// Workarounds for jQuery not properly testing support in XUL environment

// These are done at jQuery init
// This is actually critical, otherwise elements are not properly removed from the cache and you get a cache[id] is undefined
crowdmash.$.support.deleteExpando = true;

// These are done at ready(), but jQuery never fires ready in XUL
// XUL doesn't seem to support offsetWidth and offsetHeight (without this :hidden is broken which breaks fadeIn)
crowdmash.$.support.reliableHiddenOffsets = false;
crowdmash.$.support.opacity = true;

Если вы хотите использовать jQuery на странице содержимого из расширения, см. Мои подсказки .

jquery-xul изменяет 1.4.4 для лучшей работы с XUL. Я еще не пробовал, но, глядя на его изменения, он выглядит так, как будто он исправляет проблему. Я не знаю, решает ли это проблему поддержки.

В качестве фона вопроса $ .support. Проблема заключается в том, что функция обнаружения jQuery создает и затем заполняет его с помощью innerHTML. Div XUL не поддерживают innerHTML, поэтому код поддержки не помечает ничего как поддерживаемый. На самом деле есть билет, который открыт и обсуждается за 1,7 - http://bugs.jquery.com/ticket/5206.

Answer 6

К сожалению, jQuery не может инициализироваться в XUL из-за специфических для HTML функций, таких как document.body, которые существуют только для страниц HTML. Однако есть специальная ветка jQuery-xul , которая оптимизирована для использования в расширениях FireFox. Я проверил, все отлично работает.