JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" type="text/css" href="http://217.194.4.51/themes/626sgi/style/calendar.css" />
<link rel="stylesheet" type="text/css" href="http://217.194.4.51/themes/626sgi/style/style.css" />
<link rel="stylesheet" type="text/css" href="http://217.194.4.51/themes/626sgi/style/print.css" />
<link rel="stylesheet" type="text/css" href="http://217.194.4.51/includes/css/jquery/626sgi/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://217.194.4.51/includes/css/jquery/626sgi/jquery-ui-extra.css" />
<link rel="stylesheet" type="text/css" href="http://217.194.4.51/includes/css/jquery/dialogExtend.css" />
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<br/>
<br/>
<div class="jqSplitButton">
<div align="center" class="jqButtonSet">
<button reload="true" link="?folder=linee&id_azienda=3&id_sede=12&revisione=0&search=&what=visite&name=98_3&file=includes%2FaddVisitaEsame" close="1" sizey="700" sizex="950" data-button-icon="age-add" title="Aggiungi Visita" class="ui-button ui-widget ui-state-default ui-button-text-icon-primary JQPopup" type="button"><span class="ui-icon age-icon age-icon-add ui-button-icon-primary"></span><span class="ui-button-text">Aggiungi Visita</span>
</button>
<button data-button-icon="ui-triangle-1-s" title="Apri il menu" class="ui-button ui-widget ui-state-default ui-button-icon-only" type="button"><span class="ui-icon ui-icon-triangle-1-s ui-button-icon-primary"></span><span class="ui-button-text"> </span>
</button>
</div>
<ul class="jqMenu ui-menu ui-widget ui-widget-content ui-menu-icons" id="ui-id-2" role="menu" tabindex="0" style="display: none; top: 700px; left: 921.35px;" aria-activedescendant="ui-id-3">
<li aria-haspopup="true" class="ui-menu-item" id="ui-id-3" tabindex="-1" role="menuitem"><span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><a title="Inserimento Multiplo"...
JavaScript
/**
* Inizializza un menu jQuery.
*
* @param {Object} el
* @param {Object} trigger
* @returns {Object}
*/
function initJqMenu(el, trigger) {
var $this = $(typeof el == 'object' ? el : this);
if (!$this.data('uiMenu')) {
// inizializzo menu
$this.menu()
.find('a[disabled]')
.parent('li')
.addClass('ui-state-disabled');
// se è specificato un trigger
if (trigger) {
// lego il menu al trigger
$(trigger).click(function () {
$('.jqSplitButton > .jqMenu').not($this).hide();
if ($this.is(':hidden')) {
$this.show().position({
my: "left top",
at: "left bottom",
of: this
});
$(document).one("click", function () {
$this.hide();
});
} else {
$this.hide();
}
return false;
});
}
// recupero eventuali sottomenu
var submenu = $this.find('.jqSubMenu');
if (submenu.length == 0 && $this.height() >= 400) {
$this.css({
"max-height": '400px',
"overflow-x": 'auto'
});
} else submenu.each(function () {
var l = 0,
k;
var a = $('> li > a', this).each(function () {
l = Math.max(l, $(this).text().trim().length);
});
if (l < 10) {
k = 8;
} else if (l < 20) {
k = 7;
} else k = 6;
a.css('min-width', (l * k) + 'px');
});
}
return $this;
}
/**
* Inizializza tutti i menu jquery.
*
* @param {String} parent
* @returns {Object}
*/
function initAllJqMenu(parent) {
// inizializzazione menu
return $('.jqMenu', parent ||...