mirror of
https://github.com/ExactTarget/fuelux.git
synced 2026-04-26 03:00:10 -04:00
80 lines
3.6 KiB
HTML
80 lines
3.6 KiB
HTML
---
|
|
layout: default
|
|
title: Javascript
|
|
slug: javascript
|
|
lead: "Over a dozen reusable controls built to provide datepickers, pillboxes, trees, wizards, and much more."
|
|
---
|
|
|
|
<!-- Overview
|
|
================================================== -->
|
|
<div class="bs-docs-section">
|
|
<h1 id="js-overview" class="page-header">Overview</h1>
|
|
|
|
<h3 id="js-individual-compiled">Individual or compiled</h3>
|
|
<p>Components can be included individually (using FuelUX's individual <code>*.js</code> files), or all at once (using <code>fuelux.js</code> or the minified <code>fuelux.min.js</code>).</p>
|
|
|
|
<div class="bs-callout bs-callout-danger">
|
|
<h4>Using the compiled JavaScript</h4>
|
|
<p>Both <code>fuelux.js</code> and <code>fuelux.min.js</code> contain all plugins in a single file. Include only one.</p>
|
|
</div>
|
|
|
|
<div class="bs-callout bs-callout-danger">
|
|
<h4>Plugin dependencies</h4>
|
|
<p>Some components depend on other components. If you include components individually, make sure to check for these dependencies in the docs below. An error should be thrown if dependencies are not met. Also note that all plugins depend on jQuery and Bootstrap (this means jQuery and Boostrap must be included <strong>before</strong> the components files). <a href="{{ site.repo }}/blob/v{{ site.current_version }}/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery and Bootstrap are supported.</p>
|
|
</div>
|
|
|
|
<h3 id="js-class-triggers">Selector-based initialization</h3>
|
|
<p>You can initialize all FuelUX components on page load purely through markup without writing a single line of JavaScript by adding its respective class as a descendant of <code>.fuelux</code>.</p>
|
|
|
|
<p>Alternatively, you can initialize a specific component like this at any time:</p>
|
|
{% highlight js %}
|
|
$('#myElement').selectlist();
|
|
{% endhighlight %}
|
|
|
|
<p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p>
|
|
{% highlight js %}
|
|
$('#myElement').wizard() // initialized with defaults
|
|
$('#myElement').wizard('selectedItem', { step: 3 });) // initialized with selectedItem
|
|
$('#myElement').wizard('show') // initializes and invokes show immediately
|
|
{% endhighlight %}
|
|
|
|
<p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>.</p>
|
|
|
|
<h3 id="js-events">Events</h3>
|
|
<p>FuelUX provides custom events for most components unique actions. Generally, these come in an infinitive and past form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past form (ex. <code>changed</code>) is trigger on the completion of an action.</p>
|
|
<p>As of 3.0.0, all FuelUX events are namespaced.</p>
|
|
|
|
<div class="bs-callout bs-callout-warning" id="callout-third-party-libs">
|
|
<h4>Third-party libraries</h4>
|
|
<p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code>.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{% include js/checkbox.html %}
|
|
|
|
{% include js/combobox.html %}
|
|
|
|
{% include js/infinite-scroll.html %}
|
|
|
|
{% include js/loader.html %}
|
|
|
|
{% include js/placard.html %}
|
|
|
|
{% include js/pillbox.html %}
|
|
|
|
{% include js/radio.html %}
|
|
|
|
{% include js/repeater.html %}
|
|
|
|
{% include js/scheduler.html %}
|
|
|
|
{% include js/search.html %}
|
|
|
|
{% include js/selectlist.html %}
|
|
|
|
{% include js/spinbox.html %}
|
|
|
|
{% include js/tree.html %}
|
|
|
|
{% include js/wizard.html %}
|