Skip to content
This repository
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

executable file 201 lines (175 sloc) 7.608 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Menu Title Demo - jQuery contextMenu Plugin</title>
    <meta name="description" content="simple contextMenu generator for interactive web applications based on jQuery" />

    <script src="../jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../src/jquery.ui.position.js" type="text/javascript"></script>
    <script src="../src/jquery.contextMenu.js" type="text/javascript"></script>
    <script src="../screen.js" type="text/javascript"></script>
    <script src="../prettify/prettify.js" type="text/javascript"></script>
    
    <link href="../src/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
    <link href="../screen.css" rel="stylesheet" type="text/css" />
    <link href="../prettify/prettify.sunburst.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-8922143-3']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>
</head>
<body>
    <a id="github-forkme" href="https://github.com/medialize/jQuery-contextMenu"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
    <div id="container">
    <h1><a href="https://github.com/medialize/jQuery-contextMenu">jQuery contextMenu</a></h1>
    
    <ul class="menu">
        <li><a href="../index.html">About</a></li>
        <li class="active"><a href="../demo.html">Demo</a></li>
        <li><a href="../docs.html">Documentation</a></li>
        <li><a href="http://rodneyrehm.de/en/">Author</a></li>
    </ul>
    
    <h2 id="demo">Demo: Menu Title</h2>
    <div class="inline-spaces">
<div class="context-menu-one box menu-1">
    <strong>without title</strong>
</div>
<div class="context-menu-two box menu-1">
    <strong>with CSS title</strong>
</div>
<div class="context-menu-three box menu-1">
    <strong>with data title</strong>
</div>
    </div>
    
    <h3 id="css">Example CSS: Menu Title</h3>
    <style type="text/css" class="showcase">
/* menu header */
.css-title:before {
    content: "some CSS 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;
}
    </style>

    <h3 id="code">Example code: Menu Title</h3>
    <script type="text/javascript" class="showcase">
$(function(){
    // register regular menu
    $.contextMenu({
        selector: '.context-menu-one',
        callback: function(key, options) {
            var m = "clicked: " + key;
            window.console && console.log(m) || alert(m);
        },
        items: {
            "edit": {name: "Edit", icon: "edit"},
            "cut": {name: "Cut", icon: "cut"},
            "copy": {name: "Copy", icon: "copy"},
            "paste": {name: "Paste", icon: "paste"},
            "delete": {name: "Delete", icon: "delete"},
            "sep1": "---------",
            "quit": {name: "Quit", icon: "quit"}
        }
    });
    
    // register menu with title provided by CSS
    $.contextMenu({
        selector: '.context-menu-two',
        className: 'css-title',
        callback: function(key, options) {
            var m = "clicked: " + key;
            window.console && console.log(m) || alert(m);
        },
        items: {
            "edit": {name: "Edit", icon: "edit"},
            "cut": {name: "Cut", icon: "cut"},
            "copy": {name: "Copy", icon: "copy"},
            "paste": {name: "Paste", icon: "paste"},
            "delete": {name: "Delete", icon: "delete"},
            "sep1": "---------",
            "quit": {name: "Quit", icon: "quit"}
        }
    });
    
    // register menu with title provided by data-attribute
    $.contextMenu({
        selector: '.context-menu-three',
        className: 'data-title',
        callback: function(key, options) {
            var m = "clicked: " + key;
            window.console && console.log(m) || alert(m);
        },
        items: {
            "edit": {name: "Edit", icon: "edit"},
            "cut": {name: "Cut", icon: "cut"},
            "copy": {name: "Copy", icon: "copy"},
            "paste": {name: "Paste", icon: "paste"},
            "delete": {name: "Delete", icon: "delete"},
            "sep1": "---------",
            "quit": {name: "Quit", icon: "quit"}
        }
    });
    
    // set a title
    $('.data-title').attr('data-menutitle', "Some JS Title");
});
    </script>

    <h3 id="html">Example HTML: Menu Title</h3>
    <div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
    
    
    <h2>jQuery Context Menu Demo Gallery</h2>
    <ul id="demo-list">
        <li><a href="../demo.html">Simple Context Menu</a></li>
        <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
        <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
        <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>

        <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
        <li><a href="callback.html">Command's action (callbacks)</a></li>

        <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
        <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
        <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
        <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>

        <li><a href="disabled-menu.html">Disabled Menu</a></li>
        <li><a href="disabled.html">Disabled Command</a></li>
        <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
        <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>

        <li><a href="accesskeys.html">Accesskeys</a></li>
        <li><a href="sub-menus.html">Submenus</a></li>

        <li><a href="input.html">Input Commands</a></li>
        <li><a href="custom-command.html">Custom Command Types</a></li>
        
        <li class="current"><a href="menu-title.html">Menus with titles</a></li>

        <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
        <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
        <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
    </ul>
    </div>
</body>
</html>
Something went wrong with that request. Please try again.