Сегодняшние сниппеты — продолжение урока о стилизации файл-инпутов. Мы упростим разметку и добавим возможность динамически создавать дополнительные файл-инпуты.
А в качестве сниппетов будут функции, которые помогут это сделать.
В прошлой реализации стильного файл-инпута нам неободимо было создать оболочку (wrapper) для нашего инпута. Давайте сделаем так, чтобы в разметке не было ничего, кроме самого инпута. А чтобы как-то его идентифицировать, пропишем у него класс «customFileInput».
То есть в разметке останется только
<input type="file" id="File1" class="customFileInput" />
Что мы должны сделать — это найти инпут по классу и завернуть его в обертку, и уже туда добавлять необходимые элементы.
Для того, чтобы найти инпут используем функцию getElementsByClassName(<название класса>):
function getElementsByClassName(searchClass) {
var classElements = new Array();
var els = document.getElementsByTagName('*');
var elsLen = els.length;
var pattern = new RegExp("(^|s)"+searchClass+"(s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
};
Завернем все инпуты во враппер:
function WrapEverything()
{
inputs = getElementsByClassName('customFileInput');
for (var i = 0 ; i < inputs.length; i++)
wrap(inputs[i]);
};
Сама функция wrap:
function wrap(element)
{
wraper = document.createElement('div');
wraper.className = 'wrapper';
fileInput = document.createElement('input');
fileInput.value = '';
fileInput.setAttribute('type','file');
var id = element.getAttribute('id');
wraper.setAttribute('id','wrapper'+id);
fileInput.setAttribute('id',id);
fileInput.className = 'customFile';
fileInput.onchange = function(){ HandleChanges(id) };
fileInput.onmouseover = function() { MakeActive(id) };
fileInput.onmouseout = function() { UnMakeActive(id) };
fileName = document.createElement('div');
fileName.style.display = 'none';
fileName.style.background = 'url(images/icons.png)';
fileName.setAttribute('id','name'+id);
fileName.className = "FileName";
bb = document.createElement('div');
bb.setAttribute('id','bb' + id);
bb.className = 'fakeButton';
bl = document.createElement('div');
bl.setAttribute('id','bl' + id);
bl.className = 'blocker';
wraper.appendChild(bb);
wraper.appendChild(bl);
wraper.appendChild(fileInput);
wraper.appendChild(fileName);
x = element.parentNode;
x.replaceChild(wraper,element);
};
Функция replaceChild заменяет element на wraper, который содержит необходимые нам элементы.
Хочу обратить внимание на то, как привязываются события к элементу fileInput:
fileInput.onmouseout = function() { UnMakeActive(id) };
Если бы мы делали как раньше
fileInput.onmouseout = UnMakeActive(id);
то браузер сообщил бы нам об ошибке.
Это все, что нам надо сделать для того чтобы упростить разметку.
Теперь добавим возможность динамически создавать новые инпуты. Чтобы сделать эту возможность легко адаптируемой под индивидуальные нужды, мы создадим простую кнопку, которая будет вызывать функцию addCustomFileInput(container). container — это блок, в котором будут распологаться все создаваемые инпуты.
Разметка выглядит следующим образом:
<div id="MyInputs">
<input type="file" class="customFileInput" id="File1" />
</div>
<a href="javascript:addCustomFileInput('MyInputs')">добавить еще</a>
Для того чтобы можно было удалять добавленные инпуты, мы добавляем минусик рядом с самим инпутом. В остальном содержимое функции аналогично функции wrap.
function addCustomFileInput(container) {
w = document.getElementById(container);
AddInput(w);
};
function AddInput(container) {
wraper = document.createElement('div');
wraper.className = 'wrapper';
fileInput = document.createElement('input');
fileInput.value = '';
fileInput.setAttribute('type', 'file');
var id = 'customFileInput' + inputNumber;
wraper.setAttribute('id', 'wrapper' + id);
fileInput.setAttribute('id', id);
fileInput.className = 'customFile';
fileInput.onchange = function() { HandleChanges(id) };
fileInput.onmouseover = function() { MakeActive(id) };
fileInput.onmouseout = function() { UnMakeActive(id) };
fileName = document.createElement('div');
fileName.style.display = 'none';
fileName.style.background = 'url(images/icons.png)';
fileName.setAttribute('id', 'name' + id);
fileName.className = "FileName";
bb = document.createElement('div');
bb.setAttribute('id', 'bb' + id);
bb.className = 'fakeButton';
bl = document.createElement('div');
bl.setAttribute('id', 'bl' + id);
bl.className = 'blocker';
deleteButton = document.createElement('div');
deleteButton.className = 'minus';
deleteButton.onclick = function() { DeleteCustomInput(id) };
wraper.appendChild(bb);
wraper.appendChild(bl);
wraper.appendChild(fileInput);
wraper.appendChild(fileName);
wraper.appendChild(deleteButton);
container.appendChild(wraper);
inputNumber++;
};
Если вы хотите, чтобы у вас был не минусик, а свой текст, изменить надо всего лишь эту часть:
deleteButton = document.createElement('div');
deleteButton.className = 'minus';
Теперь, чтобы интегрировать такой файл-инпут, вам достаточно добавить скрипт и стили, а у самого инпута прописать класс customFileInput.
Собственно, все это не так важно, как
живой пример.
