blondeskee / fa-multi-button

jQuery plugin to create modern buttons with Font Awesome icons

fa-multi-button

Modern toggle, push button or just a signal indicator

Features

• Create toggle buttons with font awesome icons
• Create push buttons with glow off effect
• Create read only buttons as an indicator control

Usage

$(selector).famultibutton(options);

Examples

<div id="btn1"></div>

<script>
    $(function() {
        btn = $('#btn1').famultibutton();
		btn.setOn();
    });
</script>

More examples with fa-multi-button

Options

• icon: The foreground font awesome icon name (default: 'fa-power-off')
• backgroundIcon: The background font awesome icon name (default: 'fa-circle')
• offColor: Color of the foreground in state off (default: '#2A2A2A')
• offBackgroundColor: Color of the foreground in state off (default: '#505050')
• onColor: Color of the foreground in state on (default: '#2A2A2A')
• onBackgroundColor: Color of the background in state on (default: '#aa6900')
• classes: Array of optional font awesome classes to add to selector (default: 'fa-3x')
• mode: Sets the kind of button: 'toggle', 'push' or 'signal' (default='toggle')
• toggleOn: Function called in state on
• toggleOff: Function called in state off

See the list for all available icons

Dont forget the 'fa-' suffix in icon and backgroundIcon name.

Hooks

<script>
	$('.button').famultibutton({
		icon: 'fa-lock',
		onColor: '#ffffff',
		offColor: '#ffffff',
		onBackgroundColor: '#33dd00',
		toggleOn: function( ) { /*make something*/ },
		toggleOff: function( ) { /*make something*/ }
	});
</script>

Update call for multi instances

<div class="button" device="mylamp"></div>
<div class="button" device="otherlamp"></div>

<script>

// init buttons
 $('.button').each(function(index) {
 	
 	var device = $(this).attr('device');
 	var elem = $(this).famultibutton({
		icon: 'fa-lightbulb-o',
		backgroundIcon: 'fa-circle',
		offColor: '#2A2A2A',
		onColor: '#2A2A2A',
		// Called in toggle on state.
		toggleOn: function( ) { setSomething( device,"on" ); },
	   	toggleOff: function( ) { setSomething( device,"off" ); },
	});
	// store instance into data
	elem.data('famultibutton',elem);
 });
 
 // update buttons
 function doUpdate() {
 	$('.button').each(function(index) {
 	  var state = getSomething( $(this).attr('device') );
	  if ( state == 'on' )
		$(this).data('famultibutton').setOn();
	  else
		$(this).data('famultibutton').setOff();
 	});
 }
</script>

License

This project is licensed under MIT.