# jQuery

- jQuery is required by Bootstrap and most third party plugins
- Currently latest 2.x version is used. For older IE browsers you should use latest 1.x version, as described in Javascript files section:

       <!--[if !IE]> -->
         <script src="path/to/jquery.js"></script>
       <!-- <![endif]-->
       <!--[if lte IE 9]>
         <script src="path/to/jquery1x.js"></script>
       <![endif]-->

### jQuery UI

- jQuery UI is also used for slider and drag drop functionality
- It is also required by some plugins such as FullCalendar and slimScroll
- A custom built version is included which has only above mentioned basic features.
  You can use it by including the following files:
  `assets/css/jquery-ui.custom.css`
  `assets/js/jquery-ui.custom.js`
- A full version is also included in case you want to use more features of the library.
  You can use it by including the following files:
  `assets/css/jquery-ui.css`
  `assets/js/jquery-ui.js`
- You can also build a custom version depending on your needs.
  Please see jQuery UI custom download
- Please note that jQuery UI tooltip module overrides Bootstrap tooltip.
  You can avoid this by building a custom jQuery UI without tooltip or including Bootstrap Javascript files after jQuery UI.
  Same thing can happen with jQuery UI spinner and FuelUX spinner.
- jQuery UI Touch Punch is used for enabling touch events.
  You should include `assets/js/jquery.ui.touch-punch.js`

### jQuery UI Slider

- For more info about jQuery UI slider, see: api.jqueryui.com/slider/
- To use it, you should include:
  `assets/css/jquery-ui.custom.css`
  `assets/js/jquery-ui.custom.js`
  You can also include full jQuery UI versions or your own custom download.
- There are some additional colors and options:
  1. `.ui-slider-green`
  2. `.ui-slider-red`
  3. `.ui-slider-purple`
  4. `.ui-slider-orange`
  5. `.ui-slider-dark`
  6. `.ui-slider-pink`
  8. `.ui-slider-simple` for simple slider handle without bars
  9. `.ui-slider-small` for smaller handle
- A basic example would be like this:

      $('#myslider').slider({
         value: 11,
         range: "min",
         animate: true
      });

- For more examples you can also see Form Elements script at:
  `mustache/app/views/assets/scripts/form-elements.js`
  Search for "jQuery UI Slider" inside it

### jQuery Mobile

- To add support for `tap` event on touch devices, a custom built jQuery mobile version is included which has minimal features.
  To use it you should include `assets/js/jquery.mobile.custom.js`

      <script type="text/javascript">
         if('ontouchstart' in document.documentElement)
            document.write("<script src='path/to/assets/js/jquery.mobile.custom.js'>"+"<"+"/script>");
      </script>

  This will include it only if touch events are available.
- You may want to build a custom one depending on your requirements.
  Please see jQuery Mobile builder
- If you are using KendoUI or perhaps other libraries, there may be conflicts with touch events which you can avoid by removing jQuery Mobile