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:
    assets/css/bootstrap-editable.css assets/js/x-editable/bootstrap-editable.js
  • There are also five additional addons for the plugin that you can use by including:
    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:

jQuery Validate

  • For more information and examples please see:
  • To use jQuery Validate you should include:
    There are also additional validation methods for which you should include:
  • A basic example could be like this:
        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) {
        success: function (e) {
        errorPlacement: function (error, element) {
    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:
       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:
  • Colorbox plugin is used for slideshow as shown in gallery page.
    To use it, you should include:
  • 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(){
    $('#cboxLoadingGraphic').append("<i class='ace-icon fa fa-spinner orange'></i>");


  • 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:
  • 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:


  • 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:
  • 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() {
        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() {
          message: "I am a custom dialog with custom 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


  • For more info about colorpicker plugin, please see: http://www.eyecon.ro/bootstrap-colorpicker
  • To use it, you should include:
  • A basic example would be like this:
  • 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
  • You can also use custom color picker


  • 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:
  • A few additional styles are also available which as follows:
    1. .gritter-info
    2. .gritter-error
    3. .gritter-success
    4. .gritter-warning
    5. .gritter-light light color style
    6. .gritter-center centers the notification box
        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:
  • You can use different color classes for list items.
    See Dashboard Tasks for more info
  • A basic example is like this:
    1. Item 7
    1. Published Articles
    In the above example, when dragging starts .normal-icon will be hidden and .drag-icon is shown
    $('.dd-handle a').on('mousedown', function(e){


  • 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:

Star Rating

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