# Miscellaneous

### 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:
  `assets/js/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:
  `assets/js/jquery.validate.js`
  There are also additional validation methods for which you should include:
  `assets/js/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:
  `assets/css/colorbox.css`
  `assets/js/jquery.colorbox-min.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:
  `assets/css/dropzone.css`
  `assets/js/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:
  `assets/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:
  `assets/css/colorpicker.css`
  `assets/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:
  `assets/css/jquery.gritter.css`
  `assets/css/jquery.gritter.js`
- A few additional styles are also available which as follows:
  1. `.gritter-info`
  2. `.gritter-error`
  3. `.gritter-success`
  4. `.gritter-warning`
  6. `.gritter-light` light color style
  8. `.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:
  `assets/js/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:
  `assets/js/jquery-ui.custom.js`
  `assets/js/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:
  `assets/js/jquery.raty.js`