Кастомизация
05
Авг
5

Вспомогательная кнопка для текстового поля

Сегодня нас ждет еще одна вспомогательная кнопка 🙂 на этот раз будем аттачить ее к простому текстовому полю! Видели когда-нибудь лукап? помните, как там вызывается диалоговое окно поиска? помните, по какой кнопке? Вот сейчас, сделаем такую же, но только для текстового поля… и при нажатии на нее будем делать что хотим 🙂

Ниже представлен код для выполнения этой задачи. Все что от вас требуется так это сделать нужное количество копий функции newButton (т.е. сколько кнопок хотите добавить к полям, стоько и копий должно быть) и передать ей нужные параметры (в порядке следования):

  • Имя поля – ну, тут все понятно 🙂 указываете имя поля к которому добавляете кнопку;
  • Ширина кнопки – указываете ширину изображения кнопки в пикселях (используется для корректировки позиции изображения);
  • MouseOver URL – путь к изображению, которое должно отображаться при наведении курсора на кнопку;
  • MouseOut URL – путь к изображению для кнопки в состоянии покоя (т.е. когда курсор на нее не наведен);
  • Имя функции – имя функции, которая будет вызываться при нажатии на кнопке.

А вот собственно и код (на событие onload)…

TextHelperButton = function(fieldId) {

	var fldButton = this;

	fldButton.Field = crmForm.all[fieldId];

	if (!fldButton.Field)     {
		return alert("Unknown Field: " + fieldId);
	}

	fldButton.Click = null;
	fldButton.Image = new ButtonImage();
	fldButton.Paint = function() {
		var field_d = document.all[fldButton.Field.id + "_d"];
		if (field_d) {
			field_d.style.whiteSpace = "nowrap";
			field_d.appendChild(fldButton.Image.ToObject())
		}
	}
 
	fldButton.MouseOver = function() {
		event.srcElement.src = fldButton.Image.MouseOver;
    }
 
    fldButton.MouseOut = function() {
		event.srcElement.src = fldButton.Image.MouseOut;
    }

    function ButtonImage() {
		this.MouseOut  = "";
		this.MouseOver = "";
		this.Width = 21

		this.ToObject = function() {
			var img = document.createElement("IMG");
			img.onmouseover = fldButton.MouseOver;
			img.onmouseout = fldButton.MouseOut;
			img.onclick = fldButton.Click;
			img.src = this.MouseOut;
    
			var cssText = "vertical-align:top;";
			cssText+= "margin:0px;";
			cssText+= "position:relative;";
			cssText+= "right:" + this.Width + "px";
			img.style.cssText = cssText;
			return img;
		}
	}
}

function newButton(field,width,mOver,mOut,func) {
	/* Передаем имя поля */ 
	var actnButton = new TextHelperButton(field);  
	/* Ширина кнопки */  
	actnButton.Image.Width = width; // в пикселях
	/* URL’ы для изображений */  
	actnButton.Image.MouseOver = mOver;  
	actnButton.Image.MouseOut  = mOut;  
	/* задаем имя функции вызываемой при щелчке */  
	actnButton.Click = func;  
	actnButton.Paint(); 
}

//параметры предаются в следующем порядке Имя поля, Ширина изображения, Путь к картинке при MouseOver, Путь к картинке при MouseOut, Имя функции
newButton("name", 21, "/_imgs/lookupOn.gif", "/_imgs/lookupOff.gif", Accountname_Click);

function Accountname_Click() {
    alert('Это поле Название организации');
}


Комментарии (5)
  • Слава.Н 05.08.2009

    У меня на одной форме находятся эти кнопки, привязанные к некоторым полям, и скрипт, позволяющий скрывать секции, в том числе и с этими полями. Так вот, когда скрывается секция и соответственно поле, кнопка, привязанная к этому полю не скрывается, а переходт вверх экрана. Не подскажете, как скрыть и кнопку тоже?

  • slivka_83 05.08.2009

    После строки

    img.src = this.MouseOut;

    добавьте строчку

    img.id="myIMG";

    Потом чтобы чтобы скрыть кнопку достаточно:

    document.getElementById("myIMG").style.display = "none";

    🙂

    Но в этом случаи у всех кнопок будет имя myIMG и они все сразу будут скрываться от выше упомяноутой команды.
    Поэтому можете добавить id кнопки как передаваемый параметр в функции.
    Т.е. вместо

    img.id="myIMG";

    будет

    img.id = this.idbtn;

    в параметры функции добавьте новый параметр myid
    а после

    actnButton.Click = func;

    допишите

    actnButton.id = myid;

    Ну и соответственно при каждом создании экземпляра кнопки передаете дополнительно ее id 🙂

  • Слава.Н 05.08.2009

    Большое спасибо!

  • Владимир 05.08.2009

    Решение очень хорошее,
    но — а как быть если надо так:
    function Accountname_Click(param) {
    alert(param);
    }
    то есть в функцию-обработку надо передать параметр.
    У меня как то с ходу не получилось (параметр берется из какого-нибудь поля).
    В newButton… вставляется строго имя функции???
    С Уважением Л.Владимир

  • slivka_83 05.08.2009

    На скорую руку у меня тоже не получилось… единственное, что приходит на ум, это использоватьразные вызываемые функции в которых использкются разные глобальные переменные (с сообщением)

*

code