主页 javascript 加载事件

Question

我在我的母版页中添加了一个新菜单我应该在母版页中使用 javascript 函数来设置我的菜单，我第一次加载页面时一切正常但是当我点击我的菜单项时重定向到另一个 aspx 页面 master 中的 setupmenu () 函数不起作用这是我的代码

<%@ Master Language="VB" AutoEventWireup="false" CodeFile="MasterPage.master.vb"
    Inherits="MasterPage" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Qualipro Net</title>
    <script type="text/javascript">
    $( document ).ready(function() {
        function setupmenu() {
            $("#section-menu")
        .accordion({
            "header": "a.menuitem"
        })
        .bind("accordionchangestart", function (e, data) {
            data.newHeader.next().andSelf().addClass("current");
            data.oldHeader.next().andSelf().removeClass("current");
        })
        .find("a.menuitem:first").addClass("current")
        .next().addClass("current");

            $('#section-menu .submenu').css('height', 'auto');
        }
        });
        </script>
         <script  src="js/scripts.js" type="text/javascript"></script>
        <script  type="text/javascript" src="js/jqPlot/jquery.jqplot.min.js"></script>
        <script  type="text/javascript" src="js/jqPlot/plugins/jqplot.barRenderer.min.js"></script>
        <script  type="text/javascript" src="js/jqPlot/plugins/jqplot.pieRenderer.min.js"></script>
        <script  type="text/javascript" src="js/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
        <script  type="text/javascript" src="js/jqPlot/plugins/jqplot.highlighter.min.js"></script>
        <script  type="text/javascript" src="js/jqPlot/plugins/jqplot.pointLabels.min.js"></script>
        <script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/jquery-ui/jquery.ui.core.min.js"></script>
        <script src="js/jquery-ui/jquery.ui.widget.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui/jquery.ui.accordion.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui/jquery.effects.core.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui/jquery.effects.slide.min.js" type="text/javascript"></script>
        <body id="Body1" dir="ltr" runat="server">
    <form id="form1" runat="server">
      <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
           <asp:Panel ID="panelAModif" runat="server" align="left" CssClass="panelmod">
                    <div class="grid_2">
                        <div class="box sidemenu">
                            <div class="block" id="section-menu">
                                <ul class="section menu">
                                    <li><a class="menuitem">G.R.H</a>
                                        <ul class="submenu">
                                            <li><a >Employés</a> 
                                            </li>
                                            <li><a runat="server"  href="~/employe/RemplacerPersonne.aspx">Remplacer Personne</a> </li>
                                        </ul>
                                    </li>
                                    <li><a class="menuitem">Documentation</a>
                                        <ul class="submenu">
                                            <li><a>Documents internes</a> </li>
                                     </ul>
                                    </li>
                                    <li><a class="menuitem">Audits</a>
                                        <ul class="submenu">
                                            <li><a>Audits</a> </li>

                                        </ul>
                                    </li>
                                    <li><a class="menuitem">Actions</a>
                                        <ul class="submenu">
                                            <li><a>Actions</a> </li>
                                            <li><a>Demandes d'actions</a> </li>
                                            <li><a>Modèle d'actions</a> </li>

                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </asp:Panel>
      </asp:ContentPlaceHolder>
    </form>
    </body>

我没有找到从另一个内容页面调用 javascript 函数的解决方案。提前致谢

Answer 1

第一个问题：

您的 javascript/jQuery 脚本必须在包含 jQuery 之后出现，否则它将不知道 $ 的含义。

例如按此顺序：

<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $( document ).ready(function() {
        function setupmenu() {
            $("#section-menu")
        .accordion({
            "header": "a.menuitem"
        })
        .bind("accordionchangestart", function (e, data) {
            data.newHeader.next().andSelf().addClass("current");
            data.oldHeader.next().andSelf().removeClass("current");
        })
        .find("a.menuitem:first").addClass("current")
        .next().addClass("current");

            $('#section-menu .submenu').css('height', 'auto');
        }
   });
</script>

目前，您的 jQuery 代码是第一位的，甚至在 jQuery 被包含之前。

第二题：

您的 setupmenu 函数是在 DOM 就绪处理程序的范围内声明的，因此对该匿名函数之外的任何内容都不可见！

将该代码放在任何 DOM 就绪处理程序之外，因为它仅由已经等待 DOM 就绪的事物调用。这将使它成为一个全局函数：

<script type="text/javascript">
    function setupmenu() {
        $("#section-menu")
            .accordion({
            "header": "a.menuitem"
        })
            .bind("accordionchangestart", function (e, data) {
            data.newHeader.next().andSelf().addClass("current");
            data.oldHeader.next().andSelf().removeClass("current");
        })
            .find("a.menuitem:first").addClass("current")
            .next().addClass("current");

        $('#section-menu .submenu').css('height', 'auto');
    }
</script>

主页 javascript 加载事件

master page javascript load event

asp.net

jquery

webforms

master-pages

第一个问题：

第二题：