Я знаю, что можно интегрировать jQuery в аддоны Firefox, но можем ли мы манипулировать (анимировать, перемещать, настраивать прозрачность и т.д.) сами элементы XUL?
Из того, что я понимаю, аддон Firefox может использовать jQuery для управления элементами HTML/DOM, но не уверен в элементах XUL.
XUL и HTML действительно имеют дело с непрозрачностью точно так же, и именно jQuery неправильно определяет, что может сделать браузер. jQuery думает, что это в другом браузере, когда он живет внутри XUL, и поэтому эффекты прозрачности обрабатываются по-разному - с помощью jQuery. Поскольку он находится в Firefox, и он должен иметь дело с непрозрачностью нормально, вы можете переопределить его так:
jQuery.support.opacity = true
Сделайте это сразу после загрузки jQuery.
Вероятно, существует целая категория подобных исправлений, которые могут быть применены к jQuery, чтобы заставить ее вести себя лучше, но я не смотрел на нее.
Короткий ответ: Да
Длинный ответ:
Я сам с ним экспериментировал. Я мог использовать его только ограниченным образом. Возможно манипулирование элементами 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.
Мне это недавно было интересно. Очевидно, что DHTML не имеет смысла, но основной синтаксический сахар и вещи, по слухам, работают.
Ответ прямо сейчас "в основном".
Основные работы, включая выбор, удаление и поиск. Я использую 1.5.2 довольно сильно как внутри расширения, так и на контентных страницах из расширения.
$. ready() также не работает, потому что jQuery принимает и ждет тело. Это commit, который сломал его.
Некоторые вещи не работают, потому что, как описывает @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 создает a, а затем заполняет ее с помощью innerHTML. Разделы XUL не поддерживают innerHTML, поэтому код поддержки не указывает на то, что ничего не поддерживается. На самом деле есть билет, открытый и обсуждаемый для 1.7 - http://bugs.jquery.com/ticket/5206.
Мое объяснение относится к 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. Я доволен тем, что вручную изменил эту строку в исходном коде для моего приложения.
Cheers, Andy
К сожалению, jQuery не инициализируется в XUL из-за специфичных для HTML функций, таких как document.body, которые существуют только для HTML-страниц. Однако существует специальная ветвь jQuery-xul, которая оптимизирована для использования в расширениях FireFox. Я проверил, он отлично работает.