[jQuery/jqtransform] Dodanie do kodu stylu inputa Opcje

[einter-project]

Witam

Na stronie muszę zastosować ostylowane formularze. Problem w tym że jest kilka styli tych samych pól formularza. Grafika poniosło.

W jaki sposób przekazać styl z pola do funkcji (korzystam z jqtransform):

Na przykład pole input
<input class="searchInput" type="text" name="searchAccommodation" value="">

I teraz chciałbym nazwę klasy wsadzić w:
$input.addClass("jqTransformInput").wrap('<div class="jqTransformInputWrapper_tutaj nazwe klasy"><div class="jqTransformInputInner"><div></div></div></div>');

[HTML] pobierz, plaintext 
 
/***************************
	  Text Fields 
	 ***************************/
	$.fn.jqTransInputText = function(){
		return this.each(function(){
			var $input = $(this);
 
			if($input.hasClass('jqtranformdone') || !$input.is('input')) {return;}
			$input.addClass('jqtranformdone');
 
			var oLabel = jqTransformGetLabel($(this));
			oLabel && oLabel.bind('click',function(){$input.focus();});
 
			var inputSize=$input.width();
			if($input.attr('size')){
				inputSize = $input.attr('size')*10;
				$input.css('width',inputSize);
			}
 
			$input.addClass("jqTransformInput").wrap('<div class="jqTransformInputWrapper_tutaj nazwe klasy"><div class="jqTransformInputInner"><div></div></div></div>');
			var $wrapper = $input.parent().parent().parent();
			$wrapper.css("width", inputSize+10);
			$input
				.focus(function(){$wrapper.addClass("jqTransformInputWrapper_focus");})
				.blur(function(){$wrapper.removeClass("jqTransformInputWrapper_focus");})
				.hover(function(){$wrapper.addClass("jqTransformInputWrapper_hover");},function(){$wrapper.removeClass("jqTransformInputWrapper_hover");})
			;
 
			/* If this is safari we need to add an extra class */
			$.browser.safari && $wrapper.addClass('jqTransformSafari');
			$.browser.safari && $input.css('width',$wrapper.width()+16);
			this.wrapper = $wrapper;
 
		});
	};
 
[HTML] pobierz, plaintext 

Bardzo prosiłbym o pomoc jak to rozwiązać.

[mortus]

Może wystarczy w linii 8 takie coś:

[JAVASCRIPT] pobierz, plaintext 
var $inputClass = $input.attr('class');
[JAVASCRIPT] pobierz, plaintext 

I później w linii 21:

[JAVASCRIPT] pobierz, plaintext 
$input.addClass("jqTransformInput").wrap('<div class="jqTransformInputWrapper_'+$inputClass+'"><div class="jqTransformInputInner"><div></div></div></div>');
[JAVASCRIPT] pobierz, plaintext 

Gdyby nie zadziałało to spróbuj jeszcze argument funkcji wrap "ustawić" wcześniej, tj. w linii 20:

[JAVASCRIPT] pobierz, plaintext 
var wrapDOM = '<div class="jqTransformInputWrapper_'+$inputClass+'"><div class="jqTransformInputInner"><div></div></div></div>';
$input.addClass("jqTransformInput").wrap(wrapDOM);
[JAVASCRIPT] pobierz, plaintext 

[einter-project]

Dzięki serdeczne, dla potomnych zmiany w linii 8 i 20, a potem oczywiście trzeba dostosować style do każdej klasy, ale to już nie problem.

Pozdrawiam i jeszcze raz dziękuje za pomoc.


Jeszcze jedno. Mam problem z polem checkbox. Muszę w nim zastosować obsługę funkcji onclick="customerInvoiceVat()". Niestety jak dam onclick to przeładowuje mi stronę, czy jest jakiś sposób aby nie przeładował strony jak się zaznacza to pole.

Pole checkbox;
<input class="RegistrationCheckbox" name="formRegistrationFV" value="1" onclick="customerInvoiceVat()" type="checkbox">

Kawałek kodu odpowiedzialny za to pole:

