jQuery-UI的进度栏不显示 [英] jquery-ui progressbar not showing
问题描述
我正在尝试使用jquery-ui在Rails中向应用程序添加一个简单的进度栏.我正在关注以下示例: http://jqueryui.com/progressbar/
I'm trying to add a simple progress bar to my application in rails using jquery-ui. I'm following this example: http://jqueryui.com/progressbar/
我创建了div
<div id="progressbar"></div>
在我的JS中，
$(document).ready( function() {
$("#progressbar").progressbar({
value: 37
});
});
但是html中的div没有任何变化-它保持为空且未设置样式(即未对其应用其他CSS).
But nothing happens to the div in the html - it remains empty and unstyled(ie no additional CSS is applied to it).
我检查了我的应用程序中是否包含jquery-ui-特别是，我确定已包含jquery-ui css文件.
I have checked that I have jquery-ui included in my application - in particular, I have made certain the jquery-ui css file is included.
但是，我敢打赌这个问题与我的应用程序中的jquery-ui无法正常工作有关，因为我在使用它和工具提示功能时遇到了另一个问题，我在这里进行了询问:定位jQuery工具提示
However, I am willing to bet the problem has something to do with jquery-ui not working properly in my app, because I was having another issue with it and the tooltip function, which I asked about over here: positioning jQuery tooltip
这让我发疯，有人有任何想法吗?
This is driving me nuts, does anyone have any ideas?
推荐答案
我现在遇到了同样的问题.
I had the same problem right now.
似乎示例中引用的库不起作用.
我从"Firefox-开发人员工具-浏览器控制台"中收到的错误是:
It seems like the referenced libaries in the example do not work.
The error i get from the "Firefox - Developer Tools - Browser Console" is:
ReferenceError:未定义$
ReferenceError: $ is not defined
(我在Firefox 32.0.3和IE 11上进行了测试)
(I tested on Firefox 32.0.3 and IE 11)
如果仅从" http://jqueryui.com/progressbar/"到本地文件(将其命名为:"testJqueryProgressBar.html")，然后双击它，您将看不到进度栏！
If you just copy the example html/jquery source from "http://jqueryui.com/progressbar/" to a local file (lets call it: "testJqueryProgressBar.html") and double click it, you will see no progress bar!
"testJqueryProgressBar.html"的来源:
Source of "testJqueryProgressBar.html":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//jqueryui.com/resources/demos/style.css">
<script>
$(function()
{
$( "#progressbar" ).progressbar({ value: 37 });
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
因此，我检查了示例标题中的链接，并全部引用了某些内容. 因此链接有效！
Therefore i checked the links in the header of the example and all reference something. So the links are valid!
我什至试图引用另一个提供者(例如)的jquery库. : https://developers.google.com/speed/libraries/devguide?hl = de#jquery-ui . 同样的问题！
I even tried to reference the jquery libs from another provider, f.e. : https://developers.google.com/speed/libraries/devguide?hl=de#jquery-ui. Same problem!
然后我去了 http://jqueryui.com/download/ 选定的版本:1.11.1(对于jQuery1.6 +来说是稳定的) 在底部选择了另一个UI主题
Then i went to http://jqueryui.com/download/ Selected Version : 1.11.1 (Stable, for jQuery1.6+) Selected a different UI theme at the bottom
下载了zip文件，并在我的本地示例testJqueryProgressBar.html中引用了这些未压缩的jquery源，并且有效.
Downloaded the zip and referenced these unziped jquery sources in my local example testJqueryProgressBar.html and it worked.
这篇关于jQuery-UI的进度栏不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
