<section>
|
<h1 class="blue" data-id="#plugins/jquery">jQuery </h1>
|
|
<div class="hr hr-double hr32"></div>
|
|
<!-- #section:plugins/jquery -->
|
<div class="help-content">
|
<h3 class="info-title smaller">jQuery</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
jQuery is required by Bootstrap and most third party plugins
|
</li>
|
|
<li>
|
Currently latest 2.x version is used. For older IE browsers you should use latest 1.x version,
|
as described in <a href="#files/javascript.order" class="help-more">Javascript files</a> section:
|
<pre data-language="html">
|
<!--[if !IE]> -->
|
<script src="path/to/jquery.js"></script>
|
<!-- <![endif]-->
|
<!--[if lte IE 9]>
|
<script src="path/to/jquery1x.js"></script>
|
<![endif]-->
|
</pre>
|
</li>
|
</ul>
|
</div>
|
|
|
<h3 class="info-title smaller">jQuery UI</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
jQuery UI is also used for slider and drag drop functionality
|
</li>
|
|
<li>
|
It is also required by some plugins such as FullCalendar and slimScroll
|
</li>
|
|
<li>
|
A custom built version is included which has only above mentioned basic features.
|
<br />
|
You can use it by including the following files:
|
<br />
|
<code>assets/css/jquery-ui.custom.css</code>
|
<br />
|
<code>assets/js/jquery-ui.custom.js</code>
|
</li>
|
|
<li>
|
A full version is also included in case you want to use more features of the library.
|
<br />
|
You can use it by including the following files:
|
<br />
|
<code>assets/css/jquery-ui.css</code>
|
<br />
|
<code>assets/js/jquery-ui.js</code>
|
</li>
|
|
<li>
|
You can also build a custom version depending on your needs.
|
<br />
|
Please see
|
<a href="http://jqueryui.com/download/">jQuery UI custom download</a>
|
</li>
|
|
<li>
|
Please note that jQuery UI tooltip module overrides Bootstrap tooltip.
|
<br />
|
You can avoid this by building a custom jQuery UI without tooltip
|
or including Bootstrap Javascript files after jQuery UI.
|
|
<div class="space-6"></div>
|
Same thing can happen with jQuery UI spinner and FuelUX spinner.
|
</li>
|
|
<li>
|
<a href="http://touchpunch.furf.com">jQuery UI Touch Punch</a> is used for enabling touch events.
|
<br />
|
You should include <code>assets/js/jquery.ui.touch-punch.js</code>
|
</li>
|
</ul>
|
</div>
|
|
|
<h3 class="info-title smaller" data-id="#plugins/jquery.slider">jQuery UI Slider</h3>
|
<!-- #section:plugins/jquery.slider -->
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
For more info about jQuery UI slider, see:
|
<a href="https://api.jqueryui.com/slider/">api.jqueryui.com/slider/</a>
|
</li>
|
|
<li>
|
To use it, you should include:
|
<br />
|
<code>assets/css/jquery-ui.custom.css</code>
|
<br />
|
<code>assets/js/jquery-ui.custom.js</code>
|
<br />
|
You can also include full jQuery UI versions or your own custom download.
|
</li>
|
|
<li>
|
There are some additional colors and options:
|
<ol>
|
<li><code>.ui-slider-green</code></li>
|
<li><code>.ui-slider-red</code></li>
|
<li><code>.ui-slider-purple</code></li>
|
<li><code>.ui-slider-orange</code></li>
|
<li><code>.ui-slider-dark</code></li>
|
<li><code>.ui-slider-pink</code></li>
|
<li class="space-6"></li>
|
<li><code>.ui-slider-simple</code> for simple slider handle without bars</li>
|
<li><code>.ui-slider-small</code> for smaller handle</li>
|
</ol>
|
</li>
|
|
<li>
|
A basic example would be like this:
|
<pre data-language="html">
|
<span id="myslider" class="ui-slider-simple ui-slider-orange"></span>
|
</pre>
|
<pre data-language="javascipr">
|
$('#myslider').slider({
|
value: 11,
|
range: "min",
|
animate: true
|
});
|
</pre>
|
</li>
|
|
<li>
|
For more examples you can also see <b>Form Elements</b> script at:
|
<br />
|
<code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>form-elements.js</code>
|
<br />
|
Search for "jQuery UI Slider" inside it
|
</li>
|
|
</ul>
|
</div>
|
<!-- /section:plugins/jquery.slider -->
|
|
|
<h3 class="info-title smaller">jQuery Mobile</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
To add support for <code>tap</code> event on touch devices,
|
a custom built jQuery mobile version is included which has minimal features.
|
<br />
|
To use it you should include
|
<code>assets/js/jquery.mobile.custom.js</code>
|
<pre data-language="html">
|
<!-- after jquery -->
|
<script type="text/javascript">
|
if('ontouchstart' in document.documentElement)
|
document.write("<script src='path/to/assets/js/jquery.mobile.custom.js'>"+"<"+"/script>");
|
</script>
|
</pre>
|
|
This will include it only if touch events are available.
|
</li>
|
|
<li>
|
You may want to build a custom one depending on your requirements.
|
<br />
|
Please see
|
<a href="http://jquerymobile.com/download-builder/">jQuery Mobile builder</a>
|
</li>
|
|
<li>
|
If you are using KendoUI or perhaps other libraries,
|
there may be conflicts with touch events which you can avoid by removing jQuery Mobile
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- /section:plugins/jquery -->
|
</section>
|
