95 messaggi dal 04 settembre 2007
Buongiorno ho creato una pagina dove ho semplicemente un componente menu.

Il codice è quello sotto:
<asp:Menu ID="ucMenuUser" runat="server" BackColor="#DADAAA" 
  DynamicHorizontalOffset="2" Font-Names="Trebuchet MS" Font-Size="0.8em" 
  ForeColor="#000000" MaximumDynamicDisplayLevels="4" 
  StaticSubMenuIndent="10px" BorderColor="#758D5E" BorderStyle="Solid" 
  BorderWidth="1px" DynamicPopOutImageUrl="~/PRIVATE/img/arrowElencoDestra.png" 
  StaticPopOutImageUrl="~/PRIVATE/img/arrowElencoDestra.png" 
  RenderingMode="List">

  <DynamicHoverStyle BackColor="#FFDBA2"  ForeColor="Black" BorderColor="#758D5E" 
    BorderStyle="Solid" BorderWidth="1px" />
  <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="8px" 
    ForeColor="Black" ItemSpacing="8px" />
  <DynamicMenuStyle BackColor="#FFFBD6" BorderColor="#758D5E" BorderStyle="Solid" 
    BorderWidth="1px" HorizontalPadding="5px" VerticalPadding="5px" />
  <DynamicSelectedStyle BackColor="#FFDBA2" BorderColor="#758D5E" 
    BorderStyle="Solid" BorderWidth="1px" />

  <Items>

    <asp:MenuItem Text="?" Value="?">
      <asp:MenuItem NavigateUrl="~/logout.aspx" Text="Esci dalla tua area riservata" ToolTip="Esci dalla tua area riservata"
        Value="Esci"></asp:MenuItem>
    </asp:MenuItem>

    <asp:MenuItem Text="Dati personali" Value="Dati personali">
      <asp:MenuItem Text="Storia azienda" Value="Storia azienda" 
      NavigateUrl="~/PRIVATE/user/gestioneAnagrafica_storici.aspx"></asp:MenuItem>
      <asp:MenuItem Text="Anagrafica principale" Value="Anagrafica principale" 
      NavigateUrl="~/PRIVATE/user/gestioneAnagrafica_generici.aspx"></asp:MenuItem>
      <asp:MenuItem Text="Modifica la tua password di accesso" Value="Modifica la tua password di accesso"
        NavigateUrl="~/PRIVATE/user/cambiaPassword.aspx"></asp:MenuItem>
    </asp:MenuItem>

  </Items>

  <StaticHoverStyle BackColor="#FFDBA2" ForeColor="Black" BorderColor="#758D5E" 
    BorderStyle="Solid" BorderWidth="1px" />
  <StaticMenuItemStyle VerticalPadding="8px" 
    Width="120px" HorizontalPadding="5px" ItemSpacing="8px" />
  <StaticMenuStyle HorizontalPadding="5px" VerticalPadding="5px" Width="130px" />
  <StaticSelectedStyle BackColor="#FFDBA2" BorderColor="#758D5E" 
    BorderStyle="Solid" BorderWidth="1px" />

</asp:Menu>


Io vorrei fare in modo che questo menu si apra solo sul click e non sul hover del mouse per renderlo compatibile con i sistemi mobile ( smatphone, tablet etc...etc...) poichè voi sapete che l'hover rompe le scatole su tali sistemi.

Ho trovato una funzione che in teoria, se funziona correttamente, dovrebbe permettermi di fare questo, il codice lo vedete sotto.
Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)
 
            Dim stringBuilder As StringBuilder = New StringBuilder()
            Dim stringWriter As StringWriter = New StringWriter(stringBuilder)
 
            Dim htmlWriter As HtmlTextWriter = New HtmlTextWriter(stringWriter)
            MyBase.Render(htmlWriter)
 
            Dim html As String = stringBuilder.ToString()
 
            Dim strMouseHover = "onmouseover=""Menu_HoverStatic(this)"""
            Dim strMouseClick = "onclick=""Menu_HoverStatic(this)"""
 
            Dim str As Boolean = html.Contains(strMouseHover)
 

            html = html.Replace(strMouseHover, strMouseClick)
 
            writer.Write(html)
 
        End Sub


