Inline Editable

For more information inline editable plugin and its option, please see its page at: vitalets.github.io/x-editable/
To use it, you should include:
components/_mod/x-editable/bootstrap-editable.css components/_mod/x-editable/bootstrap-editable.js
There are also five additional addons for the plugin that you can use by including:
components/_mod/x-editable/ace-editable.js
For more info see Inline Editable Addons
When using some editables you should include their relevant CSS and JS files first.
For example when using Select2 or Datepicker editables
For an example of some of the editables, you can see profile page:
mustache/app/views/assets/scripts/profile.js

jQuery Validate

For more information and examples please see:
jqueryvalidation.org
To use jQuery Validate you should include:
components/jquery-validation/dist/jquery.validate.js
There are also additional validation methods for which you should include:
components/jquery-validation/dist/additional-methods.js

A basic example could be like this:

$('#my-form').validate({
    errorElement: 'div',
    errorClass: 'help-block',
    focusInvalid: false,
    rules: {
       email: {
          required: true,
          email: true
       },
       name: {
          required: true
       },
       url: {
          required: true,
          url: true
       }
    },

    messages: {
        email: {
           required: "Please provide a valid email.",
           email: "Please provide a valid email."
        }
    },

    highlight: function (e) {
        $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
    },

    success: function (e) {
        $(e).closest('.form-group').removeClass('has-error').addClass('has-info');
        $(e).remove();
    },

    errorPlacement: function (error, element) {
        error.insertAfter(element.parent());
    }
});

Error placement and highlighting is arbitrary and depends on your HTML structure.

Note that by default when an element is hidden, it will not be validated.
You should use ignore option for more control:
```
$('#my-form').validate({
   //...
   ignore: ":hidden:not(select.chosen-select)"
   //...
});
```
In this example, because Chosen plugin hides original select element, we can use this to make sure validation is performed.
Please see form wizard page for a more detailed example

jQuery Colorbox

For more information about the plugin please see its page at:
www.jacklmoore.com/colorbox/
Colorbox plugin is used for slideshow as shown in gallery page.
To use it, you should include:
components/jquery-colorbox/example1/colorbox.css
components/jquery-colorbox/jquery.colorbox.js

A basic example would be like this:

var colorbox_params = {
          rel: 'colorbox',
   reposition: true,
  scalePhotos: true,
    scrolling: false,
     previous: '<i class="ace-icon fa fa-arrow-left"></i>',
         next: '<i class="ace-icon fa fa-arrow-right"></i>',
        close: '&times;',
      current: '{current} of {total}',
     maxWidth: '100%',
    maxHeight: '100%',
   onComplete: function(){
     $.colorbox.resize();
   }
}
 
$('[data-rel="colorbox"]').colorbox(colorbox_params);
$('#cboxLoadingGraphic').append("<i class='ace-icon fa fa-spinner orange'></i>");

Dropzone.js

If you want advanced file upload, you should consider using Dropzone.js plugin.
Fore more info and examples about it please see: www.dropzonejs.com
To use it, you should include:
components/dropzone/dist/dropzone.css
components/dropzone/dist/dropzone.js
Any elment with .dropzone class will be automaically converted to a file upload area, unless you set Dropzone.autoDiscover = false
For a basic example please see:
mustache/app/views/assets/scripts/dropzone.js

Bootbox

Bootbox is a wrapper plugin for Bootstrap modals which allows easy creation of dialogs.
For more info and examples about it please see: bootboxjs.com
To use it, you should include:
components/bootbox.js/bootbox.js

A basic example would be like this:

$('#some-button').on('click', function() {
  bootbox.confirm('Are you sure?', function(result) {
    if(result) {
       //do something
    }
  })
})

$("#some-button").on('click', function() {
  bootbox.confirm({
    message: "Are you sure?",
    buttons: {
       confirm: {
          label: "OK",
          className: "btn-primary btn-sm",
       },
       cancel: {
          label: "Cancel",
          className: "btn-sm",
       }
    },
    callback: function(result) {
       //if(result) do something;
    }
 });
});

$("#some-button").on('click', function() {
   bootbox.dialog({
      message: "I am a custom dialog with custom buttons,
      buttons:
      {
         "success" :
         {
            "label" : "<i class='ace-icon fa fa-check'></i> Success!",
            "className" : "btn-sm btn-success",
            "callback": function() {
                 //clicked, do something
            }
         },
         "danger" :
         {
             "label" : "Danger!",
             "className" : "btn-sm btn-danger",
             "callback": function() {
                 //clicked, do something
             }
         }
      }
   })
})

Colorpicker

For more info about colorpicker plugin, please see: http://www.eyecon.ro/bootstrap-colorpicker
To use it, you should include:
components/mjolnic-bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css
components/mjolnic-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js
A basic example would be like this:
```
 
```
```
$('#colorpicker1').colorpicker();
```

You can also use browser's built-in color picker which could be a better option on small touch devices:

var picker = $('#colorpicker1')[0];
if(picker.type !== 'color') {//if browser doesn't have built-in colorpicker
  $(picker).colorpicker();
}

You can also use custom color picker

Gritter

Gritter is a growl-like notifications plugin for jQuery.
Fore more info and examples please see: https://github.com/jboesch/Gritter
To use it, you should include:
components/jquery.gritter/css/jquery.gritter.css
components/jquery.gritter/js/jquery.gritter.js

A few additional styles are also available which as follows:

.gritter-info
.gritter-error
.gritter-success
.gritter-warning
.gritter-light light color style
.gritter-center centers the notification box

jQuery.gritter.add({
    title: 'This is a sticky notice!',
    text: 'Sticky content',
    image: 'path/to/image',
    sticky: true,
    time: '',
    class_name: 'gritter-info gritter-light gritter-center'
});

Nestable Lists

For more information and examples please see
To use nestable lists you should include:
components/nestable/jquery.nestable.js
You can use different color classes for list items.
See Dashboard Tasks for more info

A basic example is like this:



  Item 7



  
     
        
        
     
     Published Articles

In the above example, when dragging starts .normal-icon will be hidden and .drag-icon is shown

$('.dd').nestable();
$('.dd-handle a').on('mousedown', function(e){
   e.stopPropagation();
});

slimScroll

slimScroll is a lightweight scroll plugin using jQuery UI.
I've included in case you are already using it, but you can use the custom scroll plugin
For more info about it, please see: https://github.com/rochal/jQuery-slimScroll
To use it, you should include:
components/_mod/jquery-ui.custom/jquery-ui.custom.js
components/jquery-slimscroll/jquery.slimscroll.js

Star Rating

For more info and examples about Raty star rating plugin, please see: http://wbotelhos.com/raty/
To use it, you should include:
components/raty/libs/jquery.raty.js

Spin.js

For more info and examples about Spin.js plugin, please see: fgnass.github.io/spin.js/
To use it, you should include:
components/spin.js/spin.js and components/spin.js/jquery.spin.js

Holder.js

For more info and examples about Holder.js plugin, please see: http://imsky.github.io/holder/
To use it, you should include:
components/holderjs/holder.js

Prettify

For more info and examples about Prettify plugin, please see: https://github.com/google/code-prettify
To use it, you should include:
components/_mod/google-code-prettify/prettify.css
components/google-code-prettify/src/prettify.js

Miscellaneous