当前位置： 文江博客话题详情

Ajax 更新面板和样式

发布于 2024-09-18 22:12:47 字数 3013 浏览 10 评论 0原文

我有一个用 js 和 css 设计的按钮，每次我单击该按钮（进行回发）时，它都会在更新面板内，它会失去样式吗？

很确定这是一个简单的问题，知道吗？

<html xmlns="http://www.w3.org/1999/xhtml">


    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="Button1" runat="server" class="art-button" Text="Button" />
    </ContentTemplate>
</asp:UpdatePanel>
</form>


function artButtonsSetupJsHover(className) {
var tags = ["input", "a", "button"];
for (var j = 0; j < tags.length; j++){
    var buttons = xGetElementsByClassName(className, document, tags[j]);
    for (var i = 0; i < buttons.length; i++) {
        var button = buttons[i];
        if (!button.tagName || !button.parentNode) return;
        if (!artHasClass(button.parentNode, 'art-button-wrapper')) {
            if (!artHasClass(button, 'art-button')) button.className += ' art-button';
            var wrapper = document.createElement('span');
            wrapper.className = "art-button-wrapper";
            if (artHasClass(button, 'active')) wrapper.className += ' active';
            var spanL = document.createElement('span');
            spanL.className = "l";
            spanL.innerHTML = " ";
            wrapper.appendChild(spanL);
            var spanR = document.createElement('span');
            spanR.className = "r";
            spanR.innerHTML = " ";
            wrapper.appendChild(spanR);
            button.parentNode.insertBefore(wrapper, button);
            wrapper.appendChild(button);
        }
        artEventHelper.bind(button, 'mouseover', function(e) {
            e = e || window.event;
            wrapper = (e.target || e.srcElement).parentNode;
            wrapper.className += " hover";
        });
        artEventHelper.bind(button, 'mouseout', function(e) {
            e = e || window.event;
            button = e.target || e.srcElement;
            wrapper = button.parentNode;
            wrapper.className = wrapper.className.replace(/hover/, "");
            if (!artHasClass(button, 'active')) wrapper.className = wrapper.className.replace(/active/, "");
        });
        artEventHelper.bind(button, 'mousedown', function(e) {
            e = e || window.event;
            button = e.target || e.srcElement;
            wrapper = button.parentNode;
            if (!artHasClass(button, 'active')) wrapper.className += " active";
        });
        artEventHelper.bind(button, 'mouseup', function(e) {
            e = e || window.event;
            button = e.target || e.srcElement;
            wrapper = button.parentNode;
            if (!artHasClass(button, 'active')) wrapper.className = wrapper.className.replace(/active/, "");
        });
    }
}

}

artLoadEvent.add(function() { artButtonsSetupJsHover("艺术按钮"); });

原文

I have a button styled with js and css and its inside an update panel everytime i click the button (do postback) it loses style ?

pretty sure its an easy issue here , any idea ?

<html xmlns="http://www.w3.org/1999/xhtml">


    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="Button1" runat="server" class="art-button" Text="Button" />
    </ContentTemplate>
</asp:UpdatePanel>
</form>


