jStyling

$.jStyling({'fileButtonText': 'Upload file'})
        

Селекты

До стилизации:
<select name="select1" >...</select>

После:
<div class="jstyling-select">
    <div class="jstyling-select-l">
        <div class="item-1">Option 1</div>
        <div class="item-2" disabled="true">Option 2</div>
        <div class="item-3">Option 3</div>
    </div>
    <div class="jstyling-select-s">
        <div class="jstyling-select-t">Option 1</div>
    </div>
    <select name="select1" style="display: none;">...</select>
</div>
        

Для работы с селектами в jStyling есть 3 метода:

1. $.jStyling.createSelect(elements [, options]) — создание стилизованного селекта.
2. $.jStyling.updateSelect(elements) — обновление селекта.
3. $.jStyling.destroySelect(elements) — удаление стилизованного селекта.

$.jStyling.createSelect(elements [, options])

Параметры:

1. elements — селекты к которым будет приминяться стилизация.
2. options — необязательный параметр, дополнительные настройки.
   Представляет собой объект {extraClass: 'className'}, где extraClass — дополнительные классы для стилизованного селекта.

Примеры:

/**
 * Стилизовать все селекты
 */
 $.jStyling.createSelect($('select'));
/**
 * Стилизовать селект с name=extra, у стилизованного селекта будет
 * дополнительный класс "extra". Ширина стилизованного селекта = ширине селекта.
 */
 $.jStyling.createSelect($('select[name="extra"]'), {extraClass: 'myExtraClass'});
        

$.jStyling.updateSelect(elements)

Параметр elements — селекты которые будут обновлены.

Метод применяется в случаях обновления содержимого селекта (например после ajax подгрузки), блокировки/разблокировки отдельного <option> или селекта вцелом.

Примеры:

/**
 * Обновить все селекты
 */                               
 $.jStyling.updateSelect($('select'));
/**
 * Заблокировать селект с name=extra
 */
 $('select[name="extra"]).attr('disabled','true');                                  
 $.jStyling.updateSelect($('select[name="extra"]'));
        

$.jStyling.destroySelect(elements)

Параметр elements — селекты у которых будет убрана стилизация.

Примеры:

/**
 * Удалить стилизацию у всех селектов
 */ 
 $.jStyling.destroySelect($('select'));
/**     
 * Удалить стилизацию у селекта с name=extra
 */            
 $.jStyling.destroySelect($('select[name="extra"]'));
        

Чекбоксы

До стилизации:
<input type="checkbox" name="checkbox">

После:        
<div class="jstyling-checkbox">
    <input type="checkbox" name="checkbox">
</div>            
        

Для работы с чекбоксами есть 3 метода:

1. $.jStyling.createCheckbox(elements [, options]) — создание стилизованного чекбоксов.
2. $.jStyling.updateCheckbox(elements) — обновление чекбоксов.
3. $.jStyling.destroyCheckbox(elements) — удаление стилизованных чекбоксов.

$.jStyling.createCheckbox(elements [, options])

Параметры:

1. elements — чекбоксы к которым будет приминяться стилизация.
2. options — необязательный параметр, дополнительные настройки.
   Options представляет собой объект {extraClass: 'className'}, где extraClass — дополнительные классы для стилизованного чекбокса.

Пример:

/**
 * Стилизовать все чекбоксы
 */                               
 $.jStyling.createCheckbox($('input[type=checkbox]'));
        

$.jStyling.updateCheckbox(elements)

elements — чекбоксы которыe будем обновлять.

Примеры:

/**
 * Обновить все чекбоксы
 */                               
 $.jStyling.updateCheckbox($('input[type=checkbox]'));
/**
 * Заблокировать чекбокс с id=terms
 */
 $('#terms).attr('disabled','true');                                  
 $.jStyling.updateCheckbox($('#terms'));
        

$.jStyling.destroyCheckbox(elements)

elements — чекбоксы у которых удаляем стилизацию.

Пример:

/**
 * Удалить стилизацию у всех чекбоксов
 */                               
 $.jStyling.destroyCheckbox($('input[type=checkbox]'));
        

Радио-кнопки

До стилизации:
<input type="radio" name="radio">

После:        
<div class="jstyling-radio">
    <input type="radio" name="radio">
</div>         
        

Для работы с радио-кнопками в jStyling есть 3 метода:

1. $.jStyling.createRadio(elements [, options]) — создание стилизованных радио-кнопок.
2. $.jStyling.updateRadio(elements) — обновление радио-кнопок.
3. $.jStyling.destroyRadio(elements) — удаление стилизованных радио-кнопок.

Входные парамеры и принцип действия такой же как и у чекбоксов.

Файл-инпут

До стилизации:
<input type="file" size="30" name="file" id="file">

После:
<div class="jstyling-file">
    <div class="jstyling-file-f"></div>
    <div class="jstyling-file-b">Upload file
        <input type="file" size="30" name="file" id="file" style="...">
    </div>
</div>

Для работы с файл-инпутами есть 2 метода:

1. $.jStyling.createFileInput(elements [, options]) — создание стилизованных файл-инпутов.
2. $.jStyling.destroyFileInput(elements) — удаление стилизованных файл-инпутов.

$.jStyling.createFileInput(elements [, options])

Параметры:

1. elements — файл-инпуты к которым будет приминяться стилизация.
2. options — необязательный параметр, дополнительные настройки.

Options представляет собой объект {extraClass: 'className', fileButtonText: 'text'}

1. extraClass — дополнительные классы для стилизованного файл-инпута.
2. fileButtonText — текст на кнопке,

Примеры:

/**
 * Стилизовать все файл-инпуты
 */
 $.jStyling.createFileInput($('input[type=file]'));
/**
 * Стилизовать файл-инпут с id=file, текст на кнопке = "Обзор"
 */
 $.jStyling.createFileInput($('#file'), {fileButtonText: 'Обзор'});
        

$.jStyling.destroyFileInput(elements)

elements — файл-инпуты у которых удаляем стилизацию.

Пример:

/**
 * Удалить стилизацию у всех файл-инпутов
 */
 $.jStyling.destroyFileInput($('input[type=file]'));