iPhone style checkboxes for Symfony

No one worry, I did in fact survive my birthday and subsequent party!

Anyway, I was poking around for some cool UI elements for checkboxes and stumbled across this neat jQuery plugin – http://github.com/tdreyno/iphone-style-checkboxes Basically, what it does is converts checkboxes into iPhone style toggles.

Check out a demo at http://tdreyno.github.com/iphone-style-checkboxes/

This is for a symfony project (shocker!), so I figured I’d roll it into a widget and share.

You’ll need to download and include the JS+CSS+images for the plugin yourself and then copy the following code into your project:

	<?php
	class sfWidgetFormInputiPhoneCheckbox extends sfWidgetFormInputCheckbox {
	public function __construct($options = array(), $attributes = array())
	{
	$this->addOption('checked_label');
	$this->addOption('un_checked_label');
	parent::__construct($options, $attributes);
	}
	public function render($name, $value = null, $attributes = array(), $errors = array())
	{
	$str = parent::render( $name, $value, $attributes, $errors );
	$checkedLabel = $this->getOption("checked_label");
	$uncheckedLabel = $this->getOption("un_checked_label");
	$id = $this->generateId($name);
	$str .= <<<EOF
	<script type='text/javascript'>
	$(document).ready( function(){
	$('#$id').iphoneStyle({
	checkedLabel: '$checkedLabel',
	uncheckedLabel: '$uncheckedLabel'
	});
	});
	</script>
	EOF;
	return $str;
	}
	}

view raw gistfile1.php hosted with by GitHub

Using it is straightforward:

    $this->setWidgets(array(
      'show-upcoming-events-nav' => new sfWidgetFormInputiPhoneCheckbox( array("checked_label" => "on", "un_checked_label" => "off") ),
    ));