Mittwoch, 3. August 2016

Implementing a drop down menu like the APEX 5 development environment

Just put this Code in Execute when Page Loads.

-->Selector wrapper is von The JQuery Dialog

-->Selector t-Button--navBar is for The Nav bar Menu

$('#wrapper').dialog({
autoOpen: false,
height: 400,
width: 350,
position: { my: 'right top', at: 'right top+44' },
draggable: false,
//modal: true,
resizable: false,
open: function(event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); },
dialogClass: 'ui-dialog-osx',
buttons: {
"Sign Out": function() {
$(this).dialog("close");
}
}
//closeOnEscape: false,
//title: 'Basic Dialog'
}); $('.t-Button--navBar').click(function() {
if ($('#wrapper').dialog('isOpen') === true) {
$('#wrapper').dialog('close');
} else {
$('#wrapper').dialog('open');
}
return false;
});
jQuery('body')
.bind(
'click',
function(e){
if(
jQuery('#wrapper').dialog('isOpen')
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
){
jQuery('#wrapper').dialog('close');
}
}
);
$(window).resize(function() {
$("#wrapper").dialog({
position: { my: 'right top', at: 'right top+44' }
});
});
$(function() {
$('#wrapper').each(function(k,v){
var box = $(this).dialog({});
$(this).parent().find('.ui-dialog-titlebar-close').hide();
$( "#L38148037721238251717" ).mouseover(function() {
box.dialog( "open" );
}).mouseout(function() {
//box.dialog( "close" );
});
});
});
This is a demo

Keine Kommentare:

Kommentar veröffentlichen