jQuery

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:
    components/_mod/jquery-ui.custom/jquery-ui.custom.css
    components/_mod/jquery-ui.custom/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:
    components/_mod/jquery-ui/jquery-ui.css
    components/jquery-ui/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 components/jqueryui-touch-punch/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:
    components/_mod/jquery-ui.custom/jquery-ui.custom.css
    components/_mod/jquery-ui.custom/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
    7. .ui-slider-simple for simple slider handle without bars
    8. .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 components/_mod/jquery.mobile.custom/jquery.mobile.custom.js
    
    <script type="text/javascript">
       if('ontouchstart' in document.documentElement) 
          document.write("<script src='path/to/components/_mod/jquery.mobile.custom/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