0

我正在尝试从代码隐藏中更改 html 元素的 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

4

2 回答 2

2

首先，不需要您使用 RegisterStartupScript 添加的脚本，因此您可以将其删除。

这里有一个使用 JuiceUI 创建动画进度条的功能示例：http: //juiceui.com/controls/progressbar。这是页面上的第二个示例（奇怪的是，标记为示例 1）

看起来您刚刚复制了那里的代码，这是一个好的开始。您的下一步将是验证这些 css 类是否在页面上的 <head> 中的 <style> 标记中正确定义，或者它们是否在正确加载的 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-01T14:54:37.820 回答
1

您是否在浏览器中看到任何 javascript 错误？

很难说，但我会检查一些事情......

1.) 启动脚本在页面上呈现时是否已加载 jquery（是否定义了“$”）？

2.) 将脚本放在页面上时，DOM/JuicUI 是否完成渲染？如果没有，您可以将脚本包装在准备好的 jquery 文档中吗？

3.) '.ui-progressbar-value' 是正确的选择器吗？它是一个有内容的元素还是需要更多的 CSS 才能使背景图像可见（例如高度、宽度）？

4.) 你真的需要来自代码隐藏的 javascript 来应用这个 css 而不是样式表吗？

希望这可以为您指明解决方案。

于 2012-05-01T02:02:24.770 回答