Codepal

Архив за Февраль, 2010

"Выбрать" Проблема после использования jqTransform и ее решение

Четвергом, 18 Февраль 2010

Проект

В этом последнем проекте моя, я был обязан построить целевой страницы. В этой целевой страницы, не было бы список языков и после того как пользователь выбирает какой-либо конкретном языке, на домашней странице сайта будет автоматически открываться в соответствующем выбранному языку. Было также необходимо выбрать стиль списка в том, как она была дана в разработке целевой страницы. Так что я выбрал jqTransform JQuery плагин, который я использовал один раз, чтобы стиль некоторых формах. jqTransform очень хороший плагин для настройки формы в очень простой способ, и конечный продукт, несомненно, красива. Но в этом случае, стало незначительное выключателя скорость на мой прогресс.

Проблема

Выпадающего списка управления HTML форма содержит 'выберите' тэгов которые окружают различные "опции" теги. Вот форма, которая, я использую в этом уроке, чтобы объяснить проблему:

 <form>
	 <h4> Выберите Box Без jqTransform </ h4>
	 <div id="box-city" class="select-menus">
		 <label> Город </ Label>
		 <br/>
		 <select name="select-country">
  		         <option> Gotham </ опции>
			 <option> Нью-Йорке </ опции>
			 <option> Smallville </ опции>
		 </ Выберите>
		 <div class="clear"> </ P>
	 </ P>
 </ FORM>

Что jqTransform делает, он сканирует весь тег "выбрать" и создает неупорядоченный список, содержащий гиперссылки из вариантов в раскрывающемся-лист. Затем он скрывает оригинал "выберите пункт" тэг и его содержание.

 <form class="jqtransform jqtransformdone">
	 <h4> окне Выбор с jqTransform и нормальной выбрать метод изменения </ h4>
	 <div class="select-menus" id="box-name">
		 <label style="cursor: pointer;"> Имя </ Label>
		 <div class="jqTransformSelectWrapper" style="z-index: 10; width: 150px;">
			 <div>
				 <span style="width: 119px;"> Бэтмен </ SPAN>
				 <a class="jqTransformSelectOpen" href="#"> </>
			 </ P>
                         <ul style="width: 148px; display: none; visibility: visible; height: 100px; overflow: hidden;">
				 <li> <a index="0" href="#" class="selected"> Бэтмен </> </ LI>
				 <li> <a index="1" href="#"> Робин </> </ LI>
				 <li> <a index="2" href="#"> Супермена </> </ LI>
				 <li> <a index="3" href="#"> паук </> </ LI>
			 </ UL>
			 <select name="select-country" class="jqTransformHidden" style="">
	 				 <option> Бэтмен </ опции>
					 <option> Робин </ опции>
					 <option> Супермена </ опции>
					 <option> паук </ опции>
			 </ Выберите>
		 </ P>
		 <div class="clear"> </ P>
	 </ P>
 </ FORM>

Это не создает проблемы, когда мы используем «Выбрать» теги как правило, для выбора конкретного значения, а затем выполняет отправки формы с помощью кнопки отправки. Это создает проблемы, когда мы хотим выполнять некоторые функции, когда значение выпадающего списка меняется.

Обычно это достигается в JavaScript с помощью "изменения" метод выбора управления. "Переменах" метод фиксирует стоимость событие изменения, и мы можем получить доступ к значению выбранного пользователем в следующем порядке.

 / / Захват изменений случае нетрансформированных Выберите Box.
 $ ("# Окне выберите город-"). Изменить (функция () {
	 уаг значение = $ (это) VAL ().
     предупреждение ("Value Выбранный =" + стоимость);
 });

Но после использования jqTransform плагин, 'выбрать' теги больше нет, чтобы применить изменения метода.

Решение

Решения этой проблемы, является очень простой. Мы можем моделировать события изменения для jqTransformed выпадающего списка, применяя нажмите функция гипер-ссылка элемент внутри неупорядоченного списка. Тогда мы можем иметь выбранное значение путем доступа текст промежуток теги где выбранный элемент устанавливается или отображается.

 / / Захват изменений случае Преобразованный Выберите Box с помощью модифицированного метода захвата события изменения значения.
 $ ("# Окно возраста div.jqTransformSelectWrapper ул Ли"). Мыши (функция () {
	 уаг значение = $ ("# окно возраста div.jqTransformSelectWrapper Диапазон"). текст ()
	 предупреждение ("Value Выбранный =" + стоимость);
	 вернуться ложным; / / предотвращает действие браузера по умолчанию
 });

Заключение

Это один из способов моделирования изменения функции выпадающий список коробки после использования jqTransform настраивать их. Другим вариантом является изменение jqTransform сам плагин правильно доступа OnChange событие 'Select' коробки. Я надеюсь, что плагин jqTransform разработчики могут решить эту проблему в своей следующей версии плагина. Хотя это не очень важно или общих ошибку, но я надеюсь, что это было-то помочь.

Теги: CSS , формы , jqTransform , JQuery
Опубликовано в Обучение | 71 Комментариев »