Skip to content
This repository has been archived by the owner on Feb 12, 2022. It is now read-only.

Gh pages audit #680

Merged
merged 27 commits into from
Oct 2, 2014
Merged

Gh pages audit #680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
8990da4
(gh-pages-audit) audited overview section and made nav consistent
cmcculloh Sep 16, 2014
eeb070b
(gh-pages-audit) made header fixed
cmcculloh Sep 17, 2014
7a01c2a
(gh-pages-audit) more copy editing
cmcculloh Sep 17, 2014
dea18c9
(gh-pages-audit) created dl
cmcculloh Sep 17, 2014
153a023
(gh-pages-audit) added info about jQuery. Solidified how methods are …
cmcculloh Sep 18, 2014
6b835e6
(gh-pages-audit) added illustration of use to beginning of control do…
cmcculloh Sep 18, 2014
e685c83
(gh-pages-audit) inject a little link next to all of the headers to m…
cmcculloh Sep 18, 2014
4cfc0bf
(gh-pages-audit) link back to actual plugin files from within headers…
cmcculloh Sep 18, 2014
14ca89c
(gh-pages-audit) adjusted margins and padding for fixed navbar. Fixed…
cmcculloh Sep 19, 2014
54dace8
(gh-pages-audit) WIP on adding IDs to all h tags and converting metho…
cmcculloh Sep 19, 2014
b891ebb
(gh-pages-audit) WIP first pass audit/reorg
cmcculloh Sep 22, 2014
b87ab98
(gh-pages-audit) illustrative examples at top of each component
cmcculloh Sep 24, 2014
1b6bacb
(gh-pages-audit) rearranged some text. Fixed css class
cmcculloh Sep 29, 2014
aad4d80
(gh-pages-audit) fixed problem of datepicker popup flowing off the le…
cmcculloh Sep 30, 2014
467fa2e
(gh-pages-audit) fixed spinbox dupe ID issues. Clarified some documen…
cmcculloh Sep 30, 2014
316ea87
(gh-pages-audit) fixed datepicker example problems
cmcculloh Sep 30, 2014
edaa3b2
(gh-pages-audit) fixed infinite scroll brokenness
cmcculloh Sep 30, 2014
a0aa71e
(gh-pages-audit) typahead -> typeahead
cmcculloh Sep 30, 2014
f50c9b4
(gh-pages-audit) FuelUX -> Fuel UX
cmcculloh Sep 30, 2014
12d98d6
(gh-pages-audit) revert accidental commit to this file
cmcculloh Sep 30, 2014
6e00481
(gh-pages-audit) made illustration of use more clear
cmcculloh Oct 1, 2014
4f0adc0
(gh-pages-audit) clarified intent of radio and checkbox
cmcculloh Oct 1, 2014
e68e5c0
(gh-pages-audit) DRYed up reapeater usage text
cmcculloh Oct 1, 2014
88c8568
(gh-pages-audit) clarified infinitescroll and repeater stuff
cmcculloh Oct 1, 2014
eb1da0a
(gh-pages-audit) fixed js formatting
cmcculloh Oct 1, 2014
5d260d3
(gh-pages-audit) made sure all examples and illustrations work
cmcculloh Oct 1, 2014
d4712a8
(gh-pages-audit) clarified repeater clear documentation
cmcculloh Oct 2, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,19 @@
Fuel UX - Live Documentation
======

### Notes
### Setup
* To install bower dependencies, `bower install`
* To update bower dependencies, run `bower update`
* To update a specific bower dependency, `bower update fuelux`
* To install jekyll, run `bundle install`
* To serve a jekyll site and watch, run `jekyll serve --watch`
* To serve a jekyll site and watch, run `jekyll serve --watch`
** If that doesn't work, try `bundle exec jekyll serve --watch`

### Local Development FAQ
* _config.yml contains config stuff related to the `{{site}}` variables used throughout the gh-pages site.
** If you are editing local JS or CSS, you will need to uncomment the local `url` var in this file (`url: http://0.0.0.0:4000/`)


### Notes
* Any h tag with an id will automagically be given a little link thing to its left that people can use to link back to the documentation. The more h tags have ids, the more reference-able our documentation will be.

