0

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

コードビハインドから他のクライアント側関数を呼び出すことはできますが、JQueryCSSはクライアント側でのみ機能するようです。

これが私が呼んでいるコードです：

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

これが違いを生むかどうかはわかりません-私はJuiceUIプログレスバーを使用しています-通常のdivで動作するようです。

そのソースは次のとおりです。

<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>

CSSで：

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

TIA

4

2 に答える 2

2

まず、RegisterStartupScript で追加するスクリプトは不要なので、削除できます。

http://juiceui.com/controls/progressbarには、JuiceUI でアニメーション化されたプログレスバーを作成する機能の例があります。これはページの 2 番目の例です (奇妙なことに、例 1 というラベルが付いています)。

そこにコードをコピーしただけのようですが、これは良いスタートです。次のステップは、それらの css クラスがページの <head> の <style> タグで正しく定義されていること、またはそれらが正しく読み込まれている css ファイルにあることを確認することです。最後に、css クラスが宣言されている場所に対して、pbar-ani.gif ファイルへのパスが正しいことを確認します。

編集

以下のコメントに基づいて、これはより実行可能なソリューションになります。

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');

別のオプションは、「anibar」クラスを削除することです。これにより、コントロールの外観が元の状態に戻ります。

$('.anibar').removeClass('anibar');
于 2012-05-01T14:54:37.820 に答える
1

ブラウザに JavaScript エラーが表示されますか?

言いにくいのですが、いくつか確認させていただきます...

1.)起動スクリプトがページにレンダリングされるまでにjqueryはロードされていますか(「$」が定義されていますか)?

2.) スクリプトがページに配置されると、DOM/JuicUI はレンダリングを完了しますか? そうでない場合は、スクリプトを jquery ドキュメントにラップできますか?

3.)「.ui-progressbar-value」は正しいセレクターですか?それはコンテンツを含む要素ですか、それとも背景画像を表示可能にするためにさらに css が必要ですか (高さ、幅など)?

4.) この CSS を適用するには、スタイルシートではなく分離コードの JavaScript が本当に必要ですか?

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

于 2012-05-01T02:02:24.770 に答える