Кастомный селект, чекбокс, радио.
Нужно вызвать класс Form и дать ему первым параметром узел формы, вторым объект с свойствами select и switches, пример ниже.
В свою очередь свойство select - это объект где имя свойства это name определенного селекта а значение объект с коллбеками и число.
А свойство switches - это просто массив с именами радокнопок или чекбоксов которые надо кастомизировать.
В итоге родные элементы будут скрыты, а вместо них будут узлы которые будут выполнять их функции, а получившийся объект получает свойства расписанные ниже. Объект form будет иметь свойства одноименные атрибутам name элементов. Внутри скрипта они реализуются классами Select и Switches.
Какое дерево узлов создается можно посмотреть в примерах в конце поста.
var form = new Form(document.forms[0], {
select: {
citys: { // name селекта
innerLi: innerLi,
wrapTitle: wrapperTitle,
lengthTitle: 15 // длина в символах после которой последует многоточие в div title (для select multiple)
},
city: {
innerLi: innerLi,
wrapTitle: wrapperTitle,
lengthTitle: 15
},
country: {
innerLi: innerLi,
wrapTitle: wrapperTitle,
lengthTitle: 38
}
},
switches: ['voteLessons', 'voteVOv', 'voteMusic']
});
// param text: option.text
// param i: номер в списке
// возвращается строка которая будет вставлена в li
function innerLi(text, i) {
return '<span>'+text+'</span>';
}
// param title: div с классом title
// возвращается узел он вставится вместо div с классом title
function wrapperTitle(title) {
return createElem('div',
createElem('div', title, { attrs: { className: 'arrow' }}),
{ attrs: { className: 'shadow' }}
);
}
/*
--- СЕЛЕКТЫ ---
Свойства:
form.citys = объект Select представляющий данный селект
form.citys.options = массив узлов option также доступных по номеру и по value, например:
form.citys.options.vl = <option value="vl">Владимир</option>
form.citys.options[0] = <option value="vl">Владимир</option>
form.citys.lists[n] = массив узлов li
эти узлы попадают (один li на котором произошел клик) в функцию form.citys.change(li)
и у них есть свойства
form.citys.lists[n].option = родной узел option
form.citys.lists[n].index = номер в списке
вот так:
form.citys.change(li) {
li.index == li.option.index;
}
form.citys.ul = узел ul
form.citys.title = узел div с классом 'title'
form.citys.select = узел div с классом 'select + имя селекта'
form.citys.nativeSelect = узел родного узла select который скрыт
Методы:
param: узел li или узел option или номер
param: true или false - установить selected или снять
form.citys.setSelected(3, bool)
param: узел li или узел option или номер
param: true или false - установить disabled или снять
form.citys.setDisabled(option, bool)
Методы не смотрят на текущее состояние, например если вызвать setSelected
с item-ом у которого флаг disable то он сменится на selected и наоборот.
--- РАДИО, ЧЕКБОКСЫ ---
Свойства:
form.voteLessons = объект Switch представляющий один экземпляр на одно имя в форме
form.voteLessons.wrapSwitches[n] = массив узлов div с классом равным имени данных радио или чекбоксов в форме
form.voteLessons.switches[n] = массив узлов div с классом checked disabled или '' в зависимости от состояния
C form.voteLessons.change аналогично как с селектами
form.voteLessons.switches[n].nativeSwitch = родной узел radio или checkbox
form.voteLessons.switches[n].index = номер в списке
form.voteLessons.nativeSwitches = родной html collection представляющий данное имя в форме
form.voteLessons.index = номер в списке
Методы:
param: узел div или узел input или номер
param: true или false - установить checked или снять
form.voteLessons.setChecked(div, bool)
param: узел div или узел input или номер
param: true или false - установить disabled или снять
form.voteLessons.setDisabled(div, bool)
Можно определить функцию change которая будет выполнена при изменении состояния пользователем (клик).
В нее попадут узлы на которых произошел клик. Например в них могут быть доступны (описание выше):
form.voteLessons.change = function(div) {
this.switches;
this.wrapSwitches;
this.nativeSwitches;
this.setChecked();
this.setDisabled();
div.index;
div.nativeSwitch;
div.nativeSwitch.index;
}
Примеры функции change:
// Найти все пункты с атрибутом selected
form.country.change = function(li) {
var str = '';
for(var i=0; i<this.options.length; i+=1) {
if(this.options[i].selected)
str += this.lists[i].option.text + '; ';
}
console.log(str);
}
// Найти все пункты с атрибутом selected и задизаблить соседний
form.country.change = function(li) {
for(var i=0; i<this.lists.length; i+=1) {
if(this.lists[i].className == 'selected')
this.setDisabled(i+1, true);
}
}
//Если выбрали Владимир, то раздизаблить Москву
form.citys.change = function(li) {
if(li.option.value == 'vl')
this.setDisabled(this.options.ms, false);
}
И последнее.
Объект Form предоставляет метод submit:
form.submit() просто укороченная запись, например document.forms[0].submit();
Объект Form позволяет назначить функцию load которая выполнится после всей инициализации.
В ней можно поменять что-нибудь, например:
form.load = function() {
this.country.title.innerHTML = 'Settings counrty...';
this.citys.title.innerHTML = 'Settings city...';
}
*/
Свёрстанные примеры
http://showjs.netii.net/select1.html
http://showjs.netii.net/select2.html
Нажав Send можно посмотреть, что выдает форма.
