Added example menu items

This commit is contained in:
Trevor Parscal 2011-11-29 23:48:11 +00:00
parent 9d34341beb
commit 62be093c65
3 changed files with 46 additions and 3 deletions

View file

@ -71,7 +71,34 @@
}
.es-contextView-menu {
display: none;
position: absolute;
border: solid 1px #cccccc;
-webkit-border-radius: 0.25em;
-moz-border-radius: 0.25em;
-o-border-radius: 0.25em;
border-radius: 0.25em;
background-color: white;
-webkit-box-shadow: 0 0.25em 1em 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 0.25em 1em 0 rgba(0,0,0,0.25);
box-shadow: 0 0.25em 1em 0 rgba(0,0,0,0.25);
padding: 0.33em 0;
}
.es-contextView-menuItem {
padding: 0.33em 1em;
cursor: pointer;
}
.es-contextView-menuItem:hover {
background-color: #b3d6f6;
}
.es-contextView-position-above .es-contextView-menu {
bottom: 7px;
}
.es-contextView-position-below .es-contextView-menu {
top: 8px;
}

View file

@ -10,6 +10,21 @@ es.ContextView = function( surfaceView, $overlay ) {
this.$ = $( '<div class="es-contextView"></div>' ).appendTo( $overlay || $( 'body' ) );
this.$menu = $( '<div class="es-contextView-menu"></div>' ).appendTo( this.$ );
this.$icon = $( '<div class="es-contextView-icon"></div>' ).appendTo( this.$ );
// Example menu items
this.$menu.append(
'<div class="es-contextView-menuItem">Cut</div>' +
'<div class="es-contextView-menuItem">Copy</div>' +
'<div class="es-contextView-menuItem">Paste</div>' +
'<div class="es-contextView-menuItem">Convert</div>' +
'<div class="es-contextView-menuItem">Delete</div>'
);
// Events
var _this = this;
this.$icon.click( function() {
_this.$menu.toggle();
} );
};
/* Methods */
@ -45,4 +60,5 @@ es.ContextView.prototype.set = function() {
es.ContextView.prototype.clear = function() {
this.$icon.hide();
this.$menu.hide();
};

View file

@ -2,9 +2,9 @@
border: solid 1px #cccccc;
position: relative;
-webkit-border-radius: 0.25em;
-moz-border-radius: 0.25e;
-o-border-radius: 0.25e;
border-radius: 0.25e;
-moz-border-radius: 0.25em;
-o-border-radius: 0.25em;
border-radius: 0.25em;
background-image: url(images/fade-up.png);
background-position: bottom left;
background-repeat: repeat-x;