var TstFunction = function() { $('div#fake_alert').html("<p>I just ran javscript from menu with images</p>"); };
var Menu_w_Imgs = [
{"<img class='goog_img' src='imgs/Transparent.gif' width='1' height='1'>Google": "http://www.google.com"},
{"<img class='yahoo_img' src='imgs/Transparent.gif' width='1' height='1'>Yahoo": "http://www.yahoo.com"},
{"<img class='js_img' src='imgs/Transparent.gif' width='1' height='1'>javascript": function() { TstFunction(); }},
{"<img class='cnn_img' src='imgs/Transparent.gif' width='1' height='1'>CNN": "http://www.cnn.com"} ];
$('button[id$="menu_w_imgs"]').menuoptions({
"Data": Menu_w_Imgs,
"MenuOptionsType": "Navigate",
"ColumnCount" : 1,
"Window" : "new",
"ShowAt":"bottom",
"Sort":[] });
var TestFunction = function() { $('div#fake_alert').html("<p>I just ran javscript from plain menu</p>"); };
var SimpleMenu = [{"javascript": function() { TestFunction(); }},
{"Google": "http://www.google.com"},
{"Yahoo": "http://www.yahoo.com"},
{"CNN": "http://www.cnn.com"} ];
$('button[id$="menu_plain"]').menuoptions({
"Data": SimpleMenu,
"MenuOptionsType": "Navigate",
"Window" : "new",
"ColumnCount" : 1
});
var Menu_w_Dividers =[ { 'Search' :'divider' },
{"<img class='goog_img' src='imgs/Transparent.gif' width='1' height='1'>Google": "http://www.google.com"},
{"<img class='yahoo_img' src='imgs/Transparent.gif' width='1' height='1'>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)"} ],
"Sort": [],
});
<div id=main_column class="col-md-10 col-xs-10">
<div class="row">
<div class="col-md-3 col-xs-2" style='height:40px'>
<div id=buttons>
<button class="jq_button" type="button" id="menu_plain" >Menu</button>
</div>
</div>
<div class="col-md-3 col-xs-4 " style='height:40px'>
<div id=buttons>
<button class="jq_button" type="button" id="menu_w_imgs" >Menu with images</button>
</div>
</div>
<div class="col-md-4 col-xs-4 " style='height:40px'>
<div id=buttons>
<button class="jq_button" type="button" id="menu_divs_filts" >Menu with dividers & filters</button>
</div>
</div>
</div>
<div id=fake_alert></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">