3 changes: 1 addition & 2 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ exclude: [".editorconfig", ".gitignore", "bower.json", "composer.json",
url: http://exacttarget.github.io/fuelux
# local dev
#url: http://localhost:4000/
# url: http://0.0.0.0:4000/

# Custom vars
current_version: 3.0.2
Expand All @@ -30,5 +31,3 @@ bootstrap:
js: //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js
js_amd: //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min

# To view gh-pages locally
# bundle exec jekyll serve
4 changes: 4 additions & 0 deletions _includes/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,8 @@
{% endif %}


<script>
require(['jquery', 'bootstrap', 'moment', 'assets/js/application'], function($){});
</script>

</footer>
4 changes: 2 additions & 2 deletions _includes/getting-started-amd-template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FuelUX Basic Template (AMD)</title>
<title>Fuel UX Basic Template (AMD)</title>
<!-- CSS -->
<link href="{{site.bootstrap.css}}" rel="stylesheet">
<link href="{{site.cdn.css}}" rel="stylesheet">
Expand All @@ -17,7 +17,7 @@
'fuelux': '{{site.cdn.js_amd}}',
'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery',
// Moment.js is optional
'moment': '//cdn.jsdelivr.net/momentjs/2.6.0/lang-all.min'
'moment': '//cdn.jsdelivr.net/momentjs/2.6.0/lang-all.min'
},
// Bootstrap is a "browser globals" script :-(
shim: { 'bootstrap': { deps: ['jquery'] } }
Expand Down
2 changes: 1 addition & 1 deletion _includes/getting-started-globals-template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FuelUX Basic Template (Globals)</title>
<title>Fuel UX Basic Template (Globals)</title>
<!-- CSS -->
<link href="{{site.bootstrap.css}}" rel="stylesheet">
<link href="{{site.cdn.css}}" rel="stylesheet">
Expand Down
5 changes: 1 addition & 4 deletions _includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
<!-- Scripts -->
<script src="{{ site.url }}/assets/vendor/requirejs/require.js"></script>

<script type="text/javascript">
<script>
(function () {
requirejs.config({
config: {
Expand All @@ -56,9 +56,6 @@
shim: { 'bootstrap': { deps: ['jquery'] } }
});
})();


require(['jquery', 'bootstrap', 'moment', 'assets/js/application'], function($){});
</script>

<script src="https://platform.twitter.com/widgets.js" type="text/javascript"></script>
Expand Down
86 changes: 63 additions & 23 deletions _includes/javascript-overview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,81 @@
<h1 id="overview" class="page-header">Overview</h1>

<div class="fu-callout fu-callout-danger">
<h4 id="plugin-dependencies">Plugin dependencies</h4>
<p>Some controls depend on other controls. If you include a control individually, make sure to check for dependencies in the documentation below. A console error should be thrown if dependencies are not met. All plugins depend on jQuery <i>and</i> Bootstrap and these must be loaded <strong>before</strong> any Fuel UX files).</p>
<p><a href="{{ site.repo }}/blob/{{ site.current_version }}/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery and Bootstrap are currently tested and supported.</p>
<h4 id="overview-plugin-dependencies">Plugin Dependencies</h4>
<p>Like Bootstrap, Fuel UX is a collection of jQuery plugins.</p>
<ul>
<li>All plugins depend on jQuery <i>and</i> Bootstrap; these must be loaded <strong>before</strong> Fuel UX.</li>
<li>Version requirements for jQuery/Bootstrap are documented in our <a href="{{ site.repo }}/blob/{{ site.current_version }}/bower.json"><code>bower.json</code></a> file.</li>
<li>Check dependencies if including controls individually <span class="text-muted">(console errors will indicate unmet dependencies). Some controls depend on others.</span></li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This paragraph is more helpful than the previous one. It also clarifies that these are all jQuery plugins, whereas the previous docs assumed the reader could figure this out on their own which is not good technical writing.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor note, should be "Fuel UX", not "FuelUX" (eg Fuel UX is a collection of jQuery plugins.)

</ul>
</div>

<h3 id="control-initialization">Control initialization</h3>

