This is an example of how to retheme one of the Wijmo jQuery UI components to match the Bootstrap theme. Whilst a menu component will be arriving to jQueryUI soon, you can find the menu in Wijmo Open.

$("#menu1").wijmenu({
    trigger: ".wijmo-wijmenu-item",
    triggerEvent: "click"
});

$('#file').customFileInput({
    button_position : 'right'
});

// Select a Date Range with datepicker
$( "#rangeBa" ).datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    onClose: function( selectedDate ) {
        $( "#rangeBb" ).datepicker( "option", "minDate", selectedDate );
    }
});
$( "#rangeBb" ).datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    onClose: function( selectedDate ) {
        $( "#rangeBa" ).datepicker( "option", "maxDate", selectedDate );
    }
});

Table with jqGrid

// ############ jqGrid Table
$("#jqGrid01").jqGrid({
    data: mydata,
    datatype: "local",
    height: 250,
    rowNum: 10,
    rowList: [10,20,30],
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:60, sorttype:"int",search:true},
        {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
        {name:'name',index:'name', width:100},
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number"},
        {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},        
        {name:'total',index:'total', width:80,align:"right",sorttype:"float"},        
        {name:'note',index:'note', width:150, sortable:false}        
    ],
    pager: "#jqGridPager01",
    viewrecords: true,
    caption: "Sample jqGrid Table",
    hidegrid:false,
    altRows: true                
});
$("#jqGrid01")
.jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
.jqGrid('setSelection', '3');
            
                

Toolbar with Font Awesome

//####### Toolbar with Font Awesome
$("#play-fa").button({
    text: false,
    icons: {
        primary: "icon-play"
    }
});
$("#stop-fa").button({
    text: false,
    icons: {
        primary: "icon-stop"
    }
});
$("#prev-fa").button({
    text: false,
    icons: {
        primary: "icon-fast-backward"
    }
});
$("#next-fa").button({
    text: false,
    icons: {
        primary: "icon-fast-forward"
    }
});
$("#shuffle-fa").button();
$("#repeat-fa").buttonset();

Buttons with icons (Font Awesome)

Button with icon only Button with icon only Button with icon only

// ############ Button with icon (Font Awesome)
$("#button-with-icon-fa" ).button({
    icons: {
        primary: "icon-lock"
    },
    text: false
});
$("#button-with-icon2-fa" ).button({
    icons: {
        primary: "icon-play"
    },
    text: false
});
$("#button-with-icon3-fa" ).button({
    icons: {
        primary: "icon-stop"
    },
    text: false
});

Split Button (Font Awesome)

// Split Button
$( "#rerun-fa" )
.button()
.click(function() {
    alert( "Running the last action" );
})
.next()
.button({
    text: false,
    icons: {
        primary: "ui-icon-triangle-1-s"
    }
})
.click(function() {
    var menu = $( this ).parent().next().show().position({
        my: "left top",
        at: "left bottom",
        of: this
    });
    $( document ).one( "click", function() {
        menu.hide();
    });
    return false;
}).parent()
.buttonset()
.next()
.hide()
.menu();