function menus () {
var Menu_w_Dividers = {
'Search' :'divider' ,
'Google' :'http://www.google.com' ,
'Yahoo' :'http://www.yahoo.com' ,
'Business' :'divider' ,
'CNBC' :'http://www.cnbc.com' ,
'MarketWatch' :'http://www.MarketWatch.com'
};
$('button[id="menu_divs_filts"]').menuoptions({
'MenuOptionsType': 'Navigate',
'Data': Menu_w_Dividers,
'Filters': [{ 'Biz' : '^(CNBC|MarketWatch)'}, {'Search' :'^(Google|Yahoo)'} ],
'ShowDownArrow': 'white',
'Sort': [],
});
}
function rockers() {
$('input#on_off').menuoptions({"Sort": [],
"Data": { 1: "On", 2:"Off" }, "MenuOptionsType":"Rocker",
"onSelect": function(mo, data) { console.log(data); }
});
$('input#MaleFemale').menuoptions({"Sort": [],
"Data": { 'M': "Male", 'F':"Female" }, "MenuOptionsType":"Rocker",
"onSelect": function(mo, data) { console.log(data); }
});
$('input#TrueFalse').menuoptions({"Sort": [],
"Data": { 'T': "True", 'F':"False" }, "MenuOptionsType":"Rocker",
"onSelect": function(mo, data) { console.log(data); }
});
$('input#YesNo').menuoptions({"Sort": [],
"Data": { 'Y': "Yes", 'N':"No" }, "MenuOptionsType":"Rocker",
"onSelect": function(mo, data) { console.log(data); }
});
$('input#DisableEnable').menuoptions({"Sort": [],
"Data": [ 'Disable','Enable' ], "MenuOptionsType":"Rocker", 'Disabled':false,
"onSelect": function(mo, data) { DisableEnable(data); }
});
}
function DisableEnable ( data ) {
if ( /enable/i.test(data.newVal)) {
$('input#on_off,input#MaleFemale,input#TrueFalse,input#YesNo,button[id="menu_divs_filts"],input#starttime').menuoptions({'Disabled':false});
} else {
$('input#on_off,input#MaleFemale,input#TrueFalse,input#YesNo,button[id="menu_divs_filts"],input#starttime').menuoptions({'Disabled':true});
}
}
function get_hh_mm ( value ) {
var hh = new Date(value).getHours(),
ampm = "PM",
mm = new Date(value).getMinutes();
if ( hh < 12 ) { ampm = "AM";
} else { hh -= 12; }
hh = ( hh === 0 ) ? "12" : hh;
hh = ( hh < 10 ) ? "0" + hh : hh;
mm = ( mm < 10 ) ? "0" + mm : mm;
return hh + ":" + mm + " " + ampm;
}
var AddApptMins = function ( StartTime, Duration ) {
var epoch_time = new Date("Jan 1, " + new Date().getFullYear() + " " + StartTime).getTime() + Duration * 60000;
return get_hh_mm ( epoch_time );
}
function init() {
var last_time = ""
earliest_time = '08:00 AM',
latest_time = '09:40 PM';
$("body").data("alltimes", [ earliest_time ]);
for (var t = 0; t <= 80; t += 1) {
last_time = AddApptMins($("body").data("alltimes")[$("body").data("alltimes").length-1], 20);
$("body").data("alltimes").push(last_time);
if ( last_time === latest_time ) { break; }
}
$('input#starttime').menuoptions({
"Data": $("body").data("alltimes"),
"Filters": [{'AM':'AM'},{'PM':'PM'}],
"ClearBtn": true,
"onSelect": function(e, data) {
console.log(e, data.newVal, data.newCode, data.type );
},
"ShowAt": 'bottom',
"DisableHiLiting": false, // default is no border hi liting
"ColumnCount": 3,
"Width": 240,
"Height": 200,
"Mask" : 'HH:MM AM',
"Sort": []
});
}
init();
menus();
rockers();
<div id=main_column class="col-md-10 col-xs-10">
<div class="row">
<div class="col-md-4 col-xs-12" style="height:120px">
<button type="button" id="menu_divs_filts" class="btn btn-primary">Menu with dividers & filters</button>
</div>
<div class="col-md-3 col-xs-12 text-left" style="height:120px; ">
<input type=text class="form-control" style='width:140px' name=starttime id='starttime' placeholder='Start time' >
</div>
<div class="col-md-3 col-xs-12 text-right" style="height:180px">
<div style="height:50px;">
<input type=text name=YesNo id='YesNo'>
</div>
<div style="height:50px;">
<input type=text name=TrueFalse id='TrueFalse'>
</div>
<div style="height:50px;">
<input type=text name=MaleFemale id='MaleFemale'>
</div>
<div style="height:50px;">
<input type=text name=on_off id='on_off' >
</div>
</div>
</div> <!-- column 2 (main) -->
<!--// <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> //-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="../dist/js/jquery.menuoptions.js?v_1820"></script>
<link rel="stylesheet" href="../dist/css/menuoptions.css?v_1820">
<link rel="stylesheet" type="text/css" href="css/style.css?v_2339">