Lightweight pure Javascript checkbox animation plug-in, javascriptcheckbox

Lightweight pure Javascript checkbox animation plug-in, javascriptcheckbox

Checkbix is a lightweight pure Javascript checkbox animation plug-in. With this plug-in, you can make some interesting animations when the native checkbox check box is clicked.

Download Online Preview source code

Install

You can use bower or npm to install the checkbox animation plug-in.

12	bower install checkbixnpm install checkbix

Usage

Access the checkbix.min.css and checkbix. min/js files on the page.

12	<link rel="stylesheet" href="dist/css/checkbix.min.css"><script src="dist/js/checkbix.min.js"></script>

HTML Structure

The basic HTML structure of this check box is as follows:

1	<input id="mycheckbox" type="checkbox" class="checkbix" data-text="Checkbix">

Initialize the plug-in

You can useCheckbix.init()Method to instantiate allcheckbixThe check box of the class.

123	<script>    Checkbix.init();</script>

Configuration parameters

In<checkbox>Label Configurationdata-*Property to generate check boxes of different types.

• data-text: Display text of the check box.
• data-size: The size of the check box, which can be set to 'large '.
• data-shape: Shape of the check box, which can be set to 'circled '.
• data-color: The color of the check box, which can be set to 'black', 'Blue ', 'red', 'Gray', or 'Orange '.
• data-arialabel: Custom ARIA tag.

The majority of dataworks are defined in the checkbix.css file. You can also customize your own styles.

The github address of the checkbix check box animation plug-in is https://github.com/urre/checkbix.

 

Download Online Preview source code

Join the QQ group of front-end enthusiasts (123235875) and click Add group to share progress!