2012-05-01 3 views
0

html要素のCSSをコードビハインドから変更しようとしていますが、影響を受けていないようです。クライアント側で動作します。WebFormのコードビハインドからJQueryでCSSを変更する

コードビハインドから他のクライアント側の関数を呼び出すことはできますが、JQuery CSSはクライアント側でのみ機能するようです。 - 私はJuiceUIのプログレスバーを使用している - 動作しているよう定期的にdiv要素で、これは違いを作る必要がある場合

Page.ClientScript.RegisterStartupScript(Page.GetType(), 
    "script", 
    "$('.anibar .ui-progressbar-value').css('background-image', 'url(images/pbar-ani.png)');", 
    true); 

わからない:

は、ここで私が呼んでいるコードです。ここで

は、そのためのソースです:CSSと

<div id="divDialog" style="display: none" class="basic-dialog" title="Uploading..." runat="server"> 
    <juice:ProgressBar ID="ProgressBar1" runat="server" Value="100" CssClass="anibar" /> 
    <p> 
     <asp:Label ID="lblMessage" runat="server" Text="Please wait." /> 
    </p> 
</div> 

.anibar 
{ 
    height: 1.6em; 
} 
.anibar .ui-progressbar-value 
{ 
    background-image: url(Images/pbar-ani.gif); 
} 

TIA

答えて

2

まず、RegisterStartupScriptで追加しているスクリプトは不要なので、削除することができます。

ここにJuiceUIでアニメーションプログレスバーを作成する機能的な例があります:http://juiceui.com/controls/progressbarです。ページ上の2番目の例です(例1と表示されています)。

はコードをコピーしたようです。これは良いスタートです。次のステップは、これらのCSSクラスが<スタイルの>タグ<のヘッドに正しく定義されているか、CSSが正しく読み込まれていることを確認することです。最後に、pss-ani.gifファイルへのパスがcssクラスが宣言されている場所を基準にして正しいことを確認します。下記のコメントに基づいて

EDIT

、これはより現実的なソリューションになります:

は、2つの個別のCSSルールを定義します。

.anibar .ui-progressbar-value { background-image: url(Images/pbar-ani.gif); } 
.anibar.loaded .ui-progressbar-value { background-image: url(Images/pbar-ani-other.gif); } 

「ロードされた」を追加する必要がどこ次に、ページ上のプログレスバーにクラス(あなたは何にこれを変更することができます)のjQueryを使用しています。

$('.anibar').addClass('loaded'); 

もう1つの選択肢は、コントロールのルックを元の状態に戻す「アニバー」クラスを削除することです。

$('.anibar').removeClass('anibar'); 
+0

ご返信ありがとうございます。実際には、私がRegisterStartupScriptを使ってやろうとしているのは、コードの実行が終了したときに.anibar .ui-progress-valueスタイルを別の背景イメージに変更することです。ページが最初に読み込まれるときに見栄えは良いですが、特定のポイント(サーバー側)で変更するには背景イメージが必要です。 – Rivka

+0

共有した内容を反映するために元の回答を更新しました。 – shellscape

1

ブラウザで任意のJavaScriptのエラーが表示されていますか?

)言うのは難しいが、私は...

1.いくつかのことをチェックしますがjqueryの起動スクリプトがページにレンダリングされる時間によってロードされた(「$」を定義しています)か?

2.)スクリプトがページに置かれたときに、DOM/JuicUIがレンダリングされていますか?そうでない場合は、jqueryドキュメントにスクリプトをラップできますか? 012.jpg) '.ui-progressbar-value'は正しいセレクタで、コンテンツを持つ要素ですか、背景画像を表示できるようにするにはもっとCSSが必要ですか(例えば高さ、幅)?

4.)実際にスタイルシートではなくこのCSSを適用するには、コードビハインドから実際にjavascriptが必要ですか?

これが解決策を示してくれることを願っています。

関連する問題