jQuery Plugin For Labeled Checkbox and Radio Button - Labelauty
File Size: | 10.6 KB |
---|---|
Views Total: | 13454 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Labelauty is a stunning and subtle jQuery plugin for creating checkboxes and radio buttons with checked or unchecked custom labels. The plugin makes use of data-labelauty
attribute to create custom (un)checked label text that should be separated with '|' (vertical bar character).
Basic Usage:
1. Include jQuery javascript library on your web page.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
2. Include jQuery labelauty script and stylesheet on your web page.
<script type="text/javascript" src="jquery-labelauty.js"></script> <link rel="stylesheet" href="ajquery-labelauty.css" type="text/css" media="screen" charset="utf-8" />
3. Create a standard Html checkbox. Using data-labelauty
attribute to create your own (un)checked label text.
<input class="demo" type="checkbox" data-labelauty="Don't synchronize files|Synchronize my files" checked/>
4. Call the plugin with default options.
<script> $(document).ready(function(){ $(".demo").labelauty({ // Development Mode // This will activate console debug messages development: false, // Trigger Class // This class will be used to apply styles class: "labelauty", // Use icon? // If false, then only a text label represents the input icon: true, // Use text label ? // If false, then only an icon represents the input label: true, // Separator between labels' messages // If you use this separator for anything, choose a new one separator: "|", // Default Checked Message // This message will be visible when input is checked checked_label: "Checked", // Default UnChecked Message // This message will be visible when input is unchecked unchecked_label: "Unchecked", // Force random ID's // Replace original ID's with random ID's, force_random_id: false, // Minimum Label Width // This value will be used to apply a minimum width to the text labels minimum_width: false, // Use the greatest width between two text labels ? // If this has a true value, then label width will be the greatest between labels same_width: true }); }); </script>
Change logs:
v1.1.3 (2017-08-13)
- Fixed CSP issue.
- Yarn integration.
v1.1.2 (2016-11-16)
- Add "icon" visibility true/false settings
v1.1.1 (2016-07-04)
- Added ARIA attributes
v1.1.0 (2015-03-14)
- Fixed: Not working with blank IDs.
v1.0.1 (2015-01-21)
- Fixed: Width returning 0 when element is hidden
This awesome jQuery plugin is developed by fntneves. For more Advanced Usages, please check the demo page or visit the official website.