jquery-input-switch

jQuery toggle switch input component

Installation

npm install @netliva/jquery-input-switch 

or

yarn add @netliva/jquery-input-switch

Add to project

if you are use yarn import package your project

// add your script file
import '@netliva/jquery-input-switch'

or add inline

<!-- add base html file -->
<script src="/node_modules/@netliva/jquery-input-switch/src/js/netliva_switch.js"></script>
<link rel="stylesheet" href="/node_modules/@netliva/jquery-input-switch/src/css/netliva_switch.css">

Usage

Basic Usage

<input type="checkbox" netliva-switch />
<input type="checkbox" netliva-switch checked />

Sizes

Small Usage

<input type="checkbox" netliva-switch data-size="small" />
<input type="checkbox" netliva-switch data-size="small" checked />

Large Usage

<input type="checkbox" netliva-switch data-size="large" />
<input type="checkbox" netliva-switch data-size="large" checked />

Change Text And Color

<input type="checkbox"
       netliva-switch
       data-active-text="Yes "
       data-passive-text="No"
       data-active-color="#0A0"
       data-passive-color="#C00"
/>
<input type="checkbox"
       netliva-switch
       data-size="small"
       data-active-text="On"
       data-passive-text="Off"
       data-active-color="#0A0"
       data-passive-color="#C00"
       checked
/>

If you use bootstrapp or color css variable, you can use variable name for color

<input type="checkbox"
       netliva-switch
       data-active-color="info"
       data-passive-color="danger"
/>

Disabled Usage

<input type="checkbox"
       netliva-switch
       data-active-color="#0A0"
       data-passive-color="#C00"
       disabled
/>

Javascript Usage

<input id="example-input" type="checkbox" />
<script type="text/javascript">
	jQuery(function ($){
		$("#example-input").netlivaSwitch({
			'size': 'small',
			'active-text': 'On',
			'passive-text': 'Off',
			'active-color': '#0f9983',
			'passive-color': '#ba1c00',
			'width' : '100px'
		});
	});
</script>

Options

Get State and Set State

<input id="example-input" type="checkbox" netliva-switch />
<script type="text/javascript">
	jQuery(function ($){
		$("#example-input").netlivaSwitch('state'); // return false
		$("#example-input").netlivaSwitch('state', true); // switch to active
		$("#example-input").netlivaSwitch('state'); // return true
	});
</script>

On Change

if switch the input, triggered the function named netlivaSwitch.change

<input id="example-input" type="checkbox" netliva-switch />
<script type="text/javascript">
	jQuery(function ($){
		$("#example-input").on('netlivaSwitch.change', function(event, state, element) {
			console.log(state);
	    });
	});
</script>