Кастомизация
12
Июл
1

Кастомный «Обзор»

Пример того, как поместить кнопку «Обзор» (по-буржуйски она называется «Browse», в HTML представлено тегом <input> с типом file) и при выборе какого-либо файла, запоминать его путь в другом поле.

Все что требуется – это поместить этот код на onload формы и измените имя поля new_filepath на свое (в это поле будет записываться путь к выбранному файлу):

function attachCRMbutton(currentfieldName, lenght, text, callFunction)
{
	// Получаем родительский DIV элемент поля
	var parentObject = document.getElementById(currentfieldName).parentNode;
	// Создаем HTML-таблицу с одной строкой
	var myTable = document.createElement("Table");
	myTable.setAttribute('width', '100%');
	myTable.setAttribute('cellSpacing', '0');
	myTable.setAttribute('cellPadding', '0');
	var myRow = myTable.insertRow(0);

	// Создаем первую ячейку таблицы для хранения исходногго поля
	var originalChildNodesArea = myRow.insertCell(0);

	// Создаем для кнопки вторую ячейку таблицы
	var buttonArea = myRow.insertCell(1);
	buttonArea.style.width = lenght; // Ширина ячейки а следовательно и кнопки

	// Помещаем исходное поле в в первую ячейку
	for(var i = 0; i < parentObject.childNodes.length; i++)
	{
		var myChild = parentObject.childNodes[i];
		originalChildNodesArea.appendChild(myChild);
	}

	// Добавляем таблицу в исходный DIV элемент
	parentObject.appendChild(myTable);

	// Создаем кнопку
	var myButton = document.createElement('input');

	// Настраиваем параметры кнопки
	myButton.style.padding = "0px 3px 0px 3px";
	myButton.style.marginLeft = "6px";
	myButton.style.border = "1px solid #3366CC";
	myButton.style.background = "url(/_imgs/btn_rest.gif)";
	myButton.style.cursor  = "hand";

	myButton.setAttribute('id', 'linkButton_' + currentfieldName);
	myButton.setAttribute('type', 'button');
	myButton.setAttribute('value', text); // Задаем надпись на кнопке
	myButton.attachEvent('onclick', callFunction); // При щелчке вызываем функцию

	// Помещаем кнопку во вторую ячейку
	buttonArea.appendChild(myButton);
}

// Вызов функции attachCRMbutton для создания кнопки справа от поля
// Параметры: имя поля, длинна кнопки, текст на кнопке, функция вызываемая при нажатии
attachCRMbutton('new_filepath', 50, 'Обзор', myF);

// Функция которая будет вызываться при нажатии кнопки
function myF() {
	// Выполняем программно щелчок по кнопке Обзор, чтобы открыть диалоговое окно выбора файла
	inputF.click();
}

// Создаем поле выбора файла 
inputF = document.createElement('input'); 
inputF.type = 'file'; // Id поля – измените его таких полей у Вас будет несколько
inputF.onchange = inputF_onChange; // Функция вызываемая при его изменении
inputF.style.display = 'none'; // Скрываем поле

// Добавляем поле выбора файла поле поля new_filepath
Brws = document.getElementById('new_filepath');
Brws.parentNode.insertBefore( inputF, Brws.nextSibling);

// Функция вызываемая при изменении поля выбора файла
function  inputF_onChange() { 
	if (inputF && inputF.value) 
		// Переносим значение из поля выбора файла в поле new_filepath
		crmForm.all.new_filepath.DataValue = inputF.value; 
}

Разбор полетов:

  • Сначала мы создаем «гламурную» кнопку справа от целевого поля (это кнопочка из поста Кнопка справа от поля на форме CRM). При нажатии этой кнопке вызывается функция myF(), в которой программно производим нажатие на кнопку Обзор, поля выбора файла (который мы создаем далее);
  • Создаем само поле выбора файла (причем в скрытом виде);
  • Добавляем поле выбора файла после целевого поля в DOM структуру;
  • И наконец, определяем функцию, которая будет вызываться при изменении значения (т.е. при выборе файла) в поле выбора файла и записи его в целевое поле.


З.Ы. Вы можете довольно гибко настроить поле для выбора файла с помощью его атрибутов: http://msdn.microsoft.com/en-us/library/ms535263(VS.85).aspx

Комментарии (1)

*

code