@netliva/jquery-input-switch

0.1.7 • Public • Published

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

Basic Usage

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

Sizes

Small Usage

Small Usage

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

Large Usage

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

Change Text And Color

Change Text And Color Large Change Text And Color Change Text And Color Small Usage

<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

Change Color With Variable

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

Disabled Usage

Disable 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>

Package Sidebar

Install

npm i @netliva/jquery-input-switch

Weekly Downloads

1

Version

0.1.7

License

MIT

Unpacked Size

13.7 kB

Total Files

7

Last publish

Collaborators

  • bilalyilmax