# Wijmo

This is an example of how to retheme one of the Wijmo jQuery UI components to match the Twitter 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 Input

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

# Select a Date Range with datepicker

    // 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 );
        }
    });

# jqGrid

### 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');

# Font Awesome

### Toolbar with Font Awesome

Shuffle No Repeat Once All

    //####### 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 (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)

- Open...
- Save
- Delete

    // 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();