1

Rails アプリケーションで 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 アプリの主要なコードは次のとおりです。

アプリケーション.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>

このコードは、jQuery デモの灰色のアニメーション バーではなく、progressbar div に空白の白いバーを生成します。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

0

ASP.NET の MVC4 アプリで同様の問題が発生しました。

私の問題は、フォームの投稿がアニメーション GIF の GET をキャンセルしたことでした。つまり、本来あるべき場所に配置されていましたが、ナビゲーションによって事前に別の場所にリダイレクトされたため、ロードされていませんでした。

これは、誤って http POST を壊してしまったときに発見しました。

私はまだアニメーションを機能させる方法を見つけようとしていますが、フォームも送信してください。

更新: この時点での私の (うーん) ハッキーな回避策は、Microsoft.jQuery.Unobtrusive.Ajax (@Html.BeginForm -> @Ajax.BeginForm) を使用してフォームを Ajax フォームにし、フォームの送信を少し遅らせることです。 jQuery経由。ちょっと醜いですが、これまでのところ機能しています

于 2013-09-05T23:50:43.697 に答える