Question

我正在尝试使用jquery-ui在rails中为我的应用程序添加一个简单的进度条。我正在关注这个例子：http://jqueryui.com/progressbar/

我创建div

<div id="progressbar"></div>

在我的JS中我有

$(document).ready( function() {
  $("#progressbar").progressbar({
    value: 37
  });
});

但是html中的div没有任何反应 - 它仍然是空的并且没有样式（即没有额外的CSS应用于它）。

我已经检查过我的应用程序中包含了jquery-ui - 特别是，我已经确定包含了jquery-ui css文件。

但是，我愿意打赌这个问题与jquery-ui在我的应用程序中无法正常工作有关，因为我还有另一个问题和工具提示功能，我在这里问过：{{3 }}

这让我感到疯狂，有没有人有任何想法？

Answer 1

我现在遇到同样的问题。

示例中的引用库似乎不起作用我从“Firefox - 开发人员工具 - 浏览器控制台”获得的错误是：

ReferenceError：$未定义

（我在Firefox 32.0.3和IE 11上测试过）

如果您只是将示例html / jquery源代码从“http://jqueryui.com/progressbar/”复制到本地文件（让我们称之为“testJqueryProgressBar.html”）并双击它，您将看不到进度条！

“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>

因此，我检查了示例标题中的链接以及所有引用内容。所以这些链接是有效的！

我甚至尝试从另一个提供程序引用jquery库，例如。：https://developers.google.com/speed/libraries/devguide?hl=de#jquery-ui。同样的问题！

然后我去了http://jqueryui.com/download/ 选定版本：1.11.1（稳定，适用于jQuery1.6 +）在底部选择了不同的UI主题

下载了zip并在我的本地示例testJqueryProgressBar.html中引用了这些unziped jquery源代码，并且它运行良好。

jquery-ui进度条没有显示

1 个答案: