Question

我无法在jails应用程序中使jQuery UI不确定进度条正常工作。我的工作基于http://jqueryui.com/progressbar/#indeterminate的jQuery-UI API演示，我正在尝试为我的应用程序调整它。

我试图模仿的jQuery示例代码的关键部分是：

$(function() { $( "#progressbar" ).progressbar({value: false});
<style> #progressbar .ui-progressbar-value {background-color: #ccc;}</style>
<div id="progressbar"></div>

我的Rails应用程序中的关键代码如下：

的application.js：

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree ./sitewide

特定于页面的JS（event.js） - 包含在views / events / new.html.erb中：

$(document).ready(function() { $( '#progressbar' ).progressbar();
                               //$( '#progressbar' ).css({background: '#aa0000'});
                               $( '#progressbar' ).progressbar( { value: false } );
                             });

application.css：

@import url(http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css);

events.css.scss：

#progressbar .ui-progressbar-value { background-color: #ccc; }

视图/活动/ new.html.erb：

<div id="progressbar"></div>
<%= javascript_include_tag "events" %>

在提供的页面中生成HTML：

<div id="progressbar"></div>
<script src="/assets/events.js?body=1" type="text/javascript"></script>

此代码在进度条div中生成一个空白白条，而不是jQuery演示中的灰色动画条。如果我删除document.ready函数中的注释，则栏会变为红色（＃aa0000），但它仍然没有动画，只是静态。我非常感谢任何人对此行为的任何见解。

更新：我找到了以下主题 - https://forum.jquery.com/topic/progressbar-api-redesign#14737000003912014 - 这表明动画叠加GIF文件尚未包含在主题包中，因此我将其下载并安装在assets / images / animated-overlay中.gif，但它仍然无效。我在Smoothness主题CSS文件中找到以下行：

.ui-progressbar .ui-progressbar-overlay {
    background: url("images/animated-overlay.gif");
    height: 100%;
    filter: alpha(opacity=25);
    opacity: 0.25;
}

所以我想我把图像放在了正确的位置。有什么建议吗？

Answer 1

我遇到了与不确定progressbar相同的问题。我建议您直接从ThemeRoller页面下载主题包（页面底部有一个名为Themes的链接）：

http://jqueryui.com/resources/download/jquery-ui-themes-1.10.3.zip

提取您要使用的特定主题文件夹 - 在您的案例smoothness中。 animated-overlay.gif应包含在主题的图片文件夹中。

在我的情况下，我没有这个.gif，所以没有动画。我在主题的.gif文件夹中添加images后就可以了。：）

Answer 2

我在ASP.NET中遇到了与MVC4应用程序类似的问题。

我的问题是表单帖子取消了动画GIF的GET。也就是说，它位于应该的位置，但没有被加载，因为导航事先将其重定向到其他地方。

当我不小心打破了http POST时，我发现了这一点。

我仍然想弄清楚如何让动画工作，但也提交表格。

更新：此时我的（呃）hacky解决方法是使用Microsoft.jQuery.Unobtrusive.Ajax（@ Html.BeginForm - ＆gt; @ Ajax.BeginForm）将表单转换为Ajax表单然后稍微延迟通过jQuery提交表单。这有点难看，但它到目前为止工作

Answer 3

我想回复此问题，即使我使用的应用程序是简单的ASP.NET网站，服务器端语言是C＃。

我注意到在IE 11上，当我测试我的网页时，JqueryUI进度条的后台GIF无效。当我点击“搜索”按钮时，我的主要测试页面显示了不确定的进度条，并且有一个POST回到服务器以启动服务器端方法。在这个页面中，我可以轻松地设置参数，使搜索大约需要30秒。

在Firefox或Chrome中使用相同的代码，当我回发时，进度条背景GIF动画效果很好。在IE中，它没有。

在IE浏览器中打开DOM资源管理器窗口，在等待期间，我可以在样式窗口中选择进度条div，查看CSS属性，并验证它是否已识别并保持启用后台的GIF文件。这意味着进度条确实显示了动画GIF。

当我取消选中样式窗口中的背景框时，GIF按预期消失了。当我重新检查它时，GIF回来了，但它是动画的！

作为最终测试，我始终保持进度条可见并运行应用程序。我注意到GIF最初会显示为动画。但是，当页面回发到网站并等待回复时，GIF将停止制作动画。

当然，所有这些都在another StackOverflow post中进行了讨论和诋毁。

jQuery UI不确定ProgressBar不在Ruby on Rails下动画

3 个答案: