MenuOptions - input masks and multi-column autocomplete combined

Examples of Menus positioned at bottom





Code


                
    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#buttons").buttonset().css({"padding":"5px" });
   
            

            
            <div id=main_column class="col-md-10 col-xs-10">
                <div class="row">
                    <div class="col-md-3 col-xs-3 text-right"  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-3 text-right"  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 text-right"  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://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <script src="../dist/js/jquery.menuoptions.js"></script>
  <link rel="stylesheet" href="../dist/css/menuoptions.css?v_1820">
  <link rel="stylesheet" type="text/css" href="css/style.css?v_2339">