<h4>With markup: data-attributes</h4>
<p>You can initialize Fuel UX controls that <i>do not require a data source</i> on page load purely through markup without writing a single line of JavaScript. Controls that can to be auto-initialized are checkbox, combobox, datepicker, loader, pillbox, placard, radio, scheduler, search, selectlist, spinbox, and wizard. These controls can contain the <code>data-initialize</code> attribute. Attribute initialization is used in this section's examples when available.
<div class="fu-callout fu-callout-danger">
<h4 id="overview-class-dependeny">Class Dependency</h4>
<p>In order for Fuel UX to work, you must have the <code>fuelux</code> class on the body of your document <span class="text-muted">(Or at least on a parent container of the fuelux elements on your page)</span></p>
</div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is good because this tripped me up too the first few times I used FuelUX.


<p>Like Bootstrap, these controls can be 'lazily' initialized when the user interacts with them (such as on <code>mouseover</code>. Be careful of <code>changed</code> events when initializing. To disable this data-api, use <code>$.off('fu.data-api')</code>. The Fuel UX team recommends the precision and greater number of options provided by initializing manually via JavaScript.</p>
<h3 id="overview-control-initialization">Control Initialization</h3>

<h4>With JavaScript</h4>
<p>You can also initialize a component at any time via JavaScript. Most controls accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p>
<h4 id="overview-control-initialization-javascript">With JavaScript</h4>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because this is the recommended way, putting this first is important. The order of things in this doc implies priority.

<p>Initialize a component at any time via JavaScript:
{% highlight js %}
// initialized with defaults
$('#myWizard').wizard()
// initialized with no options specified (fuelux defaults get used)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is is a good clarifying change.

$("#myCombobox").combobox();

// initialized with selectedItem
$('#myWizard').wizard('selectedItem', { step: 3 });)
// initialized with options specified
$('#myCombobox').combobox('selectByIndex', '1');
{% endhighlight %}
</p>

<div class="fu-callout fu-callout-warning">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Making this a callout is a good idea. This is something important for people to know, and in the old docs is was the same color and formatting as the rest of the text and didn't stand out as all the important.

<h4 id="overview-destruction-and-reinitialization">Destruction and re-initialization</h4>
<p><em>Fuel UX controls cannot be re-initialized</em>. Passing new options to an already initialized control <em>will do effectively nothing</em>. Many controls have convenience methods that allow some internal variables to be changed; otherwise use Javascript to call the control's <code>destroy()</code> method and initialize again with the newly desired markup and options. The <code>destroy()</code> method will attempt to return the pre-initialization markup for the element being destroyed.</p>
</div>

<h4 id="overview-control-initialization-markup">With markup: data-attributes</h4>
<p class="bg-danger">The Fuel UX team recommends the precision and greater number of options provided by <a href="#control-initialization-javascript">initializing manually via JavaScript</a>.</p>
<p>The following Fuel UX controls <em class="text-muted">(those that that do not require a data source)</em> can be initialized on page load using the <code>data-initialize</code> attribute:
<ul>
<li><a href="#checkbox">checkbox</a></li>
<li><a href="#combobox">combobox</a></li>
<li><a href="#datepicker">datepicker</a></li>
<li><a href="#loader">loader</a></li>
<li><a href="#pillbox">pillbox</a></li>
<li><a href="#placard">placard</a></li>
<li><a href="#radio">radio</a></li>
<li><a href="#scheduler">scheduler</a></li>
<li><a href="#search">search</a></li>
<li><a href="#selectlist">selectlist</a></li>
<li><a href="#spinbox">spinbox</a></li>
<li><a href="#wizard">wizard</a></li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't say enough how helpful this list is. I used to find it hard trying to figure out which controls could use data-attributes and which couldn't. In the old docs you had to read the entire page (time consuming and frustrating). This way its right at the top and easy to scan & access.

</ul>
<span class="text-muted">Attribute initialization is used in each section's examples when available.</span>
</p>

<p>If control is not present <cod>onready</cod>, it will be 'lazily' initialized when the user interacts with it (such as on <code>mouseover</code>).</p>

<p class="bg-danger">Currently there is a bug causing <code>changed</code> events to fire twice for some elements (such as <a href="#spinbox">spinbox</a>). The workaround is to disable this data-api, using <code>$.off('fu.data-api')</code></p>

