Question

我在asp.net控件中使用以下JQuery UI代码。

<script type="text/javascript">

        $(document).ready(function () {

            $(".Accordion").accordion({
                heightStyle: "content"
            });

            $(".special").button();

            $(".radio").buttonset();

            //$(".tabs").tabs();
            $(".tabs").tabs();

        });

    </script>

并且代码工作正常，直到我决定将所有控件放在更新面板中。在回发后，所有样式都从控件中删除。有什么问题？

Answer 1

您应该修改脚本，因为$（document）.ready（）不适用于更新面板：

function InitCss() {

        $(".Accordion").accordion({
            heightStyle: "content"
        });

        $(".special").button();

        $(".radio").buttonset();

        //$(".tabs").tabs();
        $(".tabs").tabs();

    }

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(InitCss);

代码隐藏相同：

protected void Page_Load(object sender, EventArgs e)
    {
 if (!this.Page.ClientScript.IsStartupScriptRegistered("InitCss"))
        {
            string script = @"function InitCss() {

        $("".Accordion"").accordion({
            heightStyle: ""content""
        });

        $("".special"").button();

        $("".radio"").buttonset();

        //$("".tabs"").tabs();
        $("".tabs"").tabs();

    }

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(InitCss);";
            ScriptManager.RegisterStartupScript(Page, Page.GetType(), "InitCss", script, true);
        }
}

Answer 2

您的初始化仅在文档就绪时运行（不在回发上）。由于您将控件放在UpdatePanel中，因此在回发后会更新任何内容。您也应该在回发后调用初始化。将此代码添加到现有脚本旁边：

<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function(s, e) {
  $(".Accordion").accordion({
                heightStyle: "content"
            });

            $(".special").button();

            $(".radio").buttonset();

            //$(".tabs").tabs();
            $(".tabs").tabs();
}); 
</scipt>

更新面板删除Jquery样式

2 个答案: