Abrir nueva ventana con action dentro de

publicado por: Anonymous

Este menú funciona muy bien, abre las páginas dentro de la misma ventana, pero no me deja abrir en una nueva ventana.

Lo he intentado ya de varias maneras pero nada pero no logro abrir una nueva ventana.

Este es mi código:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cmenu.js"></script>
<link type="text/css" rel="stylesheet" href="cmenu.css" />
<script>
$(document).ready(function(){
    $('.menu').cmenu();
});
</script>
<table border=7 ALIGN=CENTER width="100%">
    <tr>
      <td>
         <br>
         <table>
            <br>
            <center>
               <tr>
                  <td width="210">
                     <br><br>
                  </td>
                  <td>
                     <ul class="menu">
                        <li  action="index.php" label="Inicio">
                           <img src="images/index.png" />
                        </li>
                        <li   action="nuevo.php" label="Nuevo Registro">
                           <img src="images/nuevo.png" />
                        </li>
                        <li   action="reportes.php" label="Reportes">
                           <img src="images/reportes.png" />
                        </li>
                     </ul>
                  </td>
                  <td width="210">
                     <br><br>
                  </td>
               </tr>
            </center>
            <tr>
               <td>
                  <br><br>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

Archivo cmenu.css

.menu{
    list-style: none;

}
.selected{
    background-color: #EFF8FF;
    z-index:1;
    position:absolute;
    height:150px;
    width: 128px;
    border-radius:5px;
    border: 1px solid #5DA9D1;
    display:none;
    text-align: center;
    border:1px solid #5DA9D1;
}
.selected label{
    font-weight: bold;
    font-family: Arial;
    font-size: 11px;
    color:#4C43F9;
    position:relative;
    top:128px;

}
.menu li{
    /* position:relative; */
    float:left;
    height:128px;
    width:128px;
    cursor: pointer;
    border-radius:5px;
}
.menu li img{
    position:absolute;
    z-index:10;
}
.container{
    background-color: white;
    margin:0 auto;
    width: 960px;
}

Archivo jquery.cmenu.js

(function($){
    $.fn.cmenu=function(){
     return  this.each(function(){
         var cmenu=$(this);
         var menuItems=cmenu.find('li');
         menuItems.bind('mouseover',function(event){
                    var prevDiv=$(this).find('.selected');
                    if (prevDiv.size()==1){
                            prevDiv.show();
                        }
                        else{
                            var div= $('<div>');
                            var label= $('<label>');
                            div.addClass('selected');
                            label.html($(this).attr('label'));
                            div.append(label);
                            $(this).prepend(div);
                            $(this).find('.selected').show();
                        }
                })
        menuItems.bind('mouseout',function(event){
            cmenu.find('.selected').hide();
        })
        cmenu.find('img').bind('click',function(event){
           var action = $(this).parent().attr('action');
           location.href=action;
        });
     });// end fn.cmenu
 }
})(jQuery);

Y por último el archivo jquery-1.4.2.min.js
este lo puedes descargar de https://blog.jquery.com/2010/02/19/jquery-142-released/ porque esta muy extenso.

solución

Las páginas se abren en la misma ventana porque en jquery.cmenu.js tienes esto:

var action = $(this).parent().attr('action');
location.href=action;

Si quieres que se abra en una nueva ventana podrías hacer algo como esto:

var action = $(this).parent().attr('action');
window.open(action);

Edición a partir de tus comentarios en esta respuesta.

Para modificar el código y que algunos enlaces se abran en la misma ventana y otros en una venta/pestaña nueva, lo que puedes hacer es añadir un nuevo atributo al li que especifique el “objetivo” (target) del li. Para ello puedes usar data-atributos (y ya de paso actualizar el action y cambiarlo a data-action para que el código sea válido.

La idea sería hacer algo como esto en el HTML:

<ul class="menu">
    <li data-target="_new" data-action="index.php" label="Inicio">
        <img src="images/index.png" />
    </li>
    <li data-target="_new" data-action="nuevo.php" label="Nuevo Registro">
        <img src="images/nuevo.png" />
    </li>
    <li data-target="_self" data-action="reportes.php" label="Reportes">
        <img src="images/reportes.png" />
    </li>
</ul>

Y cambiar el código en jquery.cmenu.js en esta parte:

cmenu.find('img').bind('click',function(event){
   var action = $(this).parent().attr('data-action');
   var target = $(this).parent().attr('data-target');
   if (target == "_new") {
       window.open(action);
   } else {
       location.href=action;
   }
});

Esto lo que hará es permitirte especificar la página a enlazar (con data-action) y el método (con data-target). En enlace de las dos primeras imágenes de la lista se abrirá en una ventana/pestaña nueva, mientras que la última se abrirá en la misma ventana.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *