Действительно ли возможно использовать jQuery для управления элементами XUL?
Итак, ваша проблема заключается в том, как вы управляете изменением выбора type.
var p = new CanvasState(document.getElementById('mainCanvas'),type);
Каждый раз, когда вы меняете выбор, вы создаете новый CanvasState, в который вы добавляете EventListener. Дело в том, что вы никогда не удаляете эти EventListener, и вы явно не удаляете свой предыдущий CanvasState.
Итак, когда вы рисуете свои первые линии или прямоугольники, все работает нормально, потому что есть только один CanvasState. Но как только вы выбираете другой тип, создается второй CanvasState, который будет использовать новый тип.
Вы можете легко решить эту проблему, создав метод setType(newType) в CanvasState для вызова его в функции changeHandler.
Затем вы должны создать свой CanvasState вне этой функции и сохранить ссылку на него, чтобы вы могли вызвать myCanvas.setType(newType).
РЕДАКТИРОВАТЬ:
Более «современным» решением было бы извлечь функцию обработки из ваших вызовов addEventListener как метод, подобный:
handleMouseUp(event, type) {
// Here your code for mouseUp
// Edit the references to use the fields from "this"
}
canva.addEventListener("mouseup", (e) => this.handleMouseUp(e, this.type), true);
Таким образом, вы не ограничены средой eventListener / canvas «this», но можете получить доступ ко всем полям, которые вы установили для CanvasState. [1122 ]
3 ответа
Фактически XUL и HTML точно так же работают с непрозрачностью, и именно jQuery неправильно определяет, что может делать браузер. jQuery думает, что он находится в другом браузере, когда находится внутри XUL, поэтому эффекты непрозрачности обрабатываются по-другому - с помощью jQuery. Поскольку он ЕСТЬ в Firefox и должен нормально работать с непрозрачностью, вы можете переопределить это следующим образом:
jQuery.support.opacity = true
Сделайте это сразу после загрузки jQuery.
Вероятно, существует целая категория аналогичных исправлений, которые можно применить к jQuery, чтобы улучшить его работу, но я не обращал на это внимания.
Я задавался вопросом это сам недавно. Очевидно, DHTML не имеет смысла, но основного синтаксического сахара, и вещи, как известно по слухам, работают.
- Существует этот jQuery на обсуждении XUL от группы jQuery, которая указывает, что это загружается за некоторыми исключениями.
- Также посмотрите это немного более свежее сообщение в блоге о jQuery и DHTML в XUL. Тот человек следует за HTML в XUL, который не является точно, в чем Вы нуждаетесь, но у него действительно есть хорошая информация.
Краткий ответ: Да
Длинный ответ:
Я сам экспериментировал с этим. Я мог использовать его только ограниченно. Возможна манипуляция элементами 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.