MinimalCompsJS 0.1 Release

Oct 11 2011 Published by under Components, JavaScript

Well, it’s high time I got these out there so people can use them.

See them in action: http://www.bit-101.com/MinimalCompsJS/release/0.1/

I’ve combined all the files into one and minified it so you only need to include a single file, plus jQuery.

The html for the above example is simply:

<!DOCTYPE html>

<html>
<head>
    <title>Page Title</title>
    <script type="text/javascript" src="jquery-1.5.min.js"></script>
    <script type="text/javascript" src="MinimalComps-0.1.min.js"></script>
    <script type="text/javascript" src="test.js"></script>
</head>

<body>
    <div id="comps"/>
</body>
</html>

And test.js is as follows:

$(function() {
	var div = $("#comps").get(0);

	new mc.VSlider(div, 10, 10)
		.bindLabel(new mc.Label(div, 15, 125).setAlign("center"), 0);

	new mc.HSlider(div, 30, 10)
		.bindLabel(new mc.Label(div, 145, 10), 0);

	new mc.RadioButton(div, 30, 30, "Option 1");
	new mc.RadioButton(div, 30, 45, "Option 2");
	new mc.RadioButton(div, 30, 60, "Option 3");
	new mc.RadioButton(div, 30, 75, "Option 4");

	new mc.CheckBox(div, 100, 30, "Check 1");
	new mc.CheckBox(div, 100, 45, "Check 2");
	new mc.CheckBox(div, 100, 60, "Check 3");
	new mc.CheckBox(div, 100, 75, "Check 4");

	new mc.Label(div, 170, 10, "Enter name:");
	new mc.InputText(div, 235, 7);

	new mc.Pushbutton(div, 170, 40, "Click me!");
});

And here you can download all the source files, the test files, the combined js, and minified js files:

http://www.bit-101.com/MinimalCompsJS/release/0.1/MinimalComps-0.1.zip

I need to do some documentation, but looking through the source files should give you a pretty good idea of what’s going on. You’re smart people after all. If you make anything cool using them, be sure to share.

3 responses so far. Comments will be closed after post is one year old.

  • Ed Salvana says:

    Hi Keith,

    Thanks for these, they are super useful and easy to use! I used them on one of my first canvas experiments today: http://www.ed.visualgratis.com/experiments/helloCanvas/

    One thing i found was i needed button groups for radio buttons, seemed that all radio buttons belonged to one group. Got around it easily enough with some simple logic, but might be a handy feature to have! Thanks again!

  • keith says:

    Very cool! yes, I’ll add groups for RBs. Not a big deal, just put it off for a next release.

  • Christian says:

    I’ve used your AS3 version of this for a long time and really happy you have ported this to JS.

    Only thing I regret is that you have made the Mimimal Comps JS dependant on JQuery. What if future (or older) versions of Jquery is incompatible with the version you have based Mimimal Comps on?

    It would be a much stronger library if you weeded out Jquery all together.
    But dude, major thumbs for doing this anyway 🙂

    Cheers,
    Chris