使用JQuery可拖动UI的Firefox SDK

Firefox SDK using JQuery Draggable UI

本文关键字：Firefox SDK UI 拖动 JQuery 使用      更新时间：2024-04-13

我想使用这个：http://jqueryui.com/draggable/在我的Firefox SDK插件中。

这是一个简单示例的源代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable();
  });
  </script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>

</body>
</html>

我的问题是，我不知道如何处理功能

$(function() {
    $( "#draggable" ).draggable();
  });

在我的内容脚本中，通过使用主脚本和内容脚本之间的端口通信。

不幸的是，您将draggable函数放在了页面脚本中，而不是内容脚本中，这使得通信方式过于复杂。

相反，将所有jQuery文件放在外接程序的data文件夹中，创建一个javascript文件（我们称之为draggable.js）（这是内容脚本），并将draggable函数放在那里。然后像这样使用tabs.attach。

main.js

var tabs = require("sdk/tabs");
var data = require('sdk/self').data;
var worker;
var widget = require("sdk/widget").Widget({
    id: "mozilla-icon",
    label: "My Mozilla Widget",
    contentURL: "http://www.mozilla.org/favicon.ico"
    onClick: function() {
        worker = tabs.activeTab.attach({
            contentScriptFile: [data.url('jquery.js'),
                data.url('jquery-ui.js'),
                data.url('draggable.js')]
        });
        worker.port.on("anything", function(variable) {
            console.log("Got variable: "+variable);
        }
    }
});

然后可以使用draggable.js中的self.port.emit和main.js 中的worker.on与脚本通信

更新：编辑的main.js和draggable.js将如下所示：

draggable.js

$("#draggable").draggable();
self.port.emit("anything", variable);

你应该做任何与这个draggable.js中的页面相关的事情，并且只有在你需要访问任何Firefox sdk模块（这些模块只能在main.js中访问）时才发送变量

相关文章：