jQuery.contextMenu - Title Demo

https://github.com/medialize/jQuery-contextMenu/issues/50#issuecomment-6060439

by vijayweb

HTML

<link rel="stylesheet" href="http://medialize.github.com/jQuery-contextMenu/src/jquery.contextMenu.css">
<script src="http://medialize.github.com/jQuery-contextMenu/src/jquery.ui.position.js"></script>
<script src="http://medialize.github.com/jQuery-contextMenu/src/jquery.contextMenu.js"></script>
<div id="wrap">

<p>without a class identifier but with DOM selector
    <br/>
<ul>
    <li><a href="#">click 1</a></li>
    <li><a href="#">click 2</a></li>
    <li><a href="#">signup (click here)</a></li>
</ul>
    <br/><br/>
       <p>with a class identifier
           <br/>
<ul id="vj">
    <li><a href="#">click 1</a></li>
    <li><a href="#">register (click here)</a></li>
    <li><a href="#">click 3</a></li>
</ul>
  <br/><br/>

<p>without a class identifier or DOM selector
   <br/>

<input type="button" value="submit">
    
    </div>

CSS

#wrap {
    
 margin:30px;   
    
}
}

/* menu header */
.css-title:before {
    content: "some title";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background: #DDD;
    padding: 2px;
    
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
}
.css-title :first-child {
    margin-top: 20px;
}


/* menu header via data attribute */
.data-title:before {
    content: attr(data-menutitle);
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background: #DDD;
    padding: 2px;
    
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
}
.data-title :first-child {
    margin-top: 20px;
}


/* demo trigger boxes */
.box {
    color: #EEE;
    background: #666;
    font-weight: bold;
    padding: 20px;
    text-align: center;
    font-size: 20px;
    margin: 5px 0;
}
.box:hover {
    background: #777;
}
.box > * {
    display:block;
}
.menu-injected { background-color: #C87958; }
.box.context-menu-disabled { background-color: red; }

JavaScript

$(function(){
    $.contextMenu({
        selector: 'a,input',
        className: 'data-title',
        callback: function(key, options) {
           
 var rightArrowParents = [];
      $(this).parents().not('html').each(function() {
          var entry = this.tagName.toLowerCase();
          if (this.className) {
              entry += "." + this.className.replace(/ /g, '.');
          }
          rightArrowParents.push(entry);
      });
      rightArrowParents.reverse();
            alert("DOM Tree: " + rightArrowParents.join(" "));
            
            
            
        },
        items: {
            "edit": {name: "Track this link", icon: "edit"},
          
        }
    });
});
$('.data-title').attr('data-menutitle', "Get Link ID");


$(document).ready(function () {$('ul li').eq(2).click(function () {var linkname = "signup tracked"; alert(linkname); });});
$(document).ready(function () {$('#vj li').eq(1).click(function () {var linkname = "register tracked"; alert(linkname); });});
$(document).ready(function () {$('input:button[value=submit]').click(function () {var linkname = "submission tracked"; alert(linkname); });});