jQuery UI Bootstrap

A Bootstrap-themed kickstart for jQuery UI widgets (v1.0 alpha).

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.

  1. $("#menu1").wijmenu({
  2. trigger: ".wijmo-wijmenu-item",
  3. triggerEvent: "click"
  4. });
  1. $('#file').customFileInput({
  2. button_position : 'right'
  3. });

  1. // Select a Date Range with datepicker
  2. $( "#rangeBa" ).datepicker({
  3. defaultDate: "+1w",
  4. changeMonth: true,
  5. numberOfMonths: 3,
  6. onClose: function( selectedDate ) {
  7. $( "#rangeBb" ).datepicker( "option", "minDate", selectedDate );
  8. }
  9. });
  10. $( "#rangeBb" ).datepicker({
  11. defaultDate: "+1w",
  12. changeMonth: true,
  13. numberOfMonths: 3,
  14. onClose: function( selectedDate ) {
  15. $( "#rangeBa" ).datepicker( "option", "maxDate", selectedDate );
  16. }
  17. });

Table with jqGrid

Sample jqGrid Table
 
Inv No
 
Date
 
Client
 
Amount
 
Tax
 
Total
 
Notes
15/24/2010test0.0010.002111.00note
25/25/2010test20.0020.00320.00note2
39/1/2007test30.0030.00430.00note3
410/4/2007test0.0010.00210.00note
510/5/2007test20.0020.00320.00note2
69/6/2007test30.0030.00430.00note3
710/4/2007test0.0010.00210.00note
810/3/2007test2300.0021.00320.00note2
99/1/2007test3400.0030.00430.00note3
1110/1/2007test200.0010.00210.00note
 
Page of 3
View 1 - 10 of 27

 

  1. // ############ jqGrid Table
  2. $("#jqGrid01").jqGrid({
  3. data: mydata,
  4. datatype: "local",
  5. height: 250,
  6. rowNum: 10,
  7. rowList: [10,20,30],
  8. colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
  9. colModel:[
  10. {name:'id',index:'id', width:60, sorttype:"int",search:true},
  11. {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
  12. {name:'name',index:'name', width:100},
  13. {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number"},
  14. {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
  15. {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
  16. {name:'note',index:'note', width:150, sortable:false}
  17. ],
  18. pager: "#jqGridPager01",
  19. viewrecords: true,
  20. caption: "Sample jqGrid Table",
  21. hidegrid:false,
  22. altRows: true
  23. });
  24. $("#jqGrid01")
  25. .jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
  26. .jqGrid('setSelection', '3');

 

Toolbar with Font Awesome

  1. //####### Toolbar with Font Awesome
  2. $("#play-fa").button({
  3. text: false,
  4. icons: {
  5. primary: "icon-play"
  6. }
  7. });
  8. $("#stop-fa").button({
  9. text: false,
  10. icons: {
  11. primary: "icon-stop"
  12. }
  13. });
  14. $("#prev-fa").button({
  15. text: false,
  16. icons: {
  17. primary: "icon-fast-backward"
  18. }
  19. });
  20. $("#next-fa").button({
  21. text: false,
  22. icons: {
  23. primary: "icon-fast-forward"
  24. }
  25. });
  26. $("#shuffle-fa").button();
  27. $("#repeat-fa").buttonset();

Buttons with icons (Font Awesome)

  1. // ############ Button with icon (Font Awesome)
  2. $("#button-with-icon-fa" ).button({
  3. icons: {
  4. primary: "icon-lock"
  5. },
  6. text: false
  7. });
  8. $("#button-with-icon2-fa" ).button({
  9. icons: {
  10. primary: "icon-play"
  11. },
  12. text: false
  13. });
  14. $("#button-with-icon3-fa" ).button({
  15. icons: {
  16. primary: "icon-stop"
  17. },
  18. text: false
  19. });

Split Button (Font Awesome)

  1. // Split Button
  2. $( "#rerun-fa" )
  3. .button()
  4. .click(function() {
  5. alert( "Running the last action" );
  6. })
  7. .next()
  8. .button({
  9. text: false,
  10. icons: {
  11. primary: "ui-icon-triangle-1-s"
  12. }
  13. })
  14. .click(function() {
  15. var menu = $( this ).parent().next().show().position({
  16. my: "left top",
  17. at: "left bottom",
  18. of: this
  19. });
  20. $( document ).one( "click", function() {
  21. menu.hide();
  22. });
  23. return false;
  24. }).parent()
  25. .buttonset()
  26. .next()
  27. .hide()
  28. .menu();