從WebForm代碼隱藏更改使用jQuery的CSS

我想從代碼隱藏中更改html元素的CSS，但它似乎不受影響。客戶端工作。從WebForm代碼隱藏更改使用jQuery的CSS

我可以從代碼隱藏中調用其他客戶端函數，但JQuery CSS似乎只能在客戶端工作。

這裏是我打電話的代碼：

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

來源

2012-05-01 Rivka

首先，您不需要使用RegisterStartupScript添加的腳本，因此您可以將其刪除。

這裏有一個使用JuiceUI創建動畫進度條的功能示例：http://juiceui.com/controls/progressbar。這是頁面上的第二個例子（奇怪的是，標籤爲例1）

它看起來就像你剛剛在那裏複製代碼，這是一個好的開始。下一步是驗證這些css類是否在頁面上<風格>標記<頭>正確定義，或者它們位於正在正確加載的css文件中。最後，驗證pbar-ani.gif文件的路徑是否正確，相對於聲明css類的位置。

編輯

根據您在下面評論，這將是一個更可行的解決方案：

定義兩個單獨的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-01 14:54:37 shellscape

感謝您的回覆。實際上，當我的代碼完成執行時，我正在嘗試使用RegisterStartupScript將.anibar .ui-progress-value樣式更改爲不同的背景圖像。第一次加載頁面時，它看起來不錯，但我需要背景圖片在某個點（服務器端）進行更改。 – Rivka

我已更新我的原始答案，以反映您分享的說明。 – shellscape

你看到在瀏覽器中的任何JavaScript錯誤？

很難說，但我會檢查一些東西......

1）jQuery的是由啓動腳本獲取頁面上呈現時加載（是「$」的定義）？

2.）當腳本進入頁面時，DOM/JuicUI是否完成渲染？如果不是，你可以將腳本包裝在jquery文檔中嗎？ 3.）'.ui-progressbar-value'是否是正確的選擇符，是帶有內容的元素還是需要更多css才能使背景圖像可見（例如高度，寬度）？

4.）你真的需要從代碼隱藏的JavaScript應用此CSS而不是樣式表？

希望這可能會指出你的解決方案。

來源

2012-05-01 02:02:24 brains911

從WebForm代碼隱藏更改使用jQuery的CSS

回答

相關問題