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

Commit

Permalink
Merge pull request #1185 from mbeard/checkbox
Browse files Browse the repository at this point in the history 
Checkbox refactor
  • Loading branch information
@chriscorwin
chriscorwin committed Apr 22, 2015
2 parents 95ef23d + 708b2c9 commit f475eab
Show file tree
Hide file tree
Showing 6 changed files with 402 additions and 298 deletions.
60 changes: 32 additions & 28 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
<script type="text/javascript">if(window.console && window.console.clear){ window.console.clear(); }</script>

<link href="index.css" rel="stylesheet" type="text/css">
<!--<link href="http://www.fuelcdn.com/fuelux-mctheme/1.4.0/css/fuelux-mctheme.css" rel="stylesheet" type="text/css" />-->

<script src="bower_components/requirejs/require.js"></script>
<script type="text/javascript">
Expand Down Expand Up @@ -52,97 +53,97 @@ <h2>Checkboxes</h2>
<div class="thin-box">

<section id="checkboxes-block">

<div class="checkbox">
<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox1">
<input class="sr-only" type="checkbox" value="">
<span class="checkbox-label">Custom checkbox unchecked on page load</span>
<input type="checkbox" class="sr-only">
Custom checkbox unchecked on page load
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox2">
<input checked="checked" class="checked sr-only" type="checkbox" value="">
<span class="checkbox-label">Custom checkbox checked on page load</span>
<input type="checkbox" class="sr-only" checked="checked">
Highlight Custom checkbox checked on page load
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox3">
<input class="sr-only" disabled="disabled" type="checkbox" value="">
<span class="checkbox-label">Custom checkbox disabled and unchecked on page load</span>
<input type="checkbox" class="sr-only" disabled="disabled">
Custom checkbox disabled and unchecked on page load
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox4">
<input checked="checked" class="checked sr-only" disabled="disabled" type="checkbox" value="">
<span class="checkbox-label">Custom checkbox disabled and checked on page load</span>
<input type="checkbox" class="sr-only" checked="checked" disabled="disabled">
Custom checkbox disabled and checked on page load
</label>
</div>
</section>


<section id="checkboxes-inline">
<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCustomInlineCheckbox1">
<input checked="checked" class="checked sr-only" type="checkbox" value=""> <span class="checkbox-label">1, 2, buckle my shoe</span>
<input type="checkbox" class="sr-only" checked="checked">1, 2, buckle my shoe
</label>
<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCustomInlineCheckbox2">
<input class="sr-only" type="checkbox" value=""> <span class="checkbox-label">3, 4, shut the door</span>
<input type="checkbox" class="sr-only">3, 4, shut the door
</label>
<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCustomInlineCheckbox3">
<input class="sr-only" disabled="disabled" type="checkbox" value=""> <span class="checkbox-label">5, 6, pick up sticks</span>
<input type="checkbox" class="sr-only" disabled="disabled">5, 6, pick up sticks
</label>
<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCustomInlineCheckbox4">
<input checked="checked" class="checked sr-only" disabled="disabled" type="checkbox" value=""> <span class="checkbox-label">7, 8, lay them straight</span>
<input type="checkbox" class="checked sr-only" checked="checked" disabled="disabled">7, 8, lay them straight
</label>
</section>

