2017-06-07 1 views
0

Good Day,SideBar Pas d'affichage dans Ipad

Question J'ai déjà essayer d'appliquer tous les correctifs pour Ipad pour obtenir le travail de menu, comme onclick="" et cursor: pointer;, je l'ai déjà vérifier que le Jquery travaille en mettant: $(document).ready(function(){alert("We accessed the Javascript"); }); Cela fonctionne dans chaque périphérique, mais dans Ipad ne fonctionne pas du tout, ne reconnaît pas le clic et ne change pas non plus la classe de style.

J'utilise comme blueprint cet exemple, puis je le personnalise, donc ça n'a pas beaucoup changé.

SlideMenu

est ici le grand code, désolé: S:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" 
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:f="http://java.sun.com/jsf/core" 
     xmlns:c="http://java.sun.com/jsp/jstl/core" 
     xmlns:ui="http://java.sun.com/jsf/facelets" 
     xmlns:p="http://primefaces.org/ui" 
     class="no-js"> 
    <f:view contentType="text/html"> 
     <h:head> 

      <f:facet name="first"> 
       <meta charset="utf-8" /> 
       <meta http-equiv="X-UA-Compatible" content="IE=edge; IE=11; IE=10; IE=9; IE=8; IE=7, chrome=1"/> 
       <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> 
       <title>BBVA</title> 
       <!-- BOOTSTRAP STYLES--> 
       <link href="${request.contextPath}/assets/css/bootstrap.css" rel="stylesheet" media="all" /> 

       <!-- BBVA fonts --> 
       <link href="${request.contextPath}/assets/css/style2.css" rel="stylesheet" media="all" /> 
       <!--SCRIPTS--> 
       <!---Apple Safari iPad and iPhone Meta Tags--> 
       <meta name="viewport" content="width=device-width"/> 
       <meta name="viewport" content="initial-scale=1.0"/> 
       <meta name="viewport" content="width=992, initial-scale=1, user-scalable=no"/><!--width is pixels, range 200 to 10000--> 
       <meta name="format-detection" content="telephone=no"/> <!--disables automatic detection of possible phone numbers--> 
       <meta name="apple-mobile-web-app-capable" content="yes"/><!--specifies full-screen mode--> 
       <meta name="apple-mobile-web-app-status-bar-style" content="black"/><!--specify full-screen mode first--> 
      </f:facet> 
      <!-- Custom BBVA Theme create by: Alejandro Daza --> 
      <link href="${request.contextPath}/assets/css/style.css" rel="stylesheet" media="all" /> 
      <script src="${request.contextPath}/assets/js/bootstrap.min.js"></script> 
      <script src="${request.contextPath}/assets/js/modernizr.custom.js"></script> 
      <script src="${request.contextPath}/assets/js/style1.js"></script> 
      <script src="http://192.168.0.3:1337/vorlon.js"></script> 
      <script src="${request.contextPath}/assets/js/classie.js"></script> 
     </h:head> 
     <h:body> 
      <script> 
       $(document).ready(function(){ 
        //Check if the current URL contains '#' 
        if(document.URL.indexOf("#")==-1){ 
         // Set the URL to whatever it was plus "#". 
         url = document.URL+"#"; 
         location = "#"; 

         //Reload the page 
         location.reload(true); 
        } 
       }); 
      </script> 
      <div class="container pagina"> 
       <div class="col-md-1 col-lg-1 menu2"> 
         <div class="col-md-4 information nopaddingleft nopaddingright"> 
          <ul class="information_menu"> 
           <li class="active" data-id="1"><a href="onboarding"><i class="icon-home_icon"></i></a></li> 
           <li data-id="2"><a id="showmenu1" onclick="" ><i class="icon-menu_icon"></i></a></li> 
           <div class="spacing"></div> 
           <li data-id="3"><a href="#"><i class="icon-settings_icon"></i></a></li> 
           <li data-id="4"><a href="#"><i class="icon-help_icon"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i></a></li> 
          </ul> 
         </div> 
         <!-- Sidebar --> 
         <div class="menunivel1 menunivelleft1" id="menunivel1"> 
          <ul class="information_menunivel1"> 
           <li class="active" data-id="1"><a href="#"> 
            <img src="../assets/img/perfil.png" style=" width: 35%; position: absolute; left: 13px;top: 13px;" /> 
            <ul class="menuPerfil"> 
             <li> 
              Luci Santodomingo 
             </li> 
             <li> 
              Gerente 
             </li> 
             <li> 
              Oficina Calle 123 
             </li> 
             <li> 
              Bogotá 
             </li> 
            </ul> 
           </a></li> 
           <li><a id="showmenu2" href="#" onclick="" ><p>Gestion comercial <span class="icon-forward_icon flechas"></span></p></a></li> 
           <li><a href="#"><p>Cartera de clientes <span class="icon-forward_icon flechas"></span></p></a></li> 
           <li><a href="#"><p>Oportunidades comerciales <span class="icon-forward_icon flechas"></span> </p></a></li> 
           <li><a href="#"><p>Portal de desarrollo comercial <span class="icon-forward_icon flechas"></span> </p></a></li> 
           <li><a href="#"><p>Portal MIS <span class="icon-forward_icon flechas"></span></p></a></li> 
           <li><a href="#"><p>Alerta de fuga</p></a></li> 
          </ul> 
          <!-- Sidebar --> 
          <div class="menunivel2 menunivelleft2" id="menunivel2"> 
           <ul class="information_menunivel2"> 
            <li class="active"> 
             <a href="#"> 
              <ul class="menuPerfil"> 
              </ul> 
             </a> 
            </li> 
            <li ><a id="showmenu3" href="#" onclick=""><p>Citas para hoy <span class="icon-forward_icon flechas"></span></p></a></li> 
            <li><a href="#"><p>Agenda <span class="icon-forward_icon flechas"></span> </p></a></li> 
            <li data-id="4"><a href="#"><p>Reclamos <span class="icon-forward_icon flechas"></span> </p></a></li> 
           </ul> 
           <!-- Sidebar --> 
           <div class="menunivel3 menunivelleft3" id="menunivel3"> 
            <ul class="information_menunivel3"> 
             <li class="active" data-id="1"> 
              <a href="#"> 
               <ul class="menuPerfil"> 
               </ul> 
              </a> 
             </li> 
             <li><a href="#"><p>Propia</p></a></li> 
             <li><a href="#"><p>Mis Ejecutivos </p></a></li> 
            </ul> 
           </div> 
          </div> 
         </div> 
       </div> 
       <!-- Page Content --> 
       <div class="col-md-11 col-lg-11 contenedorderecha clearfix"> 
        <div class="row contenedorModulos clearfix">     
         <h:form id="principalForm"> 
         <ui:insert name="content"/> 
         </h:form> 
        </div> 
       </div> 
      </div> 
      <script> 
       //<![CDATA[ 
       var menunivel1 = document.getElementById('menunivel1'), 
        menunivel2 = document.getElementById('menunivel2'), 
        menunivel3 = document.getElementById('menunivel3'); 

       $("#showmenu1").click(function(){ 
        classie.toggle(this, 'active'); 
        classie.toggle(menunivel1, 'menu1open'); 
       }); 

       $("#showmenu2").click(function(){ 
        classie.toggle(this, 'active'); 
        classie.toggle(menunivel2, 'menu2open'); 
       }); 

       $("#showmenu3").click(function(){ 
        classie.toggle(this, 'active'); 
        classie.toggle(menunivel3, 'menu3open'); 
       }); 
       //]]> 
      </script> 
     </h:body> 
    </f:view> 
</html> 

Comme vous pouvez le voir, je suis en utilisant xhtml, je ne sais pas si cela est lié à la question, ou si est tout Requête primefaces qui interfère avec le fichier jquery.

Je suis avec ce numéro depuis plus de 2 semaines, j'ai la page Web sur un serveur local, pour des raisons de sécurité je vais vous fournir le lien par chat ou par courriel Si vous voulez jeter un coup d'oeil complet.

désolé, mon anglais n'est pas terrible.

Répondre

0

Certaines fonctions jquery dans le Web ne fonctionneront pas de la même manière dans l'IPAD ou tout autre périphérique.

Essayez cette

$('selector').on('click touchstart', function() { 

}); 

$("#showmenu1").on('click touchstart', function(){ 
        classie.toggle(this, 'active'); 
        classie.toggle(menunivel1, 'menu1open'); 
    });