jQuery плагин

jquery.nicelabel.js версия 1.0

Краткое описание функциональности

Включите плагин, выполните простую конфигурацию, и вы сможете сделать флажки и переключатели более привлекательными.

Скриншоты

Онлайн DEMO

DEMO

Способ использования

Есть три типа стилей:

1. Прямоугольный слайдер, требует добавления класса class="rect-nicelabel" к нужному полю ввода.

2. Окружной слайдер, требует добавления класса class="circle-nicelabel" к нужному полю ввода.

3. Текстовый значок кнопка, требует добавления класса class="text-nicelabel" к нужному полю ввода.

Настройка базовых свойств осуществляется через атрибут data-nicelabel='{}' (формат JSON).

Доступные параметры для настройки:

1. position_class: 'someClass', этот параметр позволяет настроить класс позиционирования кнопки (необязательный параметр, значение по умолчанию — nicelabel-default-position).

2. checked_text: 'someValue', этот параметр указывает текст, отображаемый при выборе текстового значка кнопки (необязательный параметр, значение по умолчанию — Checked).

3. unchecked_text: 'someValue', этот параметр указывает текст, отображаемый при незаполнении текстового значка кнопки (необязательный параметр, значение по умолчанию — Unchecked).```html

$('selector').nicelabel();

Если это кнопка с текстом, можно настроить

$('selector').nicelabel({
    uselabel: true или false,//отображение значков, значение по умолчанию true

    checked_ico: 'imgurl',//значок при выборе (если не указано, используется значок по умолчанию)

    unchecked_ico: 'imgurl',//значок при невыборе (если не указано, используется значок по умолчанию)

    checked_text: 'Текст',	//текст при выборе (значение по умолчанию Checked)

    unchecked_text: 'Текст',	//текст при невыборе (значение по умолчанию Unchecked)

});

//включите файл jquery, css и js nicelabel
<link href="./nicelabel/css/jquery-nicelabel.css" rel="stylesheet" type="text/css"/>
<script src="./nicelabel/js/jquery.min.js"></script>
<script src="./nicelabel/js/jquery.nicelabel.js"></script>
    <script>
    $(function(){
        //инициализация
        $('#rect-checkbox > input').nicelabel();
        //инициализация с параметрами
        $('#text-checkbox-ico > input').nicelabel({
            checked_ico: './checked.png',
            unchecked_ico: './unchecked.png'
        });
        
    });
    </script>

Спасибо Francisco Neves за идею

Послесловие

Этот вариант 1.0 будет обновляться в будущем, ожидайте больше стилей и настроек.

При цитировании сохраните информацию об авторстве.

Автор: PJY

Официальный аккаунт Weibo: @MiaoliuNet