function artButtonsSetupJsHover(className) {
var tags = ["input", "a", "button"];
for (var j = 0; j < tags.length; j++){
    var buttons = xGetElementsByClassName(className, document, tags[j]);
    for (var i = 0; i < buttons.length; i++) {
        var button = buttons[i];
        if (!button.tagName || !button.parentNode) return;
        if (!artHasClass(button.parentNode, 'art-button-wrapper')) {
            if (!artHasClass(button, 'art-button')) button.className += ' art-button';
            var wrapper = document.createElement('span');
            wrapper.className = "art-button-wrapper";
            if (artHasClass(button, 'active')) wrapper.className += ' active';
            var spanL = document.createElement('span');
            spanL.className = "l";
            spanL.innerHTML = " ";
            wrapper.appendChild(spanL);
            var spanR = document.createElement('span');
            spanR.className = "r";
            spanR.innerHTML = " ";
            wrapper.appendChild(spanR);
            button.parentNode.insertBefore(wrapper, button);
            wrapper.appendChild(button);
        }
        artEventHelper.bind(button, 'mouseover', function(e) {
            e = e || window.event;
            wrapper = (e.target || e.srcElement).parentNode;
            wrapper.className += " hover";
        });
        artEventHelper.bind(button, 'mouseout', function(e) {
            e = e || window.event;
            button = e.target || e.srcElement;
            wrapper = button.parentNode;
            wrapper.className = wrapper.className.replace(/hover/, "");
            if (!artHasClass(button, 'active')) wrapper.className = wrapper.className.replace(/active/, "");
        });
        artEventHelper.bind(button, 'mousedown', function(e) {
            e = e || window.event;
            button = e.target || e.srcElement;
            wrapper = button.parentNode;
            if (!artHasClass(button, 'active')) wrapper.className += " active";
        });
        artEventHelper.bind(button, 'mouseup', function(e) {
            e = e || window.event;
            button = e.target || e.srcElement;
            wrapper = button.parentNode;
            if (!artHasClass(button, 'active')) wrapper.className = wrapper.className.replace(/active/, "");
        });
    }
}

}

artLoadEvent.add(function() { artButtonsSetupJsHover("art-button"); });

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

少跟Wǒ拽 2024-09-25 22:12:47

您可能在 onload 事件中设置 js 中的样式，但该事件仅触发一次，然后在每次回发中更新面板不会通过它。您必须像这样附加到 PageRequestManager pageloaded 事件：

在 ScriptManager 声明之后，您编写此代码，并且每次在内部进行回发时脚本都会运行。

<script type="text/jscript">
<!--
 var prm = Sys.WebForms.PageRequestManager.getInstance();
 prm.add_pageLoaded(pageLoaded);

 function pageLoaded(sender, args) {
     document.getElementById("Button1").style.fontWeight = "bold";
 }
-->
</script>

或者直接从 Sys.Application.add_load ：

<script type="text/jscript">
<!--
 Sys.Application.add_load(
     function pageLoaded(sender, args) {
         document.getElementById("Button1").style.fontWeight = "bold";
     });
-->
</script>

You are probably setting the style in js in the onload event, but this event is only fired once and then in every postback the update panel does not pass through it. You have to attach to the PageRequestManager pageloaded event like this:

After the ScriptManager declaration you write this code and the script will run each time you do a postback inside.

<script type="text/jscript">
<!--
 var prm = Sys.WebForms.PageRequestManager.getInstance();
 prm.add_pageLoaded(pageLoaded);

 function pageLoaded(sender, args) {
     document.getElementById("Button1").style.fontWeight = "bold";
 }
-->
</script>

Or directly from Sys.Application.add_load:

<script type="text/jscript">
<!--
 Sys.Application.add_load(
     function pageLoaded(sender, args) {
         document.getElementById("Button1").style.fontWeight = "bold";
     });
-->
</script>
回复 原文
心病无药医 2024-09-25 22:12:47

在某些情况下，我可以想到

  1. 您更改后面代码的样式。
  2. 您使用脚本更改了样式，因此更新后您没有再次运行脚本。
  3. 您更改了按钮的 DOM 位置，因此该样式不再适用于该位置。

.如果您给我们代码也许我们可以看到问题所在。

There are some cases that I can think of

  1. You change the style on code behind.
  2. You change the style with script so after the update you did not run the script again.
  3. You change the DOM potition of your button so the style is not work any more for this position.

.If you give us the code maybe we can see whats the problem.

回复 原文
烟酉 2024-09-25 22:12:47

如果您使用 js 设置样式，则可能需要在页面上的 ScriptManager 中注册该 js。这样脚本将在部分页面回发时加载。

If you're setting styles with js, you may need to register that js with the ScriptManager on the page. That way the script will be loaded on partial page postbacks.

回复 原文
~没有更多了~

关于作者

毁梦

暂无简介

0 文章
0 评论
587 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

苦中寻乐

文章 0 评论 0

lueluelue

文章 0 评论 0

嗼ふ静

文章 0 评论 0

王权女流氓

文章 0 评论 0

与花如笺

文章 0 评论 0

残酷

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文