<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>NerdBook &#187; Web Tips</title>
	<atom:link href="http://www.nerdattack.com.my/blog/category/web-tips/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.nerdattack.com.my/blog</link>
	<description>We make awesome web and mobile solutions!</description>
	<lastBuildDate>Sat, 12 Jun 2010 08:57:29 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Beautiful checkboxes &amp; combo boxes with jQuery</title>
		<link>http://www.nerdattack.com.my/blog/2009/09/11/beautiful-checkboxes-combo-boxes-with-jquery/</link>
		<comments>http://www.nerdattack.com.my/blog/2009/09/11/beautiful-checkboxes-combo-boxes-with-jquery/#comments</comments>
		<pubDate>Fri, 11 Sep 2009 02:51:35 +0000</pubDate>
		<dc:creator>Rayson</dc:creator>
				<category><![CDATA[Web Tips]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[form]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.nerdattack.com.my/blog/?p=29</guid>
		<description><![CDATA[
			
				
			
		
If you&#8217;ve been designing websites for ages now, you&#8217;d probably hate it when it comes to creating beautiful forms, only to find that checkboxes &#38; combo boxes allow very little or limited CSS design. Did I mention how each browser draws them differently?
Today I&#8217;ll be sharing a few jQuery plugins that specifically changes how checkboxes [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.nerdattack.com.my%2Fblog%2F2009%2F09%2F11%2Fbeautiful-checkboxes-combo-boxes-with-jquery%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.nerdattack.com.my%2Fblog%2F2009%2F09%2F11%2Fbeautiful-checkboxes-combo-boxes-with-jquery%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p><img class="size-thumbnail wp-image-37 alignleft" title="checkbox" src="http://www.nerdattack.com.my/blog/wp-content/uploads/2009/09/checkbox-150x150.jpg" alt="checkbox" width="150" height="150" />If you&#8217;ve been designing websites for ages now, you&#8217;d probably hate it when it comes to creating beautiful forms, only to find that checkboxes &amp; combo boxes allow very little or limited CSS design. Did I mention how each browser draws them differently?</p>
<p>Today I&#8217;ll be sharing a few jQuery plugins that specifically changes how checkboxes and combo boxes behave.<br />
<span id="more-29"></span></p>
<p style="text-align: left;">
<p style="text-align: left;">
<p style="text-align: left;">
<hr />
<p style="text-align: left;">
<h3>1. Pretty checkboxes with jQuery</h3>
<div id="attachment_32" class="wp-caption aligncenter" style="width: 472px"><img class="size-full wp-image-32 " title="prettycheckbox" src="http://www.nerdattack.com.my/blog/wp-content/uploads/2009/09/prettycheckbox.png" alt="prettycheckbox" width="462" height="215" /><p class="wp-caption-text">Pretty Checkboxes by Aaron</p></div>
<p style="text-align: left;">Aaron has done a pretty good job with this. Who would had thought a simple checkbox could be manipulated and implemented in such a manner? Pretty innovative if you ask me. You can have a look at the script located here, <a href="http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery" target="_blank">Pretty Checkboxes.</a></p>
<h3 style="text-align: left;">2. jQuery checkbox and Radio button</h3>
<div id="attachment_36" class="wp-caption aligncenter" style="width: 367px"><img class="size-full wp-image-36" title="checkbox2" src="http://www.nerdattack.com.my/blog/wp-content/uploads/2009/09/checkbox2.jpg" alt="jQuery checkbox and Radio button by Widowmaker" width="357" height="140" /><p class="wp-caption-text">jQuery checkbox and Radio button by Widowmaker</p></div>
<p style="text-align: left;">Another great implementation of a checkbox, kinda reminds you of how Apple&#8217;s iPhone does it.</p>
<p><strong>Features:</strong></p>
<ol>
<li>only inline elements used, just like default checkoxes</li>
<li>cross-browser look and feel (tested in IE6, IE7, IE8, Firefox and Chrome engines)</li>
<li>work with radio buttons too</li>
<li>supports inline and jQuery attached click events</li>
<li>supports &#8220;label hovering&#8221;: when you point over parent label element, it will highlight its checkbox (thanks to Eugene for the idea)</li>
<li>dynamic skin changing</li>
<li>adds new checkbox events &#8220;check&#8221;, &#8220;uncheck&#8221;, &#8220;disable&#8221;, &#8220;enable&#8221;, ready to use in jQuery.bind() method</li>
</ol>
<p><a href="http://widowmaker.kiev.ua/checkbox/" target="_blank">Grab the script right over here.</a></p>
<h3>3. Accessible radio button and checkbox replacement</h3>
<div id="attachment_51" class="wp-caption aligncenter" style="width: 341px"><img class="size-full wp-image-51" title="checkbox3" src="http://www.nerdattack.com.my/blog/wp-content/uploads/2009/09/checkbox3.jpg" alt="Accessible radio button and checkbox replacement by trixta" width="331" height="179" /><p class="wp-caption-text">Accessible radio button and checkbox replacement by trixta</p></div>
<p>A pretty standard script that replaces radio buttons and checkboxes with a more skinable version. <a href="http://plugins.jquery.com/project/radiobutton-checkbox-replacement" target="_blank">Get the code here.</a></p>
<h3>4. prettyCheckboxes</h3>
<div id="attachment_52" class="wp-caption aligncenter" style="width: 376px"><img class="size-full wp-image-52" title="checkbox4" src="http://www.nerdattack.com.my/blog/wp-content/uploads/2009/09/checkbox4.jpg" alt="prettyCheckboxes by Stéphane Caron" width="366" height="150" /><p class="wp-caption-text">prettyCheckboxes by Stéphane Caron</p></div>
<p>This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability. This implementation has a nice hover-state. <a href="http://www.no-margin-for-errors.com/projects/prettyCheckboxes/">Get the code here.</a></p>
<p>If you come across anymore jQuery plugins, feel free to drop a comment or two :)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.nerdattack.com.my/blog/2009/09/11/beautiful-checkboxes-combo-boxes-with-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