<section id="checkboxes-toggling">
<div class="checkbox">
<label class="checkbox-custom" data-initialize="checkbox" id="myCustomTogglingCheckbox1">
<input class="sr-only" data-toggle=".checkboxToggle" type="checkbox" value="">
<span class="checkbox-label">Custom checkbox toggles by class</span>
<input type="checkbox" class="sr-only" data-toggle=".checkboxToggle">
Custom checkbox toggles by class
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom" data-initialize="checkbox" id="myCustomTogglingCheckbox2">
<input class="sr-only" data-toggle="#checkboxToggle" type="checkbox" value="">
<span class="checkbox-label">Custom checkbox toggles by id</span>
<input type="checkbox" class="sr-only" data-toggle="#checkboxToggle">
Custom checkbox toggles by id
</label>
</div>
<div aria-hidden="true" class="checkboxToggle alert alert-warning hidden">This message's visibility toggles by class with a checkbox above.</div>
<div aria-hidden="true" class="checkboxToggle alert alert-success hidden">This message's visibility toggles by class with a checkbox above.</div>
<div aria-hidden="true" class="alert alert-info hidden" id="checkboxToggle">This message's visibility toggles by id with a checkbox above.</div>
</section>
<section id="checkboxes-highlighting-block">
<section id="checkboxes-highlighting-block"><!-- why duplicate the highlight classes on div.checkbox and label?, why span.checkbox-label vs. text node, why does checked input require 'checked' class too? -->
<div class="checkbox highlight">
<label class="checkbox-custom highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox1">
<input class="sr-only" type="checkbox" value="">
<span class="checkbox-label">Custom block-level highlight checkbox</span>
<input type="checkbox" class="sr-only">
Custom block-level highlight checkbox
</label>
</div>
<div class="checkbox highlight">
<label class="checkbox-custom highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox2">
<input class="sr-only" type="checkbox" value="">
<span class="checkbox-label">Custom block-level highlight checkbox</span>
<input type="checkbox" class="sr-only">
Custom block-level highlight checkbox
</label>
</div>
<div class="checkbox highlight">
<label class="checkbox-custom highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox3">
<input class="sr-only" type="checkbox" value="">
<span class="checkbox-label">Custom block-level highlight checkbox</span>
<input type="checkbox" class="sr-only">
Custom block-level highlight checkbox
</label>
</div>
<div class="checkbox highlight">
<label class="checkbox-custom highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox4">
<input class="sr-only" type="checkbox" value="">
<span class="checkbox-label">Custom block-level highlight checkbox</span>
<input type="checkbox" class="sr-only">
Custom block-level highlight checkbox
</label>
</div>
</section>
<section id="checkboxes-highlighting-inline">
<label class="checkbox-custom checkbox-inline highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox5">
<input class="sr-only" type="checkbox" value=""> <span class="checkbox-label">Custom inline highlight checkbox</span>
<input type="checkbox" class="sr-only">Custom inline highlight checkbox
</label>
<label class="checkbox-custom checkbox-inline highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox6">
<input class="sr-only" type="checkbox" value=""> <span class="checkbox-label">Custom inline highlight checkbox</span>
<input type="checkbox" class="sr-only">Custom inline highlight checkbox
</label>
</section>
</div>
Expand All @@ -151,6 +152,9 @@ <h2>Checkboxes</h2>
<button type="button" class="btn btn-default" id="btnCheckboxDisable">disable #myCustomCheckbox1</button>
<button type="button" class="btn btn-default" id="btnCheckboxEnable">enable #myCustomCheckbox1</button>
<button type="button" class="btn btn-default" id="btnCheckboxDestroy">destroy and append #myCustomCheckbox1</button>
<button type="button" class="btn btn-default" id="btnCheckboxIsChecked">is #myCustomCheckbox1 checked?</button>
<button type="button" class="btn btn-default" id="btnCheckboxCheck">check #myCustomCheckbox1</button>
<button type="button" class="btn btn-default" id="btnCheckboxUncheck">uncheck #myCustomCheckbox1</button>
</div>
</section>

Expand Down
26 changes: 21 additions & 5 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,17 +35,33 @@ define(function (require) {
$('#myCustomCheckbox1').checkbox('enable');
});
$('#btnCheckboxDestroy').on('click', function () {
var $container = $('#myCustomCheckbox1').parents('.thin-box:first');
var $container = $('#myCustomCheckbox1').parent();
var markup = $('#myCustomCheckbox1').checkbox('destroy');
log(markup);
$container.append(markup);
});
$('#btnCheckboxIsChecked').on('click', function () {
var checked = $('#myCustomCheckbox1').checkbox('isChecked');
log(checked);
});
$('#btnCheckboxCheck').on('click', function () {
$('#myCustomCheckbox1').checkbox('check');
});
$('#btnCheckboxUncheck').on('click', function () {
$('#myCustomCheckbox1').checkbox('uncheck');
});

$('#myCustomCheckbox1').on('changed.fu.checkbox', function(evt, data) {
log('changed', data);
});
$('#myCustomCheckbox1').on('checked.fu.checkbox', function(evt, data) {
log('checked');
});
$('#myCustomCheckbox1').on('unchecked.fu.checkbox', function(evt, data) {
log('unchecked');
});

// $('#myCustomCheckbox1 > input').on('change', function(){
// console.log('changed');
// });

// $('#myCustomCheckbox1').trigger('click');
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
COMBOBOX
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
Expand Down
Loading

0 comments on commit f475eab

Please sign in to comment.