Non capisco come utilizzarla per farla funzionare?

Potete aiutarmi? ho deciso di utilizzare solo i componenti del framework e non componebnti esterni.

Grazie e buona giornata!
11.886 messaggi dal 09 febbraio 2002
Contributi
ciao,
il codice che hai postato probabilmente richiede di creare un nuovo controllo web che derivi da Menu. Poi, viene fatto l'override dal Render affinché il click causi la comparsa del sottomenu anziché il postback. Forse il codice che hai trovato non è proprio esatto, quindi ti farei provare qualcos'altro di meno "invasivo". Devi semplicemente incollare questo codice javascript prima della chiusura del body (o comunque sotto il menu).

<script type="text/javascript">
<%= ucMenuUser.ClientID %>.addEventListener("click", clickMenu, true);
    function clickMenu(e) {

        if(e.target.parentNode.className.indexOf("has-popup")>-1){

            //sto cliccando un elemento che possiede un sottomenu, perciò fermo la propagazione del click
            if (!e) var e = window.event;
            e.cancelBubble = true;
            if (e.stopPropagation) e.stopPropagation();
            if (e.preventDefault) e.preventDefault();

            //inoltre faccio apparire il sottomenu
            Sys.WebForms.Menu._elementObjectMapper.getMappedObject(e.target.parentNode).mouseover();
        }

    }
</script>



cartap75 ha scritto:

ho deciso di utilizzare solo i componenti del framework e non componebnti esterni.

Sì, tuttavia il menu è stato creato vari anni fa, quando non era ancora popolare il concetto di responsive web design. Dato che la tua applicazione deve essere ben visibile anche su mobile, prova ad impaginarla con Bootstrap, appena giunto alla versione 3. Questo che vedi qui, ad esempio, è un menu di navigazione che risponde al click come chiedevi tu.
http://getbootstrap.com/javascript/#dropdowns

ciao,
Moreno
Modificato da BrightSoul il 11 agosto 2013 14.07 -

Enjoy learning and just keep making
95 messaggi dal 04 settembre 2007
Buongiorno e grazie prima di tutto,
Ho provato il metodo suggerito inserendo il codice javascript dopo il menu, ma il menu si pare sempre con l'hover e non sul click.

Sembra non funzionare il codice javascript.

Sto sbagliando qualcosa?

Sotto ti posto il codice comprensivo del tuo codice javascript.

<body>
    <form id="form1" runat="server">
    <div style="overflow: hidden; margin: 0 auto; width: 980px">

    <div style="float: left; width: 160px">
      <div style="position: relative; z-index: 10000">

        <!--MENU PRINCIPALE-->
        <%--<uc1:menuUser ID="menuUser1" runat="server" />--%>
        <asp:Menu ID="ucMenuUser" runat="server" BackColor="#DADAAA" DynamicHorizontalOffset="2"
          Font-Names="Trebuchet MS" Font-Size="0.8em" ForeColor="#000000" MaximumDynamicDisplayLevels="4"
          StaticSubMenuIndent="10px" BorderColor="#758D5E" BorderStyle="Solid" BorderWidth="1px"
          DynamicPopOutImageUrl="~/PRIVATE/img/arrowElencoDestra.png" StaticPopOutImageUrl="~/PRIVATE/img/arrowElencoDestra.png"
          RenderingMode="List" ClientIDMode="AutoID">
          <DynamicHoverStyle BackColor="#FFDBA2" ForeColor="Black" BorderColor="#758D5E" BorderStyle="Solid"
            BorderWidth="1px" />
          <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="8px" ForeColor="Black"
            ItemSpacing="8px" />
          <DynamicMenuStyle BackColor="#FFFBD6" BorderColor="#758D5E" BorderStyle="Solid" BorderWidth="1px"
            HorizontalPadding="5px" VerticalPadding="5px" />
          <DynamicSelectedStyle BackColor="#FFDBA2" BorderColor="#758D5E" BorderStyle="Solid"
            BorderWidth="1px" />
          <Items>
            <asp:MenuItem Text="?" Value="?">
              <asp:MenuItem NavigateUrl="~/logout.aspx" Text="Esci dalla tua area riservata" ToolTip="Esci dalla tua area riservata"
                Value="Esci"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="Dati personali" Value="Dati personali">
              <asp:MenuItem Text="Anagrafica principale" Value="Anagrafica principale" NavigateUrl="~/PRIVATE/user/gestioneAnagrafica.aspx">
              </asp:MenuItem>
              <asp:MenuItem Text="Storia azienda" Value="Storia azienda" NavigateUrl="~/PRIVATE/user/gestioneAnagrafica_storia.aspx">
              </asp:MenuItem>
              <asp:MenuItem Text="Modifica la tua password di accesso" Value="Modifica la tua password di accesso"
                NavigateUrl="~/PRIVATE/user/cambiaPasswordUser.aspx"></asp:MenuItem>
            </asp:MenuItem>
          </Items>
          <StaticHoverStyle BackColor="#FFDBA2" ForeColor="Black" BorderColor="#758D5E" BorderStyle="Solid"
            BorderWidth="1px" />
          <StaticMenuItemStyle VerticalPadding="8px" Width="120px" HorizontalPadding="5px"
            ItemSpacing="8px" />
          <StaticMenuStyle HorizontalPadding="5px" VerticalPadding="5px" Width="130px" />
          <StaticSelectedStyle BackColor="#FFDBA2" BorderColor="#758D5E" BorderStyle="Solid"
            BorderWidth="1px" />
        </asp:Menu>
        <!--MENU PRINCIPALE-->

      </div>
    </div>

    <div style="float: left; width: 820px">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>

    <div style="float: right">&nbsp;</div>

    </div>
