jQuery Plugins, Tutorials, Articles, Examples Archives

Labelauty jQuery Plugin

A nice and lightweight jQuery plugin that gives beauty to checkboxes and radio buttons and allows custom labels for each status of (un)checked inputs.

Note: Labelauty does not support Internet Explorer 7 and 8.

Installation

bower install labelauty

Fast Usage

Write your checkbox or radio input in body section and call labelauty() to beautify it. Note: Call plugin when document is ready. See below:

<input type="checkbox"/>
$(document).ready(function(){
    $(":checkbox").labelauty();
});

Simple, isn’t it?

Aria Uses

To add a Aria attributes, just add a aria-label. Labelauty will add tabindex, role and checked attributes.

<input aria-label="This branch is awesome" type="checkbox"/>

Use Cases

  • If you want to create user-friendly websites, this is the right choice!
  • Very useful in remember me checkboxes, in settings panel, etc.

How does it work ?

The above case will generate one checkbox with default labels “Checked” and “Unchecked”, one for each input state.

You can change the default labels (see Options section) or give custom labels to each checkbox, like the following example:

<input type="checkbox" data-labelauty="Don't synchronize files|Synchronize my files"/>
$(document).ready(function(){
    $(":checkbox").labelauty();
});

The data-labelauty attribute of radio and checkbox inputs lets you write custom labels for unchecked|checked cases. Pipe character |, is the default separator between these two labels. You can change it (see Options section).

The data-labelauty attribute can be used in three different ways:


Unchecked|Checked

To choose a custom label for Unchecked and Checked states.

<input type="checkbox" data-labelauty="Don't synchronize files|Synchronize my files"/>

Message

Without separator, the Message text will be the permanent label. It means that label will not change between input state.

<input type="checkbox" data-labelauty="Synchronize my files"/>

Omitted

By omitting this attribute, the default labels will be shown.

<input type="checkbox"/>

Options

Set a new class value that will be applied to changed inputs.

$(":checkbox").labelauty({ class: "myclass" });

When label is set to false, only the input icon appears and changes.

$(":checkbox").labelauty({ label: false });

When icon is set to false, only the input text label appears and changes.

$(":checkbox").labelauty({ icon: false });

Change separator between custom labels, in data-labelauty attribute. Choose your separator with separator.

$(":checkbox").labelauty({ separator: "-" });

Do you want to generate random ID’s for all inputs? Change force_random_id to true.

$(":checkbox").labelauty({
    force_random_id: true,
});

Do you want custom default labels? Set new text in checked_label and unchecked_label.

$(":checkbox").labelauty({
    checked_label: "You selected this",
    unchecked_label: "You don't want it"
});

Actually, custom labels have different number of characters or width. So, you can set minimum-width to custom CSS option.

$(":checkbox").labelauty({ minimum_width: "170px" });

If you dislike the previous option, then you can set labels with the same width. Just set same_width to true.

$(":checkbox").labelauty({ same_width: true });


Related Plugins

jQuery Validation Plugin
Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy.
Plugin Author : Roni Saha
jQuery File Upload
jQuery File Upload is a jQuer Plugin with multiple file selection, drag&drop support, progress bars and preview images with any server-side platform
Plugin Author : Sebastian Tschan
jQuery Complexify
Complexify helps your users accurately gauge the quality of their password and then give them visual feedback to enforce a minimum level of security.
Plugin Author : Dan Palmer

Leave a Reply

Loading...