<section>
	<h1 class="blue" data-id="#plugins/misc"><i class="ace-icon fa fa-magic grey"></i> Miscellaneous</h1>

	<div class="hr hr-double hr32"></div>
	<div class="space-4"></div>

	<div class="help-content">

		<h3 class="info-title smaller" data-id="#plugins/misc.inline-editable">Inline Editable</h3>
		<!-- #section:plugins/misc.inline-editable -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				For more information inline editable plugin and its option, please see its page at:
				<a href="http://vitalets.github.io/x-editable/">vitalets.github.io/x-editable/</a>
			</li>
			
			<li>
				To use it, you should include:
				<br />
				<code>assets/css/bootstrap-editable.css</code>
				<code>assets/js/x-editable/bootstrap-editable.js</code>
			</li>

			<li>
				There are also five additional addons for the plugin that you can use
				by including:
				<br />
				<code>assets/js/x-editable/ace-editable.js</code>
				<br />
				For more info see <a href="#custom/inline-editable" class="help-more">Inline Editable Addons</a>
			</li>
			
			<li>
				When using some editables you should include their relevant CSS and JS files first.
				<Br />
				For example when using Select2 or Datepicker editables
			</li>
			
			<li>
				For an example of some of the editables, you can see profile page:
				<br />
				<code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>profile.js</code>
			</li>
		 </ul>
		</div>
		<!-- /section:plugins/misc.inline-editable -->
	</div>
	
	
	
	<div class="space-12"></div>
	

	<div class="help-content">
		<h3 class="info-title smaller" data-id="#plugins/misc.jquery-validate">jQuery Validate</h3>
		<!-- #section:plugins/misc.jquery-validate -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				For more information and examples please see:
				<br />
				<a href="http://jqueryvalidation.org/">jqueryvalidation.org</a>
			</li>
			
			<li>
				To use jQuery Validate you should include:
				<br />
				<code>assets/js/jquery.validate.js</code>
				<br />
				There are also additional validation methods for which you should include:
				<br />
				<code>assets/js/additional-methods.js</code>
			</li>
			
			<li>
				A basic example could be like this:
<pre data-language="javascript">
$('#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());
    }
});
</pre>
			Error placement and highlighting is arbitrary and depends on your HTML structure.

			</li>
			
			<li>
				Note that by default when an element is hidden, it will not be validated.
				<br />
				You should use <code>ignore</code> option for more control:
<pre data-language="javascript">
$('#my-form').validate({
   //...
   ignore: ":hidden:not(select.chosen-select)"
   //...
});
</pre>
				In this example, because Chosen plugin hides original <code>select</code> element,
				we can use this to make sure validation is performed.
			</li>
			
			<li>
				Please see form wizard page for a more detailed example
			</li>
			
		 </ul>
		</div>
		<!-- /section:plugins/misc.jquery-validate -->

	</div>
	
	

	
	<div class="space-12"></div>
	
	
	
	<div class="help-content">
		<h3 class="info-title smaller" data-id="#plugins/misc.colorbox">jQuery Colorbox</h3>
		<!-- #section:plugins/misc.colorbox -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				For more information about the plugin please see its page at:
				<br />
				<a href="http://www.jacklmoore.com/colorbox/">www.jacklmoore.com/colorbox/</a>
			</li>
			
			<li>
				Colorbox plugin is used for slideshow as shown in gallery page.
				<br />				
				To use it, you should include:
				<br />
				<code>assets/css/colorbox.css</code>
				<br />
				<code>assets/js/jquery.colorbox-min.js</code>
			</li>
		
			<li>
				A basic example would be like this:
<pre data-language="html">
<a href="path/to/image1" data-rel="colorbox">
  <img alt="image1" src="path/to/thumb1" /> 
</a>
<a href="path/to/image2" data-rel="colorbox">
  <img alt="image2" src="path/to/thumb2" /> 
</a>
</pre>
<pre data-language="javascript">
var colorbox_params = {
          rel: 'colorbox',
   reposition: true,
  scalePhotos: true,
    scrolling: false,
     previous: '&lt;i class="ace-icon fa fa-arrow-left"&gt;&lt;/i&gt;',
         next: '&lt;i class="ace-icon fa fa-arrow-right"&gt;&lt;/i&gt;',
        close: '&amp;times;',
      current: '{current} of {total}',
     maxWidth: '100%',
    maxHeight: '100%',
   onComplete: function(){
     $.colorbox.resize();
   }
}
 