<script type="text/javascript">
<%= ucMenuUser.ClientID %>.addEventListener("click", clickMenu, true);
    function clickMenu(e) {

        if(e.target.parentNode.className.indexOf("has-popup")>-1){

            //sto cliccando un elemento che possiede un sottomenu, perciò fermo la propagazione del click
            if (!e) var e = window.event;
            e.cancelBubble = true;
            if (e.stopPropagation) e.stopPropagation();
            if (e.preventDefault) e.preventDefault();

            //inoltre faccio apparire il sottomenu
            Sys.WebForms.Menu._elementObjectMapper.getMappedObject(e.target.parentNode).mouseover();
        }

    }
  </script>
    </form>

</body>


Ora sto provando ad utilizzare il secondo suggerimento quello che mi consiglia di utilizzare il javascript bootstrap 3 rc1.

Poi vi faccio sapere!

Grazie ancora per ora!
11.886 messaggi dal 09 febbraio 2002
Contributi
ciao, prego!


ma il menu si pare sempre con l'hover e non sul click.

Sì, perché non ho escluso il comportamento sull'hover. Quel codice javascript ha il solo compito di far aprire il sottomenu anche sul click. Prova a visualizzare la pagina da un dispositivo mobile e il menu dovrebbe ora aprirsi anche al click.

Se vuoi inibire l'hover del tutto, dovresti aggiungere anche quest'altro pezzo di codice al tag <script>.
//gestisco il mouseover e ne arresto la propagazione
<%= ucMenuUser.ClientID %>.addEventListener("mouseover", hoverMenu, true);
function hoverMenu(e) {

    if(e.target.parentNode.className.indexOf("has-popup")>-1){

        if (!e) var e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();
        if (e.preventDefault) e.preventDefault();
    }
}


ciao,
Moreno
Modificato da BrightSoul il 12 agosto 2013 14.23 -

Enjoy learning and just keep making
95 messaggi dal 04 settembre 2007
Buongiorno,

Perfetto, fuziona perfettamente.

Grazie molte!

