Link Tagging

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://vijayweb.com/dompath.js"></script>
<script src="http://medialize.github.io/jQuery-contextMenu/src/jquery.contextMenu.js"></script>
<div id="message" title="Tagging">
<textarea id="sendcode" rows="4" cols="50"></textarea>
</div>
<div id="wrap">

<p>without a class identifier but with DOM selector
    <br/>
<ul>
    <li><a name="reg" href="#">register</a></li>
    <li><a href="#">video start</a></li>
    <li><a href="#">signup </a></li>
</ul>
    <br/><br/>
       <p>with a class identifier
           <br/>
<ul id="list2">
    <li><a href="#">buy now</a></li>
    <li><a href="#">subscribe</a></li>
    <li><a href="#">download now</a></li>
</ul>
  <br/><br/>

<p>without a class identifier or DOM selector
   <br/>
    
<input id="vj" type="button" value="submit">
    
    </div>

CSS

#sendput {
  display:none;
}


#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: 0px;
}


/* 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(){

    $("#message").dialog({
        modal: false,
                position: ["right", "top"],
focus: function( event, ui ) {}
    });

});


$(function(){
    $.contextMenu({
        selector: 'a,input',
        className: 'data-title',
        callback: function(key, options) {

            if (key=="edit")
            {
            var retVal = prompt("Enter link name : ", "enter here");

var linkloc = $(this).getDomPath();

var n=linkloc.lastIndexOf("#"); 
            if (n>=0)
            {
                var linkloc = linkloc.substring(n);
            }
           
                
                var tagline = "$(document).ready(function () {$(\'"+linkloc+"').click(function () {var linkname =\'"+retVal+"'; alert(linkname+\' tracked\'); });});";
                $('#sendcode').val($('#sendcode').val()+tagline+"</br>");
                
             
            }
           
        },
        items: {
            "edit": {name: "Track this link", icon: "edit"},
           

        }
    });
});

$(function(){
    $.contextMenu({
        selector: '*',
        className: 'data-title',
        callback: function(key, options) {

           
            if (key == "paste")
            {
             var retVal = prompt("Enter page name : ", "enter here");
               
            }
        },
        items: {
            "paste": {name: "Name this page", icon: "paste"},
            "fold2": {name: "Set a counter", icon: "copy",
                      
                     "items": {
                            "fold2-key1": {"name": "event1"},
                            "fold2-key2": {"name": "event2"},
                            "fold2-key3": {"name": "event3"},
                             "fold2-key4": {"name": "event4"},
                            "fold2-key5": {"name": "event5"},
                            "fold2-key6": {"name": "event6"},
                             "fold2-key7": {"name": "event7"},
                           ...