bkjxxxw/WebContent/static/ace/docs/sections/plugins/jquery.html

<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">
 &lt;!--[if !IE]&gt; --&gt;
   &lt;script src="path/to/jquery.js"&gt;&lt;/script&gt;
 &lt;!-- &lt;![endif]--&gt;
 &lt;!--[if lte IE 9]&gt;
   &lt;script src="path/to/jquery1x.js"&gt;&lt;/script&gt;
 &lt;![endif]--&gt;
</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 -->
&lt;script type="text/javascript"&gt;
   if('ontouchstart' in document.documentElement) 
      document.write("&lt;script src='path/to/assets/js/jquery.mobile.custom.js'&gt;"+"&lt;"+"/script&gt;");
&lt;/script&gt;
</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>