posto l'intero codice così tutti possono vederlo.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
  <link href="../css/admin.css" rel="stylesheet" type="text/css" />
  <%--<script src="../js/jsxControlloAspMenu.js" type="text/javascript"></script>--%>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div style="overflow: hidden; margin: 0 auto; width: 980px">

    <div style="float: left; width: 160px">
      <div style="position: relative; z-index: 10000">

        <!--MENU PRINCIPALE-->
        <%--<uc1:menuUser ID="menuUser1" runat="server" />--%>
        <asp:Menu ID="ucMenuUser" runat="server" BackColor="#DADAAA" DynamicHorizontalOffset="2"
          Font-Names="Trebuchet MS" Font-Size="0.8em" ForeColor="#000000" MaximumDynamicDisplayLevels="4"
          StaticSubMenuIndent="10px" BorderColor="#758D5E" BorderStyle="Solid" BorderWidth="1px"
          DynamicPopOutImageUrl="~/PRIVATE/img/arrowElencoDestra.png" StaticPopOutImageUrl="~/PRIVATE/img/arrowElencoDestra.png"
          RenderingMode="List" ClientIDMode="AutoID">
          <DynamicHoverStyle BackColor="#FFDBA2" ForeColor="Black" BorderColor="#758D5E" BorderStyle="Solid"
            BorderWidth="1px" />
          <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="8px" ForeColor="Black"
            ItemSpacing="8px" />
          <DynamicMenuStyle BackColor="#FFFBD6" BorderColor="#758D5E" BorderStyle="Solid" BorderWidth="1px"
            HorizontalPadding="5px" VerticalPadding="5px" />
          <DynamicSelectedStyle BackColor="#FFDBA2" BorderColor="#758D5E" BorderStyle="Solid"
            BorderWidth="1px" />
          <Items>
            <asp:MenuItem Text="?" Value="?">
              <asp:MenuItem NavigateUrl="~/logout.aspx" Text="Esci dalla tua area riservata" ToolTip="Esci dalla tua area riservata"
                Value="Esci"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="Dati personali" Value="Dati personali">
              <asp:MenuItem Text="Anagrafica principale" Value="Anagrafica principale" NavigateUrl="~/PRIVATE/user/gestioneAnagrafica.aspx">
              </asp:MenuItem>
              <asp:MenuItem Text="Storia azienda" Value="Storia azienda" NavigateUrl="~/PRIVATE/user/gestioneAnagrafica_storia.aspx">
              </asp:MenuItem>
              <asp:MenuItem Text="Modifica la tua password di accesso" Value="Modifica la tua password di accesso"
                NavigateUrl="~/PRIVATE/user/cambiaPasswordUser.aspx"></asp:MenuItem>
            </asp:MenuItem>
          </Items>
          <StaticHoverStyle BackColor="#FFDBA2" ForeColor="Black" BorderColor="#758D5E" BorderStyle="Solid"
            BorderWidth="1px" />
          <StaticMenuItemStyle VerticalPadding="8px" Width="120px" HorizontalPadding="5px"
            ItemSpacing="8px" />
          <StaticMenuStyle HorizontalPadding="5px" VerticalPadding="5px" Width="130px" />
          <StaticSelectedStyle BackColor="#FFDBA2" BorderColor="#758D5E" BorderStyle="Solid"
            BorderWidth="1px" />
        </asp:Menu>
        <!--MENU PRINCIPALE-->

      </div>
    </div>

    <div style="float: left; width: 820px">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    
    <div style="float: right">&nbsp;</div>

    </div>
<script type="text/javascript">
<%= ucMenuUser.ClientID %>.addEventListener("click", clickMenu, true);
    function clickMenu(e) {

        if(e.target.parentNode.className.indexOf("has-popup")>-1){

            //sto cliccando un elemento che possiede un sottomenu, perciò fermo la propagazione del click
            if (!e) var e = window.event;
            e.cancelBubble = true;
            if (e.stopPropagation) e.stopPropagation();
            if (e.preventDefault) e.preventDefault();

            //inoltre faccio apparire il sottomenu
            Sys.WebForms.Menu._elementObjectMapper.getMappedObject(e.target.parentNode).mouseover();
        }

    }
//gestisco il mouseover e ne arresto la propagazione
  <%= ucMenuUser.ClientID %>.addEventListener("mouseover", hoverMenu, true);
  function hoverMenu(e) {

    if(e.target.parentNode.className.indexOf("has-popup")>-1){

      if (!e) var e = window.event;
      e.cancelBubble = true;
      if (e.stopPropagation) e.stopPropagation();
      if (e.preventDefault) e.preventDefault();
    }
}

</script>
    </form>

</body>
</html>


Spero possa servire a qualcuno!

Saluti e buona giornata!

Alla prossima!

Per votare questa post come devo fare?
Modificato da cartap75 il 12 agosto 2013 17.07 -

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.