1

次のコードは、IE を除くすべてのブラウザーで問題なく動作するようです。

var d = $('<img src="spinner.gif"/>');
d.dialog({modal:true});

IE では、スピナーが回転しないことを除いて、問題なく動作しているようです (これはアニメーション GIF です)。

どうしたの？

4

4 に答える 4

4

「すべて」を試しましたが、jQueryUI モーダル ダイアログ ボックスで animation.gif スピナーが機能しませんでした。一部のブラウザは正常でしたが、Firefox が動作を拒否していました。理由は何ですか。次に、この非常に優れた非画像スピナーコンポーネントを見つけました。fgnass にすべてのクレジットを与えます。

（注：この投稿の最後に、animation.gifの問題を修正する新しい回答を編集しました）

http://fgnass.github.com/spin.js/

http://twitter.com/fgnass

// Show loading(processing) modal dialog
function showLoading(sTitle, str) {
    if (sTitle==undefined) sTitle = "Processing";
    if (str==undefined) str = "Processing...";
    var strBody = "<div id='spinnerdiv'><div style='padding-left:35px'>" + str + "</div></div>";

    $("#uidialog").html(strBody);   
    $("#uidialog").dialog({
        title: sTitle,
        modal: true, resizable: true, width: "auto", height: "auto",
        close: function(event, ui) { },
        buttons: {
            "Close": function() {
                $(this).dialog("close");
            }
        }
    });

    // must use css spinner, animated gif did not work in every browser
    var opts = {
        lines: 11, length: 7, width: 3, radius: 4, corners: 1,  rotate: 0, 
        color: '#000', speed: 0.7, trail: 38, shadow: false,  hwaccel: true, 
        className: 'spinner', zIndex: 2e9, top: '0', left: '0'
    };
    var target = document.getElementById("spinnerdiv");
    var spinner = new Spinner(opts).spin(target);   
}

私は、Firefox、IE8、Chrome、Opera、Android タブレット (株式および firefoxbeta)、Nokia Lumia800、Nokia C7 ブラウザーを実行しました。すべて正常に動作します。

編集 1 (gif アニメーションを使用)これにより、一部のブラウザーでアニメーション化されない spinner.gif を修正できました。トリックは、html ページの読み込み時にスピナー div を表示状態に保つことです。jQuery init 関数で最初に非表示にします。次に、好きなときにいつでもスピナー div を表示 + 非表示にして、アニメーション化することができます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Spinner Test</title>
  <script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
    var spinner = $("#spinner");
    spinner.hide();
    $("#btnShow").click(function() { onShowClicked(); return false; });
    $("#btnHide").click(function() { onHideClicked(); return false; });
});

function onShowClicked() {
    var spinner = $("#spinner");
    spinner.show();
}

function onHideClicked() {
    var spinner = $("#spinner");
    spinner.hide();
}
</script>
</head>
<body>

<a href="" id="btnShow">SHOW</a> &nbsp;&nbsp; <a href="" id="btnHide">HIDE</a>

<br/><br/>
<div id="spinner"><img src="loader.gif" /></div>

</body>
</html>
于 2013-03-26T18:46:52.880 に答える
0

おそらく、（コンテンツ自体ではなく）包含divでアクションを実行することでうまくいくでしょう。アニメーションGIFを使用してモーダルdivを表示する際に問題が発生したことはありません。

var d = $('<div><img src="spinner.gif"/></div>');
d.dialog({modal:true});
于 2012-05-09T17:51:14.827 に答える
0

私はこのようなことをしています:

$('#someDiv').css('background', '#ddd url("Images/loading.gif") no-repeat 8.1em 50%');
于 2012-07-31T17:38:32.640 に答える
0

私は同じ問題を経験しました。ダイアログを開く直前にsrcを設定してソートしました。

<div id="dvprocessing" style="display:none;">

  <img id="ProcessImg" src="Images/Processing.gif" alt=""/>

</div>

Jscript

document.getElementById("ProcessImg").src = "Images/Processing.gif";
$("#dvprocessing").dialog({
   width: 149,
   height:125,
   modal: true,
   closeOnEscape: false,
   resizable: false,
   draggable: false,
   position: ['center', 'center']
});
$(".ui-dialog-titlebar").hide();   /*To hide the title bar*/
于 2014-08-11T10:51:07.030 に答える