Oasis Chex Demo
Sometimes when we have a huge wall of checkboxes, it can get overwhelming. That's where Chex comes in: to simplify your checkboxes into a sexy, easy-to-use interface. Setting it up is a breeze, too. Check it out:
Demo
Turn this:
into this:
Include the Javascript and CSS files. Note: this requires jQuery.
<script src="oasis.chex.js"></script>
<script src="jquery-latest.js"></script>
<link href="oasis.chex.css" rel="stylesheet">Set up your checkboxes
<div id="album">
<input type="checkbox" name="song[1]" data-name="All We Are"> <label>All We Are</label>
<input type="checkbox" name="song[2]" data-name="Incredible Machine"> <label>Incredible Machine</label>
<input type="checkbox" name="song[3]" data-name="Stuck Like Glue"> <label>Stuck Like Glue</label>
<input type="checkbox" name="song[4]" data-name="Tonight"> <label>Tonight</label>
<input type="checkbox" name="song[5]" data-name="Stand Up"> <label>Stand Up</label>
<input type="checkbox" name="song[6]" data-name="Incredible Machine"> <label>Incredible Machine</label>
<input type="checkbox" name="song[7]" data-name="Every Girl Like Me"> <label>Every Girl Like Me</label>
<input type="checkbox" name="song[8]" data-name="Little Miss"> <label>Little Miss</label>
<input type="checkbox" name="song[9]" data-name="Find the Beat Again"> <label>Find the Beat Again</label>
<input type="checkbox" name="song[10]" data-name="Wide Open"> <label>Wide Open</label>
<input type="checkbox" name="song[11]" data-name="Shine the Light"> <label>Shine the Light</label>
</div>Instantiate Chex
<script>
$(document).ready(function() {
var chex = new Oasis.Chex($('#album'), {title: "Incredible Machine by Sugarland" });
});
</script>Grouping Items
Sometimes you want to visually group your checkboxes together in semantic categories. For instance, our above example could be broken up into albums:
which can be easily done by wrapping your categories in a div with a rel attribute of "chex-group", like so:
<div id="mix2">
<div rel="chex-group" data-title="Incredible Machine">
<input type="checkbox" name="song[1]" data-name="All We Are" />
<input type="checkbox" name="song[2]" data-name="Incredible Machine" />
<input type="checkbox" name="song[3]" data-name="Stuck Like Glue" />
<input type="checkbox" name="song[4]" data-name="Tonight" />
<input type="checkbox" name="song[5]" data-name="Stand Up" />
<input type="checkbox" name="song[6]" data-name="Incredible Machine (Interlude)" />
<input type="checkbox" name="song[7]" data-name="Every Girl Like Me" />
<input type="checkbox" name="song[8]" data-name="Little Miss" />
<input type="checkbox" name="song[9]" data-name="Find the Beat Again" />
<input type="checkbox" name="song[10]" data-name="Wide Open" />
<input type="checkbox" name="song[11]" data-name="Shine the Light" />
</div>
<div rel="chex-group" data-title="Enjoy the Ride">
<input type="checkbox" name="song[1]" data-name="Settlin'" />
<input type="checkbox" name="song[2]" data-name="County Line" />
<input type="checkbox" name="song[3]" data-name="Want To" />
<input type="checkbox" name="song[4]" data-name="Everyday America" />
<input type="checkbox" name="song[5]" data-name="Happy Ending" />
<input type="checkbox" name="song[6]" data-name="These Are the Days" />
<input type="checkbox" name="song[7]" data-name="One Blue Sky" />
<input type="checkbox" name="song[8]" data-name="April Showers" />
<input type="checkbox" name="song[9]" data-name="Mean Girls" />
<input type="checkbox" name="song[10]" data-name="Stay" />
<input type="checkbox" name="song[11]" data-name="Sugarland" />
</div>
</div>