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