<div class="bs-callout bs-callout-warning">
<h4>Destruction and re-initialization</h4>
<p>Unlike some heavier UI control libraries, <i>Fuel UX controls cannot be re-initialized</i>. If a control is already initialized, passing in an options/default object will only change the defaults--which means <i>nothing will happen</i>. Many controls have methods that allow certain internal variables to be changed, but if the variable you would like to change is not available via a method mentioned in the tables below, then you should use the control's <code>destroy</code> method and initialize new markup with the respective options object via Javascript.</p>
<div class="fu-callout fu-callout-warning">
<h4 id="overview-manual-initialization">Requires Manual Initialization</h4>
<p>The following Fuel UX controls require a data source and must be initialized manually:
<ul>
<li><a href="#infinite-scroll">Infinite Scroll</a></li>
<li><a href="#repeater">Repeater</a></li>
<li><a href="#tree">Tree</a></li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Again, thank you for this list.

</ul>
</p>
</div>

<h3 id="events">Events</h3>
<p>Fuel UX provides custom events for most components' actions. All events are namespaced with 'fu' and their control name (ex. <code>'changed.fu.checkbox'</code> ). All Fuel UX events are past tense, so not to trigger standard events (ex. <code>changed</code> vs. <code>change</code>). Although it is not tested, nor recommended, this allows you listen for standard events and Bootstrap supported events on any internal element that you choose.</p>
<h3 id="overview-events">Events</h3>
<p>Fuel UX provides custom events for most components' actions. All events are namespaced with 'fu' and their control name (ex. <code>'changed.fu.checkbox'</code> ). All Fuel UX events are past tense so that they don't trigger standard and Bootstrap events (eg. <code>changed</code> vs. <code>change</code>). Listening for standard and Bootstrap supported events on an internal element is not tested, and therefore not recommended.</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is better language. Simply saying "don't do this" is more clear than the previous sentence that sounded non-committal on whether you should do it or not.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not necessarily a comment on the this documentation, but most of our code samples for events should be updated so show the arguments passed into the callback function. Some don't include these, and some list them incorrectly. I believe most (if not all) pass the event as the first argument, and the element as the second.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call! I completely agree that the code samples need a thorough gone-through. This initial pass was (is) about structure and organization, as well as the general overview sections. I've done some light editing on the "usage" sections as well (especially the method lists) but I have pretty much left the examples un-touched. I'm planning at least one, probably two, more passes through the documentation as a whole. One of which will be to heavily audit the samples and examples. At that time we will be integrating our jsfiddle-like thingamabob that Jason Gekeler is working on ATM.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.exacttarget.com/uxarchitecture/snippet-library

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't +1 Matt's comment enough. It always drive me nuts that I can't just go find what the callback params are in the docs... I always have to write a little test and use console.log in the browser to figure it out.