$('[data-rel="colorbox"]').colorbox(colorbox_params);
$('#cboxLoadingGraphic').append("&lt;i class='ace-icon fa fa-spinner orange'&gt;&lt;/i&gt;");
</pre>
			</li>
		 </ul>
		</div>
		<!-- /section:plugins/misc.colorbox -->
	</div>


	<div class="space-12"></div>


	<div class="help-content">
		<h3 class="info-title smaller" data-id="#plugins/misc.dropzone">Dropzone.js</h3>
		<!-- #section:plugins/misc.dropzone -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				If you want advanced file upload, you should consider using Dropzone.js plugin.
				<br />
				Fore more info and examples about it please see:
				<a href="http://www.dropzonejs.com/">www.dropzonejs.com</a>
			</li>
			
			<li>
				To use it, you should include:
				<br />
				<code>assets/css/dropzone.css</code>
				<br />
				<code>assets/js/dropzone.js</code>
			</li>
			
			<li>
				Any elment with <code>.dropzone</code> class will be automaically converted to a file upload area,
				unless you set <code>Dropzone.autoDiscover = false</code>
			</li>
			
			<li>
				For a basic example please see:
				<br />
				<code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>dropzone.js</code>
			</li>

		 </ul>
		</div>
		<!-- /section:plugins/misc.dropzone -->
	</div>
	
	

	<div class="space-12"></div>


	<div class="help-content">

		<h3 class="info-title smaller" data-id="#plugins/misc.bootbox">Bootbox</h3>
		<!-- #section:plugins/misc.bootbox -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Bootbox is a wrapper plugin for Bootstrap modals which allows easy
				creation of dialogs.
				<br />
				For more info and examples about it please see:
				<a href="http://bootboxjs.com/">bootboxjs.com</a>
			</li>
		
			<li>
				To use it, you should include:
				<br />
				<code>assets/js/bootbox.js</code>
			</li>
			
			<li>
				A basic example would be like this:
<pre data-language="javascript">
$('#some-button').on('click', function() {
  bootbox.confirm('Are you sure?', function(result) {
    if(result) {
       //do something
    }
  })
})
</pre>

<pre data-language="javascript">
$("#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;
    }
 });
});
</pre>

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

			</li>
			
		 </ul>
		</div>
		<!-- /section:plugins/misc.bootbox -->
	</div>
	

	
	<div class="space-12"></div>
		
	<div class="help-content">
		<h3 class="info-title smaller" data-id="#plugins/misc.colorpicker">Colorpicker</h3>
		<!-- #section:plugins/misc.colorpicker -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				For more info about colorpicker plugin, please see:
				<a href="http://www.eyecon.ro/bootstrap-colorpicker">http://www.eyecon.ro/bootstrap-colorpicker</a>
			</li>
			
			<li>
				To use it, you should include:
				<br />
				<code>assets/css/colorpicker.css</code>
				<br />
				<code>assets/js/bootstrap-colorpicker.js</code>
			</li>
			
			<li>
				A basic example would be like this:
<pre data-language="html">
 <input type="text" name="color" id="colorpicker1" />
</pre>
<pre data-language="javascript">
$('#colorpicker1').colorpicker();
</pre>
			</li>
			
			<li>
				You can also use browser's built-in color picker which could be a better option on small touch devices:
<pre data-language="html">
 <input type="color" name="color" id="colorpicker1" />
