JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<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://code.jquery.com/ui/1.11.0/themes/redmond/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" />
<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" href="#"><span...
CSS
/*! jQuery UI - v1.11.0 - 2014-07-10
* http://jqueryui.com
* Includes: core.css, draggable.css, resizable.css, selectable.css, sortable.css, accordion.css, autocomplete.css, button.css, datepicker.css, dialog.css, menu.css, progressbar.css, selectmenu.css, slider.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2C%20Helvetica&fwDefault=normal&fsDefault=1em&cornerRadius=5px&bgColorHeader=%230162a7&bgTextureHeader=flat&bgImgOpacityHeader=55&borderColorHeader=%23555555&fcHeader=%23ffffff&iconColorHeader=%23ffffff&bgColorContent=%23ffffff&bgTextureContent=flat&bgImgOpacityContent=100&borderColorContent=%23555555&fcContent=%23333333&iconColorContent=%230162a7&bgColorDefault=%23ffffff&bgTextureDefault=flat&bgImgOpacityDefault=85&borderColorDefault=%23555555&fcDefault=%23333333&iconColorDefault=%230162a7&bgColorHover=%230162a7&bgTextureHover=flat&bgImgOpacityHover=75&borderColorHover=%23555555&fcHover=%23ffffff&iconColorHover=%23ffffff&bgColorActive=%23ffffff&bgTextureActive=flat&bgImgOpacityActive=100&borderColorActive=%23555555&fcActive=%23ff9900&iconColorActive=%23ff9900&bgColorHighlight=%23fffccb&bgTextureHighlight=flat&bgImgOpacityHighlight=55&borderColorHighlight=%23ff9900&fcHighlight=%23363636&iconColorHighlight=%23ff9900&bgColorError=%23ffeaea&bgTextureError=flat&bgImgOpacityError=95&borderColorError=%23cc0000&fcError=%23cc0000&iconColorError=%23cc0000&bgColorOverlay=%23aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=%23aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px&ctl=themeroller
* Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin:...
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 ||...