[HTML] pobierz, plaintext 
/***************************
	  Check Boxes 
	 ***************************/	
	$.fn.jqTransCheckBox = function(){
		return this.each(function(){
			if($(this).hasClass('jqTransformHidden')) {return;}
 
			var $input = $(this);
			var inputSelf = this;
			var $inputClass = $input.attr('class');
 
			//set the click on the label
			var oLabel=jqTransformGetLabel($input);
			oLabel && oLabel.click(function(){aLink.trigger('click');});
 
			var aLink = $('<a href="#" class="jqTransformCheckbox'+$inputClass+'"></a>');
			//wrap and add the link
			$input.addClass('jqTransformHidden').wrap('<span class="jqTransformCheckboxWrapper'+$inputClass+'"></span>').parent().prepend(aLink);
			//on change, change the class of the link
			$input.change(function(){
				this.checked && aLink.addClass('jqTransformChecked') || aLink.removeClass('jqTransformChecked');
				return true;
			});
			// Click Handler, trigger the click and change event on the input
			aLink.click(function(){
				//do nothing if the original input is disabled
				if($input.attr('disabled')){return false;}
				//trigger the envents on the input object
				$input.trigger('click').trigger("change");	
				return false;
			});
 
			// set the default state
			this.checked && aLink.addClass('jqTransformChecked');		
		});
	};
[HTML] pobierz, plaintext 

Pozdrawiam

[mortus]

Teoretycznie kliknięcie checkbox-a nie powinno powodować przeładowania strony. Nie widzę również żadnych modyfikacji jqTransform, które mogłyby stwarzać problemy. Winę zatem może ponosić funkcja customerInvoiceVat(). Spróbuj zmodyfikować html tego checkbox-a tak:

[HTML] pobierz, plaintext 
<input class="RegistrationCheckbox" name="formRegistrationFV" value="1" onclick="customerInvoiceVat(); return false;" type="checkbox" />
[HTML] pobierz, plaintext 

Jeśli to nie pomoże, to trzeba będzie prześledzić kod wspomnianej funkcji.

[einter-project]

Dzięki za pomoc, ale jak dodałem poniżej pola input problem zniknął. Za to pojawił się nowy którego już nie wiem jak rozwiązać. Jak zaznaczę pole formRegistrationFV skrypt powinien zrobić aktywne poniżej pola. Bez jqtransform wszystko działa jak ma działać. Jak dodam tylko jqtransform to skrypt reaguje po 2 kliku i działa na odwrót.

[HTML] pobierz, plaintext 
<script type="text/javascript">
function customerInvoiceVat() {
     var chkAll = document.getElementById('formRegistrationFV');
 
     if(chkAll.checked == true){
         document.registration.formInvoiceCompany.disabled = false;
         document.registration.formInvoiceCompany.className = 'RegistrationInput';
	     document.getElementById('ID_invoiceCompany').className = 'text';
 
	     document.registration.formInvoiceName.disabled = false;
         document.registration.formInvoiceName.className = 'RegistrationInput';
	     document.getElementById('ID_invoiceName').className = 'text';
 
 
     } else {
         document.registration.formInvoiceCompany.disabled = true;
         document.registration.formInvoiceCompany.className = 'RegistrationInputNot';
         document.getElementById('ID_invoiceCompany').className = 'textNot';
 
	     document.registration.formInvoiceName.disabled = true;
         document.registration.formInvoiceName.className = 'RegistrationInputNot';
	     document.getElementById('ID_invoiceName').className = 'textNot';
     }
}                  
 
window.onload = customerInvoiceVat;
</script>
 
[HTML] pobierz, plaintext 

Link do strony: http://31.178.13.71/ogloszenia/customerPan...ateRegistration
Jak rozwiązać aby działał za pierwszym klikiem i nie na odwrót?

Pozdrawiam

[mortus]

Szczerze przyznam, że tego błędu też być nie powinno. Z ciekawości przetestowałem prostą funkcję podpiętą do zdarzenia onclick checkbox-a na czystej instalacji jqTransform i wszystko działało tak, jak powinno. Wygląda na to, że ten bałagan w kodzie Twojej strony jest tutaj głównym winowajcą. Radzę przepisać HTML od nowa.

Naiwnym rozwiązaniem problemu może być zamiana true na false w 5 linii funkcji customerInvoiceVat(), jednak nie polecam tego rozwiązania i uważam, że o wiele lepiej będzie, jeśli uporządkujesz kod.

Ten post edytował mortus 18.12.2011, 22:34:12