1

これらは、<div>進行状況バー (jquery ui 進行状況バー) を表すために使用される 2 つの のコードです。

<div style="margin-left: 10px; margin-right: 10px; font-size: 10px;" id="progressbar2"> </div>
<div style="margin-left: 10px; margin-right: 10px; font-size: 10px;" id="progressbar"> </div>

これは、値を設定し、進行状況バーの値を取得するために使用される jquery です。

<script>   
$(document).ready(function() {
    var progValue1 = <%=ProgValue1%>;   
    var progValue2 = <%=ProgValue2%>;    
    $("#progressbar").progressbar({ value: progValue1});   
    $("#progressbar2").progressbar({ value: progValue2 });   
});   
</script>

バックエンド コードでは、プログレス バーの値を次のように転送します。

private int _progValue1 = 100;
private int _progValue2 = 30;

public int ProgValue1 { get { return this._progValue1; } set { _progValue1 = value; } }
public int ProgValue2 { get { return this._progValue2; } set { _progValue2 = value; } }

確認ボタンがクリックされたとき、これは進行状況バーの値を変更するためにクリック メソッドで使用されるコードです。

this.ProgValue1 = 0;
this.ProgValue2 = 100;

このようにして、progressbar の値を 100 から 0 に変更し、progressbar2 の値を 30 から 100 に変更するだけです。

最初の進行状況バーが徐々に 0 に減少し、progressbar2 が 100 に増加しているかのようにアニメーション化できるように値を変更する方法はありますか?

事前にサンクス

4

1 に答える 1

2

以下のものを見てください...

<html>
<head>
<link type="text/css" href="jquery-ui-1.8.22.custom.css" rel="Stylesheet" />

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript">
var increase = 0;
var decrease = 100;

$(document).ready(function() {
    var anim = setInterval(function(){
        $("#progressbar1").progressbar({
            value: increase ++          
        });
        $("#progressbar2").progressbar({
            value: decrease --          
        });
        if(increase == 100){
            // clearInterval(anim);
            increase = 0;
            decrease = 100;
        }
    }, 50);
});
  </script>
</head>
<body>
 <div id="progressbar1" style="width: 500px; height: 15px;"></div><br />
 <div id="progressbar2" style="width: 500px; height: 15px;"></div>
</body>
</html>

この行のコメントを削除すると、アニメーションが停止しますclearInterval(anim)

お役に立てれば！

于 2012-08-05T08:49:17.887 に答える