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