tristate
Version:
Turn any checkbox into a tristate checkbox. Including .val() extension and pseudo selectors.
318 lines (275 loc) • 8.76 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery.Tristate</title>
<!-- jQuery/jQueryUI (hosted) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<!-- Markdown parser -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Converter.min.js"></script>
<!-- Prettyprint -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<!-- Index -->
<style>
body {
font-family: "Segoe UI", Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;
padding: 3em 8em 1em 4em;
}
#menu {
margin-bottom: 2em;
}
#preview {
border: solid thin silver;
padding: 2em;
margin: 0 20%;
text-align: center;
box-shadow: 0 0 2em silver;
}
.chapter {
-webkit-columns: 460px;
-moz-columns: 460px;
columns: 460px;
-webkit-column-gap: 4em;
-moz-column-gap: 4em;
column-gap: 4em;
-webkit-column-rule: thin solid silver;
-moz-column-rule: thin solid silver;
column-rule: thin solid silver;
text-align: justify;
}
h1,
h2 {
background: black;
color: white;
padding: .2em .4em;
}
h1 {
margin-top: 1em;
}
h2 {
background: gray;
}
hr {
border-top: double;
margin: 2em 25%;
}
#footer {
margin-top: 4em;
text-align: center;
color: silver;
border-top: thin solid silver;
padding-top: 1em;
}
.output {
font-family: monospace;
border: solid thin silver;
padding: .2em .4em;
background-color: #cf3;
}
.clickable {
cursor: pointer;
}
pre {
tab-size: 4;
overflow-x: auto;
background-color: #eee;
-webkit-column-break-inside: avoid;
}
</style>
<script>
$(function() {
function tabsToSpaces(line, tabsize) {
var out = '',
tabsize = tabsize || 4,
c;
for (c in line) {
var ch = line.charAt(c);
if (ch === '\t') {
do {
out += ' ';
} while (out.length % tabsize);
} else {
out += ch;
}
}
return out;
}
function visualizeElement(element, type) {
var code = $(element).html().split('\n'),
tabsize = 4,
minlength = 2E53,
l;
// Convert tabs to spaces
for (l in code) {
code[l] = tabsToSpaces(code[l], tabsize);
}
// determine minimum length
var minlength = 2E53;
var first = 2E53;
var last = 0;
for (l in code) {
if (/\S/.test(code[l])) {
minlength = Math.min(minlength, /^\s*/.exec(code[l])[0].length);
first = Math.min(first, l);
last = Math.max(last, l);
}
}
code = code.slice(first, last + 1);
// strip tabs at start
for (l in code) {
code[l] = code[l].slice(minlength);
}
// recombine
code = code.join('\n');
var fragment = $('<pre class="prettyprint"><code/></pre>').text(code).insertAfter(element);
$('<h3 class="clickable">'+type+'…</h3>').insertBefore(fragment).click(function() {
fragment.slideToggle();
});
}
// extract html fragments
$('div.prettyprint, span.prettyprint').each(function() {
visualizeElement(this, 'HTML');
});
// extract scripts
$('script.prettyprint').each(function() {
visualizeElement(this, 'Javascript');
});
// Include the readme
var markdown = new Markdown.Converter();
$.get('README.md', function(readme) {
$('#readme').html(markdown.makeHtml(readme));
$('#readme h1').each(function() {
$(this).nextUntil('h1').wrapAll('<div class="chapter"/>');
});
$('#readme pre').addClass('prettyprint');
prettyPrint();
// build menu
var menuitems = [];
$('h1').each(function() {
var text = $(this).text(),
id = $(this).attr('id') || 'chapter '+text;
$(this).attr('id', id);
menuitems.push('<a href="#'+id+'">'+text+'</a>');
});
$(menu).html(menuitems.join(' — '));
}, 'html');
});
</script>
<!-- Plugin -->
<script src="jquery.tristate.js"></script>
</head>
<body>
<a href="https://github.com/vanderlee/tristate"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<div id="menu"></div>
<div id="preview">
<input type="checkbox" id="preview-tristate" indeterminate="indeterminate"/><label for="preview-tristate">Click to change between checked, unchecked and indeterminate states!</label>
<script>
$(function() {
$('#preview-tristate').tristate();
});
</script>
</div>
<div id="book">
<div id="readme"></div>
<h1>Examples</h1>
<div id="examples" class="chapter">
Try it yourself…
<h2>Quick start (look in console)</h2>
<div class="prettyprint">
<input type="checkbox" class="tristate" value="1"/>
<input type="checkbox" class="tristate" value="1" checked="checked"/>
<input type="checkbox" class="tristate" value="1" indeterminate="1"/>
</div>
<script class="prettyprint">
$(function() {
$('.tristate').tristate({
change: function(state, value) {
console.log('Input:', this);
console.log('Unknown?', state === null);
console.log('Known?', state !== null);
console.log('Checked?', state === true);
console.log('Unhecked?', state === false);
}
});
});
</script>
<h2>Alternative values; "Good", "Maybe", "Bad"</h2>
<div class="prettyprint">
<div><input id="tristate" type="checkbox"/></div>
<div>Current value returned by <code>$.val()</code>: <span id="tristate-value" class="output"></span></div>
</div>
<script class="prettyprint">
$(function() {
function output(state, value) {
$('#tristate-value').text(value);
}
var $tristate = $('#tristate').tristate({
checked: "Good",
unchecked: "Bad",
indeterminate: "Maybe",
init: output,
change: output
});
});
</script>
<h2>Set state by method calls</h2>
<div class="prettyprint">
<div><input id="set-by-method" type="checkbox"/></div>
<div>
<button id="setChecked">set checked</button>
<button id="setUnchecked">set unchecked</button>
<button id="setIndeterminate">set indeterminate</button>
<button id="doJqClick">jQuery click</button>
<button id="doJsClick">JS click</button>
</div>
</div>
<script class="prettyprint">
$(function() {
var $tristate = $('#set-by-method').tristate();
$('#doJqClick').click(function() {
$tristate.click();
});
$('#doJsClick').click(function() {
$tristate.get(0).click();
});
$('#setIndeterminate').click(function() {
$tristate.tristate('state', null);
});
$('#setChecked').click(function() {
$tristate.tristate('state', true);
});
$('#setUnchecked').click(function() {
$tristate.tristate('state', false);
});
});
</script>
<h2>HTML expando attributes for values (1/0/?)</h2>
<div class="prettyprint">
<div><input type="checkbox" id="expando" value="" checkedvalue="1" uncheckedvalue="0" indeterminatevalue="?"/></div>
<div>Current value returned by <code>$.val()</code>: <span id="expando-value" class="output"></span></div>
</div>
<script class="prettyprint">
$(function() {
function output(state, value) {
$('#expando-value').text(value);
}
$('#expando').tristate({
init: output,
change: output
});
});
</script>
</div>
<h1>Unittest</h1>
<div id="unittest" class="chapter">
jQuery.tristate comes with a complete set of QUnit-based unittests.<br/>
Click here to run the tests in a new window: <a href="test/index.html" target="_blank">Unittests</a>
</div>
</div>
<div id="footer">
Copyright © 2013 Martijn van der Lee. MIT Open Source license applies.
</div>
</body>
</html>