Пользовательский интерфейс JQuery внутри скрипта содержимого в Firefox Addon SDK

Я разрабатываю надстройку Firefox, используя Addon Builder. Я использую пользовательский интерфейс JQuery в своей панели дополнений, а также хотел бы использовать его из скрипта содержимого, привязанного к панели. На странице панели все работает нормально. В сценарии содержимого JQuery, похоже, работает, но я не вижу никакого эффекта от вызовов пользовательского интерфейса JQuery, например, в случае ползунка ниже.

Вот часть моего main.js, которая определяет панель:

var panel = require("panel").Panel({
    width: 350,
    height: 400,
    contentURL: require("self").data.url("panel.html"),
    contentStyleFile: data.url("css/jquery-ui-1.8.22.custom.css"),
    contentScriptFile: [
        data.url("js/jquery-1.8.0.js"),
        data.url("js/jquery-ui-1.8.22.custom.min.js"),
        data.url("panel.js")
        ]
});

и вот вызов, который запускает пользовательское событие:

panel.port.emit("loadingDataEvent", t );

В panel.js следующая часть пытается использовать JQuery и JQuery UI. Вызов JQuery завершен успешно, однако вызов пользовательского интерфейса JQuery, который пытается обновить объект ползунка, ни на что не влияет:

self.port.on("loadingDataEvent", function (t) {
    $("#load-counter").html("<br />Not enough data yet. Approx. " + t + " secs. to go...");
    $( "#progressbar" ).progressbar( "option", "value", (60-t)/60*100 );
    document.defaultView.postMessage('{}', '*');
});

В моем panel.html я могу без проблем использовать как JQuery, так и JQueryUI, включив их обычным способом:

<link type="text/css" href="css/jquery-ui-1.8.22.custom.css" rel="Stylesheet" />    
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
 ...
<script>
  $(function() {
    $( "#tabs" ).tabs();
    ....
  });
</script>

Любые идеи о том, где я мог сделать ошибку?


jquery firefox-addon jquery-ui firefox-addon-sdk
person ali    schedule 17.08.2012    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Мне потребовалось гораздо меньше времени, чем я ожидал, чтобы найти ответ. Моя ошибка заключалась в том, что я использовал JQuery внутри тегов сценария в html-файле, например, для объявления ползунка, поэтому эти объекты не были доступны для сценария содержимого. Выделение всех скриптов в другой файл и добавление его в список файлов скриптов, которые будет использовать скрипт контента, решило проблему:

var panel = require("panel").Panel({
    width: 350,
    height: 400,
    contentURL: require("self").data.url("panel.html"),
    contentStyleFile: data.url("css/jquery-ui-1.8.22.custom.css"),
    contentScriptFile: [
        data.url("js/jquery-1.8.0.js"),
        data.url("js/jquery-ui-1.8.22.custom.min.js"),
        data.url("panelpage.js"), // <------ this is the new file
        data.url("panel.js")
        ]
});

РЕДАКТИРОВАТЬ:

Через некоторое время после того, как я написал это, я также обнаружил следующее: после того, как data.url("panelpage.js") передается в contentScriptFile, соответствующая ссылка на файл сценария должна быть удалена из HTML-файла, который его включает. между тегами сценария, в противном случае это может вызвать некоторые конфликты.

person ali    schedule 17.08.2012
comment
Спасибо за публикацию решения обратно! - person therealjeffg; 17.08.2012