contextXN

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/smoothness/jquery-ui.css">
<div class="t" style="margin:5px 10px 15px 20px; padding:20px 15px 10px 5px; border-top:10px solid #06F; border-right:5px solid #06F; border-bottom:15px solid #06F; border-left:20px solid #06F;">
margin:5px 10px 15px 20px;<br />
padding:20px 15px 10px 5px;<br />
border-top:10px solid #06F;<br />
border-right:5px solid #06F;<br />
border-bottom:15px solid #06F;<br />
border-left:20px solid #06F;</div>
<div class="t" id="bfrei" style="border:none;margin:5px; padding:0; z-index:1;">
margin:5px;<br />
padding:0;<br />
border:none;</div>
<div class="t" style="margin:0; padding:3px 6px 9px 12px; border:0;">
margin:0;<br />
padding:3px 6px 9px 12px;<br />
border:0;</div>
<div style="clear:both; height:1px;">&nbsp;</div>
<div class="t" style="outline: 2px solid #09C;margin: 5px;padding:3px;">
outline: 2px solid #09C;<br />
margin: 5px;<br />
padding:3px;</div>
<div class="t" id="rgba" style="background-color:rgba(0,80,200,0.5);margin: 2px 4px 6px 8px;padding:8px 6px 4px 2px; border:3px solid #396;">
background-color:rgba(0,80,200,0.5);<br />
margin: 2px 4px 6px 8px;<br />
padding:8px 6px 4px 2px;<br />
border:3px solid #396;</div>
<div class="t" style="background:url(../../img/tango_hintergrund.jpg) no-repeat; color:white; margin:3px; padding:5px;">
background:url(../../img/tango_hintergrund.jpg) no-repeat;<br />
margin:3px;<br />
padding:5px;<br />
color:white;</div>
<div style="clear:both; height:1px;">&nbsp;</div>
<div class="t" id="mpfrei" style="outline:10px solid #999; margin:6px; padding:8px;">
outline:10px solid #999;<br />
margin:6px;<br />
padding:8px;<p style="margin: -5px;">&lt;p style="margin: -5px;"&gt;&lt;/p&gt;</p></div>
<div class="t" style="border: 5px solid #00C; margin:5px 5px 5px 20px;padding:3px;">
border: 5px solid #00C;<br />
margin:5px 5px...

CSS

body {
    font-family: Arial;}

.ui-context {
    position: absolute;
    cursor: default;
    z-index: 100000;}
.ui-context ul {
    padding: 2px;
    list-style:none;
    list-style-type:none;
    margin: 0;
    min-width:150px;
    background: #eee;
    color: #000;
    text-shadow: 0px 1px #fff;
    font-size: 12px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    border: 1px solid #999;}

.ui-context ul li {
    position:relative;
    padding: 3px 6px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;}

.ui-context ul li.on { color:#323232; }
.ui-context ul li.on:hover {
    border: 1px solid #CFBFFF;
    padding: 2px 5px;
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.03, rgb(229,233,255)),
    color-stop(1, rgb(240,241,255))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(229,233,255) 3%,
    rgb(240,241,255) 100%
);}
.ui-context ul li.off { color:#888;}
.ui-context ul li.off:hover {
    border: 1px solid #BBB;
    padding: 2px 5px;
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.5, rgb(232,232,232)),
    color-stop(1, rgb(247,247,247))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(232,232,232) 50%,
    rgb(247,247,247) 100%
);}

.ui-context ul li.ui-context-separator {
    height: 1px;
    border-top: 1px solid #ccc;
    padding: 0;
    margin: 1px 0 0 0;
    background-color: #fff;}

.ui-context ul li.ui-context-expand span { width:16px; height:16px; position:absolute; right:2px; top:2px;}
.ui-context ul li.ui-context-expand ul {
    display: none;
    position:absolute;
    left:100%;
    top: 0;}
.ui-context ul li.ui-context-expand:hover ul { display: block; }

.ui-context-shadow {
  -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
  -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
  box-shadow: 5px 5px 5px rgba(0,0,0,0.4);}

.ui-context-properties-overlay...

JavaScript

$.widget("ui.contextxn", {
    // default options
    options: {
        shadow: true,
        cls:{
            box    : 'ui-context',
            items  : 'ui-context-items',
            expand : 'ui-context-expand',
            sep    : 'ui-context-separator',
            shadow : 'ui-context-shadow'
        },
        callbacks:{}
    },
    // Внутренняя функция.
    // Выполняется для каждого элемента из переданного набора.
    _create: function() {
        var self = this;
        $(self.element).bind('contextmenu',function(event){
            self._createBox(event);
            event.preventDefault();
        });
    },
    _createItem : function(name, f, oEvent){
        var o = this.options;
        return $('<li class="'+o.cls.items+
            ((typeof(f.control == 'function') && f.control(oEvent)) ? ' on' : ' off')+'">'+name+'</li>')
            .click(function(event){
                event.preventDefault();
                if (typeof(f.foo) == 'function' && $(this).is('.on')) {
                    f.foo(oEvent);
                }
            });
    },
    _createBox : function( oEvent ) {
        var self = this,
        o = self.options;

        // Не должно здесь находиться. Перенести при рефакторинге. ////
        if (typeof($('body').data().xn) == 'object') {               //
            $($('body').data().xn.link)                              //
                .attr('style',$('body').data().xn.style);            //
            $('.ui-context-properties-overlay').remove();            //
            $(document).unbind('click').removeData('xn');            //
        }                                                            //
        ///////////////////////////////////////////////////////////////

        // Если меню не существуем - создаем его
        if (!$('#contextXN').length) {
            var context = $('<div id="contextXN"><ul></ul></div>')
            .addClass(o.cls.box+' '+((o.shadow) ? o.cls.shadow : ''))
           ...