1

我无法使 jQuery UI 不确定的进度条在 Rails 应用程序中正常工作。我的工作基于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 应用程序中的关键代码如下：

应用程序.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 } );
                             });

应用程序.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;
}

所以我认为我将图像放在正确的位置。有什么建议么？

4

3 回答 3

2

我对 indeterminate 有同样的问题progressbar。我建议您直接从ThemeRoller页面下载主题包（页面底部有一个名为 Themes 的链接）：

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

提取您要使用的特定主题文件夹 - 在您的情况下smoothness。animated-overlay.gif应该包含在主题的图像文件夹中。

就我而言，我没有这个.gif，所以没有动画。一旦我.gif在主题的images文件夹中添加了它，它就可以工作了。:)

于 2013-05-04T07:48:03.873 回答
0

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

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

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

我仍在尝试弄清楚如何使动画正常工作，但也要提交表单。

更新：此时我的 (ugh) hacky 解决方法是使用 Microsoft.jQuery.Unobtrusive.Ajax (@Html.BeginForm -> @Ajax.BeginForm) 将表单制作成 Ajax 表单，然后在提交表单时稍作延迟通过 jQuery。这有点难看，但到目前为止它的工作原理

于 2013-09-05T23:50:43.697 回答
0

即使我使用的应用程序是纯简 ASP.NET 网站并且服务器端语言是 C#，我也想对此进行回复。

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

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

在 IE 中打开 DOM Explorer 窗口后，在等待期间，我能够在 Styles 窗口中选择进度条 div，查看 CSS 属性，并确认它已识别并保持启用 GIF 文件作为背景。这意味着进度条确实显示了动画 GIF。

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

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

当然，所有这些都在另一篇 StackOverflow 帖子中进行了讨论和诋毁。

于 2015-10-21T15:57:30.220 回答