[英]How to include jQuery in Chrome app?
I need access to some jQuery methods in my Chrome app, but am unsure how to include the API. 我需要在Chrome应用中访问一些jQuery方法,但我不确定如何包含API。 I'm new to front-end development and am basically looking for some kind of .h #include
parallel to what I normally do with more C-like languages. 我是前端开发的新手,我基本上都在寻找某种.h #include
与我通常用更多类C语言做的平行。
In my manifest.json, I tried adding a path to a downloaded version of jQuery: 在我的manifest.json中,我尝试添加一个下载版本的jQuery的路径:
{
"name": "my first app",
"manifest_version": 2,
"version": "0.0.1",
"minimum_chrome_version": "36.0.1941.0",
"app": {
"background": {
"scripts": [ "./assets/js/main.js", "./assets/third-party/js/jquery-2.1.1.js"]
}
}
}
In my main.js file: 在我的main.js文件中:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create(
"index.html",
{
innerBounds: {width: 800, height: 510, minWidth: 800}
});
});
In my index.js, I don't have visibility to any width() method: 在我的index.js中,我没有任何width()方法的可见性:
(function() {
var ui = {
update: null,
};
var initializeWindow = function() {
console.log("Initializing window...");
for (var k in ui) {
var id = k.replace(/([A-Z])/, '-$1').toLowerCase();
var element = document.getElementById(id);
if (!element) {
throw "Missing UI element: " + k;
}
ui[k] = element;
}
ui.update.addEventListener('click', onUpdateClicked);
console.log("done initializing window");
};
var onUpdateClicked = function() {
console.log("update button was clicked");
updateProgressBar(0.25);
};
var updateProgressBar = function(percent) {
var elem = document.getElementById("progressbar");
console.log("Updating progress bar...");
var progress_width = percent * elem.width() / 100;
elem.find('div').animate({ width: progress_width }, 500).html(percent + "% ");
};
window.addEventListener('load', initializeWindow);
}());
Scripts defined in the manifest only apply to background event page (where you probably don't need jQuery at all). 清单中定义的脚本仅适用于后台事件页面(您可能根本不需要jQuery)。
To use jQuery in index.html
, you should reference a local copy of it in a <script>
tag. 要在index.html
使用jQuery,您应该在<script>
标记中引用它的本地副本。 Be careful to include it in the right order. 小心按正确顺序包含它。
That said, there's a problem with your code. 也就是说,您的代码存在问题。
You are mixing up DOM elements and jQuery "elements". 你正在混合DOM元素和jQuery“元素”。
var elem = document.getElementById("progressbar");
returns a DOM element. 返回一个DOM元素。 You can convert it to a jQuery element with $(elem)
, or query the jQuery way instead: 您可以使用$(elem)
将其转换为jQuery元素,或者以jQuery方式查询:
var elem = $("#progressbar");
Once you do that, you'll have access to jQuery methods. 完成后,您将可以访问jQuery方法。
PS I put "elements" in quotation marks because jQuery methods manipulate "sets of matched elements" instead. PS我把“元素”放在引号中,因为jQuery方法操纵“匹配元素集”。 In this case, a single element matches an id query. 在这种情况下,单个元素与id查询匹配。
You need to add the path to the downloaded library in your html. 您需要在html中添加下载库的路径。
In index.html
, just before your closing body tag: 在index.html
,就在关闭正文标记之前:
...
<!-- JavaScript -->
<script src="assets/third-party/js/jquery-2.1.1.js"></script>
</body>
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.