Open new window with action inside li

Question

Open new window with action inside li

Navigation

#1 by (4 votes)
#2 by (1 votes)

2

This menu works very well, it opens the pages within the same window, but it does not let me open in a new window.

I have already tried it in several ways but nothing but I can not open a new window.

This is my code:

<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>

Cmenu.css file

.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;
}

File 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);

And finally the file jquery-1.4.2.min.js You can download it from link because it is very extensive.

javascript jquery html

asked by Stravos77 27.08.2016 в 18:50

source

2 answers

4

Instead of action in the% tag, <li> uses a hyperlink <a>

<ul class="menu">
  <li>
    <a href="http://www.google.com" target="_blank">
      <img src="images/index.png" />
    </a>
  </li>
  <li>
    <a href="http://es.stackoverflow.com/" target="_blank">
      <img src="images/nuevo.png" />
    </a>
  </li>
  <li>
    <a href="reportes.php" target="_blank">Reportes
      <img src="images/reportes.png" />
    </a>
  </li>                     
</ul>

In the href attribute you place the url you want to go to, and in the target attribute you place where you want the link to be opened, in this case you put _blank so that it opens in a new tab.

answered by 27.08.2016 в 19:55

Pass boolean value between custom forms - Windows Form Program that calculates the average and varianca gives different results with the calculator?

score 1 · Accepted Answer

The pages open in the same window because in jquery.cmenu.js you have this:

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

If you want it to open in a new window you could do something like this:

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

Edit from your comments in this answer.

To modify the code and some links open in the same window and others in a new sale / tab, what you can do is add a new attribute to li that specifies the "target" ( target ) of li . For this you can use data-atributos (and already step by step update the action and change it to data-action for the code to be valid.

The idea would be to do something like this in the 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>

And change the code in jquery.cmenu.js in this part:

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;
   }
});

This will allow you to specify the page to link (with data-action ) and the method (with data-target ). The link of the first two images in the list will open in a new window / tab, while the last one will open in the same window.