<h3 id="individual-compiled">Individual or compiled</h3>
<p>Components can be included individually (using Fuel UX's individual <code>*.js</code> files), or all at once (using <code>fuelux.js</code> or the minified <code>fuelux.min.js</code>). Do not include both files on your page.</p>
<h3 id="overview-individual-compiled">Individual or compiled</h3>
<p>Include components either altogether or individually, <em class="text-danger">but never do both</em> (include either individual <code>*.js</code> files, or the unminified <code>fuelux.js</code>, or the minified <code>fuelux.min.js</code>).</p>

<h3 id="accessibility">Accessibility</h3>
<h3 id="overview-accessibility">Accessibility</h3>

<p>ARIA support has been added when appropriate, and all inputs have labels even if they are "screen reader only." All controls are keyboard friendly and can be navigated by tabbing to display a keyboard-focus. We hope this not only aids in accessibility, but also increases the user's productivity. Controls have been "fat-finger" tested on touch devices. If you have accessibility issues with Fuel UX controls, please <a href="https://github.com/ExactTarget/fuelux/issues/new">create an issue on GitHub</a>.</p>
<p>ARIA support has been added when appropriate, and all inputs have labels even if they are "screen reader only." All controls are keyboard friendly and can be navigated by tabbing to display a keyboard-focus. Controls have been "fat-finger" tested on touch devices. <em>We care</em>; if you have accessibility issues with Fuel UX controls, please <a href="https://github.com/ExactTarget/fuelux/issues/new">create an issue on GitHub</a>.</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a good change, removing the unnecessary sentence and getting to the point faster.


</div>
97 changes: 49 additions & 48 deletions _includes/js/checkbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,54 @@
<!-- checkbox
================================================== -->
<div class="fu-docs-section">
<h1 id="checkboxes" class="page-header">Checkboxes <small>checkboxes.js</small></h1>
<h1 id="checkbox" class="page-header">Checkbox <a href="{{ site.repo }}/blob/{{ site.current_version }}/js/checkbox.js"><small>checkbox.js</small></a></h1>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Having the pluralization match the file name is very helpful. The old style was not only confusing, but not even the correct file name. Linking directly to the file is also a great idea for people who prefer to "read the code" (I'm like that).


<h2 id="checkboxes-examples">Examples</h2>
<p>Add a custom look and feel for checkbox element.</p>
<p>The checkbox control provides a customized look and feel that can be standardized across all browsers.</p>
<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCheckbox7">
<input class="sr-only" type="checkbox" value="option3"> <span class="checkbox-label">checkbox</span>
</label>

<h2 id="checkbox-usage">Usage</h2>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Putting this first reads much better and optimizes the scanability of the docs and answers the question "how do I use this" straight away. Markup for controls is only needed the first time, whereas using the API for the controls will need referenced multiple times as you build your app adding in functionality in Javascript for interacting with the control.

In the old style of the docs, the markup at the top is bulky and takes up a lot of scroll-space for something that is only needed the first time you access the docs. Showing all of the permutations is also something that is not needed nearly as frequently as using the API.

<h3 id="checkbox-usage-javascript">Via JavaScript</h3>
<p>Initialize the checkbox control via JavaScript:</p>
{% highlight js %}$('#myCheckbox').checkbox();{% endhighlight %}

<h3 id="checkbox-usage-data-attributes">Via data-attributes</h3>
<ul>
<li>Checkbox input elements that exist when <code>$.ready()</code> executes that have <code>data-initialize="checkbox"</code> on their parent will be initialized immediately.</li>
<li>Checkbox input elements that are created with <code>data-initialize="checkbox"</code> after <code>$.ready()</code> executes will initialize when a <code>mouseover</code> event occurs on them.</li>
</ul>

<h3 id="checkbox-usage-methods">Methods</h3>
<p>Once your checkbox is <a href="#checkbox-usage">initialized</a>, you can execute any of the following methods on it:</p>

<dl>
<dt>.checkbox('check')</dt>
<dd>Ensures the checkbox is checked.</dd>

<dt>.checkbox('destroy')</dt>
<dd>Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup as close to it's pre-initialization state as possible.</dd>

<dt>.checkbox('disable')</dt>
<dd>Ensures the checkbox is disabled.</dd>

<dt>.checkbox('enable')</dt>
<dd>Ensures the checkbox is enabled.</dd>

<dt>.checkbox('isChecked')</dt>
<dd>Returns <code>true</code> or <code>false</code> indicating the checked state of the checkbox.</dt>

<dt>.checkbox('toggle')</dt>
<dd>Toggles the checkbox between checked/unchecked states.</dd>

<dt>.checkbox('uncheck')</dt>
<dd>Ensures the checkbox is unchecked.</dd>

</dl>

<h4>Default (stacked)</h4>
<h2 id="checkbox-examples">Examples</h2>

<h4 id="checkbox-examples-default">Default (stacked)</h4>
<div class="fu-example section">
<div id="myCheckbox" class="checkbox" data-initialize="checkbox">
<label class="checkbox-custom">
Expand Down Expand Up @@ -60,7 +102,7 @@ <h4>Default (stacked)</h4>
</div>
{% endhighlight %}

<h4>Inline checkboxes</h4>
<h4 id="checkbox-examples-inline">Inline checkboxes</h4>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding these links is not only helpful, but will be necessary when linking to "FuelUX Controls" from the Pattern Library website.

<p>Use the <code>.checkbox-inline</code> class on checkboxes for controls that appear on the same line.</p>
<div class="fu-example section">
<label class="checkbox-custom checkbox-inline" data-initialize="checkbox">
Expand All @@ -85,7 +127,7 @@ <h4>Inline checkboxes</h4>
</label>
{% endhighlight %}

<h4>Element toggling checkboxes</h4>
<h4 id="checkbox-examples-element-toggling">Element toggling checkboxes</h4>
<p>Use the <code>data-toggle="{{selector}}"</code> to automatically show or hide elements matching the selector within the body upon check or uncheck. This control works with any <a href="http://api.jquery.com/category/selectors/">jQuery selector</a>.
</p>
<div class="fu-example section">
Expand Down Expand Up @@ -124,7 +166,7 @@ <h4>Element toggling checkboxes</h4>
<div class="alert bg-success checkboxToggleCLASS" style="display: none;">Class toggling container</div>
{% endhighlight %}

<h4>Highlighting checkboxes</h4>
<h4 id="checkbox-examples-highlighting">Highlighting checkboxes</h4>
<p>Use the <code>.highlight</code> class to add a background highlight upon check.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Putting these in this huge formatted box might have been ok if there was also the "copy" button like in the Bootstrap docs. But without that the code part is only duplicating exactly what the text above it says and is a waste of space. The new format is clearer, easier to read, and more compact.

</p>
<div class="fu-example section">
Expand Down Expand Up @@ -152,45 +194,4 @@ <h4>Highlighting checkboxes</h4>
</label>
{% endhighlight %}

<h2 id="checkboxes-usage">Usage</h2>

<h3>Via data-attributes</h3>
<p>To enable the checkbox control without writing Javascript, add <code>data-initialize="checkbox"</code> to the parent of the checkbox input that you wish to initialize. Such elements that exist when <code>$.ready()</code> executes will be initialized. Any checkbox markup that is programatically created with <code>data-initialize="checkbox"</code> sometime after the initial page load will not immediately initialize. Rather, it will be initialized when the <code>mouseover</code> event is fired on it.</p>

<h3>Via JavaScript</h3>
<p>Call the checkbox control via JavaScript:</p>
{% highlight js %}$('#myCheckbox').checkbox();{% endhighlight %}

<h3>Methods</h3>
<h4>$().checkbox();</h4>
Activates your content as a custom checkbox

<h4>.checkbox('check')</h4>
<p>Checks the checkbox</p>
{% highlight js %}$('#myCheckbox').checkbox('check');{% endhighlight %}

<h4>.checkbox('destroy')</h4>
<p>Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.</p>
{% highlight js %}$('#myCheckbox').checkbox('destroy');{% endhighlight %}

<h4>.checkbox('disable')</h4>
<p>Disables the checkbox</p>
{% highlight js %}$('#myCheckbox').checkbox('disable');{% endhighlight %}

<h4>.checkbox('enable')</h4>
<p>Enables the checkbox</p>
{% highlight js %}$('#myCheckbox').checkbox('enable');{% endhighlight %}

<h4>.checkbox('isChecked')</h4>
<p>Returns <code>true</code> or <code>false</code> depending on whether the checkbox is checked</p>
{% highlight js %}$('#myCheckbox').checkbox('isChecked');{% endhighlight %}

<h4>.checkbox('toggle')</h4>
<p>Toggles the checkbox between checked/unchecked states</p>
{% highlight js %}$('#myCheckbox').checkbox('toggle');{% endhighlight %}

<h4>.checkbox('uncheck')</h4>
<p>Unchecks the checkbox</p>
{% highlight js %}$('#myCheckbox').checkbox('uncheck');{% endhighlight %}

</div>
2 changes: 1 addition & 1 deletion _includes/js/combobox-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
</div>

<br/>
<h5>Sample Methods</h5>
<h5 id="combobox-examples-sample-methods">Sample Methods</h5>
<div class="btn-group clearfix">
<button id="btnComboboxGetSelectedItem" type="button" class="btn btn-default">log item</button>
<button id="btnComboboxSelectByValue" type="button" class="btn btn-default">set by value (1)</button>
Expand Down
Loading