Codepal

'JqTransform' olarak etiketlenmiş yazılar

JqTransform ve Çözümü kullanarak sonra 'Seç' Sorunu

Perşembe, Şubat 18, 2010

Proje

Benim bu son projesi, bir açılış sayfası oluşturmak için gerekli oldu. Bu açılış sayfası, dillerin bir listesi vardır ve kullanıcı herhangi bir dil seçtikten sonra, sitenin ana sayfasına ilgili seçilen dil otomatik olarak açacak. Ayrıca açılış sayfası tasarımı verildi şekilde liste kutusunda seçin tarzı gerekiyordu. Bu yüzden tercih jqTransform tarzı bazı formları bir kere kullanılır, jQuery plug-in. jqTransform formları çok kolay bir şekilde özelleştirmek için plug-in ve son ürün çok güzel hiç şüphe yok ki çok güzel . Ancak bu durumda, küçük bir hız kesici benim ilerleme oldu.

Problem

Html form liste denetimi açılan çeşitli 'seçeneği' etiketleri içine 'select' etiketleri içerir. Burada bir form sorunu açıklamak için bu öğretici kullanıyorum:

 jqTransform </ h4> olmadan <form> <h4> seçin Kutusu <div id="box-city" class="select-menus"> <label> Şehir </ label> <br/> <select name = "select- ülke "> <tercih> Gotham </ option> <tercih> New York </ option> <tercih> Smallville </ option> </ select> <div class="clear"> </ div> </ div> < / form> 

JqTransform nedir, bütün 'select' etiketi tarar ve açılan liste seçenekleri hiper-bağlantıları içeren sırasız bir liste oluşturur. Daha sonra orijinal 'seçeneğini' etiketi ve içeriği gizler.

 <form class="jqtransform jqtransformdone">
	 <h4> seçin jqTransform ve normal değişim yöntemi seçin kutusu </ h4>
	 <div class="select-menus" id="box-name">
		 <label style="cursor: pointer;"> Adı </ label>
		 <div class="jqTransformSelectWrapper" style="z-index: 10; width: 150px;">
			 <div>
				 <span style="width: 119px;"> Batman </ span>
				 <a class="jqTransformSelectOpen" href="#"> </ a>
			 </ Div>
                         <ul style="width: 148px; none; visibility: visible; HEIGHT: 100px; overflow: hidden;">
				 <a index="0" href="#" class="selected"> Batman </ a> </ li>
				 <a index="1" href="#"> Robin </ a> </ li>
				 <a index="2" href="#"> Superman </ a> </ li>
				 <a index="3" href="#"> Örümcek Adam </ a> </ li>
			 </ Ul>
			 <select name="select-country" class="jqTransformHidden" style="">
	 				 <tercih> Batman </ option>
					 <tercih> Robin </ option>
					 <tercih> Superman </ option>
					 <tercih> Örümcek Adam </ option>
			 </ Select>
		 </ Div>
		 <div class="clear"> </ div>
	 </ Div>
 </ Form>

Sonra bir gönderme düğmesini kullanarak form gönderme işlemi genellikle belirli bir değer seçmek için 'seçeneğini' etiketi kullanan ve bu bir sorun yaratmaz. Aşağı açılan liste değeri değiştiğinde bazı işlevleri gerçekleştirmek istediğiniz bir sorun oluşturur.

Bu normalde javascript seçim kontrolü 'change' yöntemi kullanarak elde edilir. 'Değişim' yöntemi değerini değiştirme olayı yakalar ve biz şu şekilde kullanıcı tarafından seçilen değeri erişebilirsiniz.

 / / Sigara Dönüştürülmüş seçin Box change olay yakalama.
 $ ("# Kutusu şehir seçin"). Değişikliği (function () {
	 var değeri = $ (this) val ();
     alert ("Değer Seçilmiş =" + değer);
 });

Ama kullandıktan sonra jqTransform eklentisi, 'select' etiketi değiştirme yöntemi uygulamak için daha çok şey var.

Çözüm

Bu çözüm, çok basit bir. Biz sırasız liste içinde hiper-bağlantı elemanı bir tıklama fonksiyonu uygulanarak listede aşağı doğru jqTransformed bir düşüş için change olayını taklit edebilirsiniz. Daha sonra, seçilen öğe veya görüntülenen span etiketi metin erişerek seçilen değeri olabilir.

 / / Değiştirilmiş değerini değiştirmek olay yakalama yöntemi kullanılarak Dönüştürülmüş seçin Box change olay yakalama.
 $ ("# Kutusu yaş div.jqTransformSelectWrapper ul a"). (Function () {
	 var değeri = $ ("# kutu yaş div.jqTransformSelectWrapper a") text ()
	 alert ("Değer Seçilmiş =" + değer);
	 return false; / / varsayılan tarayıcı eylemi önlemek
 });

Sonuç

Bu açılır liste kutuları için bunları özelleştirmek için jqTransform kullandıktan sonra değiştirme fonksiyonu simüle bir yoludur. Diğer seçenek düzgün bir şekilde 'Seç' kutuları onChange olayı erişmek için jqTransform eklentisi kendini değiştirmek için. JqTransform plug-in geliştiricileri, plug-in bir sonraki sürümde bu sorunu çözebilirsiniz umuyoruz. Bu çok önemli bir ya da ortak bir hata değil ama gerçi bu biraz yardımcı olduğunu umut ediyoruz.

Etiketler: CSS , formlar , jqTransform , jQuery
Posted in Eğitim | 71 Yorum »