jQuery Simple Bt Checks Plugin Examples

States Demo check's states


Code example

$('.checked-by-js').prop('checked', true); //check input with jQuery
$('#states-1 input[type="checkbox"]').simpleBtChecks();

Sizes 'size' plugin setting

Code example


$('#sizes-1 input[type="checkbox"]').simpleBtChecks();//default size is 'default'
$('#sizes-2 input[type="checkbox"]').simpleBtChecks({ size: "x-2" });
$('#sizes-3 input[type="checkbox"]').simpleBtChecks({ size: "x-3" });

Colors 'class' plugin setting

You can pass any class, but we recommend at least 'btn' bootstrap class. Default classes: 'btn btn-default'


Code example


$('.color_1 input[type="checkbox"]').simpleBtChecks({ size: "x-2" }); 
// default bt class: 'btn btn-default'

$('.color_2 input[type="checkbox"]').simpleBtChecks({ 
	size: 'x-2',
	class : 'btn btn-primary' 
});
$('.color_3 input[type="checkbox"]').simpleBtChecks({ 
	size: 'x-2',
	class : 'btn btn-success' 
});
$('.color_4 input[type="checkbox"]').simpleBtChecks({ 
	size: 'x-2',
	class : 'btn btn-info' 
});
$('.color_5 input[type="checkbox"]').simpleBtChecks({ 
	size: 'x-2',
	class : 'btn btn-warning' 
});
$('.color_6 input[type="checkbox"]').simpleBtChecks({ 
	size: 'x-2',
	class : 'btn btn-danger' 
});
$('.color_7 input[type="checkbox"]').simpleBtChecks({ 
	size: 'x-2',
	class : 'btn btn-link' 
});

Events Callbacks

  • onLoadSbtc: For each input a node is created. After this node is placed run this event, and return newNodeElement (node) and input loop index (int)
  • beforeChange: Before check change run beforeChange event, and return (bool) and nodeElement (node)
  • afterChange: After check change run beforeChange event, and return (bool) and nodeElement (node)

onLoadSbtc 			
beforeChange - is checked? 	
afterChange - is checked?	

Code example


$('#events-1 input[type="checkbox"]').simpleBtChecks({
    size: "x-2",
    icon: "glyphicon glyphicon-heart-empty",
    onLoadSbtc : function(newNodeElement, index){

        console.log('function onLoadSbtc - newNodeElement:');
        console.log(newNodeElement);
        $('#out-ev').text( 'Open js console :P - Input number: ' + index);
    },
    beforeChange : function (isChecked, nodeElement){

        $('#out-ev-1').text(isChecked);
    },
    afterChange : function (isChecked, nodeElement){

        $('#out-ev-2').text(isChecked);
        if (isChecked) nodeElement.addClass('btn-success').removeClass('btn-danger');
        else  nodeElement.addClass('btn-danger').removeClass('btn-success');
    }
});

Amazing with full css Yeah!

Only by css :D fantasy-example.css

For more inspiration visit: Codrops example


Code example


//basic init
$('#customize-1 input[type="checkbox"]').simpleBtChecks({
	class: "btn btn-fantasy" //add button custom class css
});

Options

//default options
$('input[type="checkbox"]').simpleBtChecks
({
	size: "default",
	class: "btn btn-default",
	icon : "glyphicon glyphicon-ok",

	onLoadSbtc : null,
	beforeChange : null,
	afterChange : null
});

//equivalent of
$('input[type="checkbox"]').simpleBtChecks();

Get started

Really? ok e_e Necessary libs:

  • Framework Bootstrap (css) 3.x.x
  • Simple-bt-checks css
  • jQuery 2.x.x
  • Simple-bt-checks js

HTML generated for each check

<button type="button" 
        class="sbtc-btn btn btn-default sbtc-default">
	
	<span class="sbtc-icon glyphicon glyphicon-ok ">
	</span>
</button>