</pre>
<pre data-language="javascript">
var picker = $('#colorpicker1')[0];
if(picker.type !== 'color') {//if browser doesn't have built-in colorpicker
  $(picker).colorpicker();
}
</pre>
			</li>
			
			<li>
				You can also use <a href="#custom/colorpicker" class="help-more">custom color picker</a>
			</li>
		 </ul>
		</div>
		<!-- /section:plugins/misc.colorpicker -->
	</div>
	
	
	
	<div class="space-12"></div>


	<div class="help-content">
		<h3 class="info-title smaller" data-id="#plugins/misc.gritter">Gritter</h3>
		<!-- #section:plugins/misc.gritter -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Gritter is a growl-like notifications plugin for jQuery.
				<br />
				Fore more info and examples please see:
				<a href="https://github.com/jboesch/Gritter">https://github.com/jboesch/Gritter</a>
			</li>
			
			<li>
				To use it, you should include:
				<br />
				<code>assets/css/jquery.gritter.css</code>
				<br />
				<code>assets/css/jquery.gritter.js</code>
			</li>

			
			<li>
				A few additional styles are also available which as follows:
				<ol>
					<li><code>.gritter-info</code></li>
					<li><code>.gritter-error</code></li>
					<li><code>.gritter-success</code></li>
					<li><code>.gritter-warning</code></li>
					<li class="space-6"></li>
					<li><code>.gritter-light</code> light color style</li>
					<li class="space-6"></li>
					<li><code>.gritter-center</code> centers the notification box</li>
				</ol>
<pre data-language="html">
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'
});

</pre>
			</li>
			
		 </ul>
		</div>
		<!-- /section:plugins/misc.gritter -->
	</div>

	
	<div class="space-12"></div>

	
	<div class="help-content">
		<h3 class="info-title smaller" data-id="#plugins/misc.nestable-list">Nestable Lists</h3>
		<!-- #section:plugins/misc.nestable-list -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				For more information and examples please see 
			</li>
			
			<li>
				To use nestable lists you should include:
				<br />
				<code>assets/js/jquery.nestable.js</code>
			</li>

			<li>
				You can use different color classes for list items.
				<br />
				See <a href="#pages/dashboard.tasks" class="help-more">Dashboard Tasks</a> for more info
			</li>
			
			<li>
				A basic example is like this:
<pre data-language="html">
<div class="dd">
<ol class="dd-list">
  <li class="dd-item item-red" data-id="7"><div class="dd-handle">Item 7</div></li>
</ol>
</div>
</pre>

<pre data-language="html">
<div class="dd dd-draghandle">
<ol class="dd-list">
  <li class="dd-item dd2-item dd-colored" data-id="17">
     <div class="dd-handle dd2-handle btn-info">
        <i class="normal-icon ace-icon fa fa-pencil-square-o"></i>
        <i class="drag-icon ace-icon fa fa-arrows"></i>
     </div>
     <div class="dd2-content btn-info no-hover">Published Articles</div>
  </li>
</ol>
</div>
</pre>

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

<pre data-language="javascript">
$('.dd').nestable();
$('.dd-handle a').on('mousedown', function(e){
   e.stopPropagation();
});
</pre>
			</li>
			
		 </ul>
		</div>
		<!-- /section:plugins/misc.nestable-list -->
	</div>

	
	
	<div class="space-12"></div>


	<div class="help-content">
		<h3 class="info-title smaller" data-id="#plugins/misc.slimscroll">slimScroll</h3>
		<!-- #section:plugins/misc.slimscroll -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				slimScroll is a lightweight scroll plugin using jQuery UI.
				<br />
				I've included in case you are already using it,
				but you can use the <a href="#custom/scrollbar" class="help-more">custom scroll plugin</a>
			</li>
			
			<li>
				For more info about it, please see:
				<a href="https://github.com/rochal/jQuery-slimScroll">https://github.com/rochal/jQuery-slimScroll</a>
			</li>
			
			<li>
				To use it, you should include:
				<br />
				<code>assets/js/jquery-ui.custom.js</code>
				<br />
				<code>assets/js/jquery.slimscroll.js</code>
			</li>
		 </ul>
		</div>
		<!-- /section:plugins/misc.slimscroll -->
	</div>
	
	
	<div class="space-12"></div>


	<div class="help-content">
		<h3 class="info-title smaller" data-id="#plugins/misc.raty">Star Rating</h3>
		<!-- #section:plugins/misc.raty -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				For more info and examples about Raty star rating plugin, please see:
				<a href="http://wbotelhos.com/raty/">http://wbotelhos.com/raty/</a>
			</li>
			
			<li>
				To use it, you should include:
				<br />
				<code>assets/js/jquery.raty.js</code>
			</li>
		 </ul>
		</div>
		<!-- /section:plugins/misc.raty -->
	</div>
	

</section>