Наш блог

Работы, обмена знаниями, новости, справочники

  • Как веб-разработчик, то, что вам нравится кодирования больше всего?

    Посмотреть результаты

    Loading ... Загрузка ...

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

18 февраля 2010 - По Sumeet

В последнее время я работаю над проектом, который требуется настроить форму выбрать только коробки. Я jqTransform настроить форму и во время работы на нем я обнаружил, что после преобразования в окне выберите список гиперссылок, метод "изменения" в окне выбора не работать вообще. Как "мероприятие по стоимости, изменения" является очень важной функцией для любого выпадающего списка, так вот очень простое решение для управления им при использовании jqTransform.

Live демо- Скачать

Эй Там!

Это будет большим, если бы Вы также можете подписаться на наш канал ...

Проект

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

Проблема

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

 <form>
	 <h4> Выберите Box Без jqTransform </ h4>
	 <div id="box-city" class="select-menus">
		 <label> City </> ярлык
		 <br/>
		 <select name="select-country">
  		         <option> Gotham </> вариант
			 <option> Нью-Йорке </> вариант
			 <option> Smallville </> вариант
		 </ Выберите>
		 <div class="clear"> </> Div
	 </> Div
 </> Форме

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

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

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

Это обычно достигается в JavaScript с помощью "Изменить" метод выбора управления. "Метод изменения" отражает изменения стоимости событие, и мы можем получить доступ к значению выбранного пользователем следующим образом. 

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

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

Решение

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

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

Заключение

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

Метки: , , ,

Другие сообщения возможно, вы захотите

41 Ответы

  1. Уилл
    9 марта 2010 в 5:50 вечера

    Спасибо за решение выше. Очень полезно. Интересно, если бы вы могли помочь с 1 дополнительной проблемой? jqtransform казалось бы, игнорирует часть списка выбора. Можете ли вы помочь мне найти исправить, с тем чтобы они отображаются в списке выбора превращается???

    Любые указатели будет высоко ценится!

    Ответ
  2. Sumeet Чавла
    9 марта 2010 года в 10:45 вечера

    Я не получить какую проблему вы имеете в виду? Может быть, вы можете разместить ссылку на пример или что-то такое, что я могу взглянуть на него в деталях?

    Надеюсь, что ваша проблема решена, хотя :)

    Ответ
  3. Уилл
    9 марта 2010 года в 11:09 вечера

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

    Ответ
  4. Саймон
    10 марта 2010 года в 8:36 вечера

    Привет. им просто интересно, если кто сумел продлить jqTransform JS для покрытия множественного выбора. В настоящее время, сценарий просто обходит любые выберите списки айг нескольких. Im не специалист, хотя JS. Кто-нибудь есть идеи?

    Ответ
  5. fcaracol
    18 апреля 2010 года в 5:02 вечера

    Как я могу заполнить Выберите после использования jqTransform?

    Ответ
    • Sumeet Чавла
      18 апреля 2010 в 10:24 вечера

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

  6. fcaracol
    26 апреля 2010 в 2:25 утра

    Да, я хочу, чтобы динамически заполнить выберите поле.

    Ответ
    • Sumeet Чавла
      29 апреля 2010 в 11:38 утра

      Ну, для этого вам придется выбрать неупорядоченный список гиперссылок порожденных jqTransform, а затем добавить элемент, содержащий список гиперссылка (ваш вариант) к неупорядоченного списка.

  7. fcaracol
    29 апреля 2010 в 12:53 вечера

    Можете ли вы дать мне простой пример того, как это сделать? Просто, начиная с JQuery.

    Спасибо Мош.

    Ответ
  8. fdjulien
    6 мая 2010 в 10:47 утра

    @ Fcaracol: я работаю на что сейчас для проекта, дать вам обратную связь, когда это нормально.

    Ответ
  9. fdjulien
    8 мая 2010 в 1:37 вечера

    Et хопа:
    http://pastebin.com/tZraxjDX

    Иметь хороший день ^ ^

    (Если вы знаете, как мы можем контролировать рост детского список после показать / скрыть, обратная связь)

    Ответ
  10. fcaracol
    9 мая 2010 в 3:06 вечера

    Спасибо всем за сообщения.

    Мое решение проблемы:
    http://pastebin.com/wYSgh3hj

    Ответ
  12. Смит
    17 июня 2010 в 7:44 вечера

    jqtransform не работает на более чем 11 выберите тегов на странице

    Ответ
    • fdjulien
      18 июня 2010 в 11:24 утра

      Поиск
      . CSS ((zIndex: 10-индекс))

      и заменить только с
      . CSS ((zIndex: 999-индекс))

      Это нормально ;)

  14. zchef2001
    29 июня 2010 года в 8:37 вечера

    У меня возникают аналогичные проблемы и пытались корректировки этот код для использования с window.open на один из моих ценностей вариант. Мне было интересно, если бы вы привести пример, где из трех вариантов выбрать: кошка, собака, и птиц, выбрав команду "собака" будет popout новое окно для внешней связи. Я не могу показаться, чтобы получить живой () событие это правильно сделать.

    Спасибо за помощь.

    Ответ
    • Sumeet
      1 июля 2010 года в 3:26 утра

      Так что вы хотите сделать, когда вы выбираете конкретного варианта, всплывающем окне будет открыта для внешних связей с относительно выбранного варианта?

    • zchef2001
      3 июля 2010 года в 8:45 вечера

      Именно так. У меня нет опыта JavaScript говорить, но с использованием Вашего руководства я моды из сценария, что бы проверить, если вариант текста соответствуют определенные строки, и, если да, то вопрос window.open события. Код, вероятно, немного тяжелый, но это работает.

      Тем не менее, я хотел бы выяснить, каким образом достичь jqtransform функциональность для форм находится в DIV-ов, которые загружаются динамически JQuery вкладок.

    • Sumeet
      5 июля 2010 в 12:59 утра

      Ну, вы можете позволить jqTransform на DIV-ов, которые загружаются динамически, снова вызвав метод jqtransform на его идентификатор или класс данной формы в динамически создаваемых дел.

  15. zchef2001
    7 июля 2010 года в 2:09 утра

    Sumeet,

    Спасибо Вам за этот ответ. Я оказаться много с результатами поиска людей, имеющих аналогичные проблемы с динамически загружаемых контент, но, к сожалению, не решения. Если вы можете привести пример повторное jqtransform сценарий для динамически загружаемых содержания, я уверен, что Интернет будут Вам благодарны. Я знаю, я это сделаю.

    Ответ
    • Sumeet
      8 июля 2010 в 3:42 утра

      Ммм .. Я посмотрю, что можно придумать с ней :) До этого времени, попробуйте переназначить jqtransform метод динамически генерируемые форме и, возможно, загрузите страницу с помощью Ajax? Насколько я думаю, jqtransform применяется при загрузке страницы ..

  16. Майк
    24 июля 2010 в 3:10 утра

    Эй Sumeet - У меня, надеюсь, безболезненно к тебе вопрос: Каким образом вы получаете те выпадающие быть все же ширины. Чтобы дать вам пример того, что я после этого, http://givester.de/ имеет 9 из этих текстовых. Кроме того, если вы выбираете один из сверхдлинных вариантов, формулировка не продлить из выбрать окно, а остается внутри - то, что я имел проблемы с с использованием другого метода JS. Что ж, надеемся услышать от Вас!
    в прошлом Mike блоге .. Собака Day-Бола От Сакраменто SPCA! Мой профиль ComLuv

    Ответ
    • Sumeet
      24 июля 2010 года в 9:17 вечера

      Мне очень нравится то, что они сделали с выпадающего варианты на этом сайте вы дали. Очень длинные варианты установки правильно выбрать окно, потому что они взяли оптимальной ширины окна выбрать таким образом, чтобы длинный вариант, что они дают меньше, чем его. Я динамически увеличить длину вариант (с использованием поджигатель), и он вышел на улицу выберите поле. По пределами я имею в виду какую-то часть текста получил скрыты.

      Что касается, как они разделены на две опции различных DIV-ов, это очень интересно. Любая идея, как они это сделали? Я думаю, что они либо изменение jqTransform код таким образом, что, когда число элементов списка выходит за определенную сумму, то они начинают добавления элементов списка в новом Div и так далее. Поэтому, например, после каждой седьмой элемент списка, новая оболочка создал и так далее. Они, очевидно, использовать CSS, чтобы привести их в горизонтальном положении.

  17. pranami
    9 августа 2010 года в 9:06 утра

    привет,
    Я создаю форму, в которой jqtransform Есть много выбрать окно, на 1 этапе мне нужно disableselect окне Как я могу это сделать

    Ответ
    • Sumeet
      11 августа 2010 в 12:31 утра

      Почему бы вам не только создать класс под названием "скрыть", которая имеет "дисплей: ни имущества. Всякий раз, когда вы хотите отключить любой выберите поле лишь добавить, что класс для этого конкретного выбора окна динамично ...

  18. Дэвид Judik
    16 августа 2010 года в 5:23 вечера

    У меня такая же проблема, кроме того, что мне нужно значение параметра, а не текст. Я писал, что простой код:
    $ ("Div.jqTransformSelectWrapper улица Ли"). Кнопку (функция () (
    VAR индекс = $ (это). айг ("индекс");
    VAR значение = $ ('select.jqTransformHidden вариант: эк (' + индекс +')'). айг ('значение');
    window.location.href = значение;
    ));
    Judik прошлом Дэвид блог .. Sorszámozott Листа formázása CSS-Сель Мой профиль ComLuv

    Ответ
  19. Крис
    20 августа 2010 года в 4:12 вечера

    Привет,

    Это действительно полезный мод - благодарность за усилия, положить в нее :)

    Я пытаюсь найти способ восстановить единый выберите (выпадающего списка).
    Традиционных Javascript будут:
    document.getElementById ('selectname'). SelectedIndex = 0;
    document.getElementById ('selectname'). параметры [0]. выбран = True;

    Тем не менее, выше, не влияет на jqtransform выбрать в качестве своего списка.
    Есть ли способ я могу сбросить jqtransform выбрать?
    Если это значит, делать о JS (так форме представляется правильным значениям), а затем jqtransform фальшивая, изменив текст и применения выбранного стиля в первом Ли и его удаления из текущей один?

    Надежда я объяснить это нормально? LOL

    Ответ
    • Самуил
      26 августа 2010 в 2:04 утра

      Крис,

      Есть несколько вариантов.

      1. Вы можете позвонить jqTransformReset (); - это сброс всех выбрать ящики, радио-кнопки, флажки. Это может быть слишком экстремальным для вашего дела.

      2. Вы можете скопировать код jqTransform использует для сброса выбрать ящики:

      $ ('. JqTransformSelectWrapper выберите', е). Каждого из них (функция () (Сель = (this.selectedIndex <0)? 0: this.selectedIndex; $ ('улица', $ (это). Родителя ()). Каждого (функция () ($ (': эк (' + + Сель ')', это). кнопку ();));));

      Просто изменить первоначальный выбора JQuery чтобы они соответствовали вашим конкретной области, удалить контекст (", ф") и имеют на него. Я проверил это, и она работает.

    • Самуил
      26 августа 2010 в 2:08 утра

      Крис,

      Будьте предупредил, что мой метод, описанный выше, будет огонь "изменить" событие для избранных поле, если вы добавили: "$ select.trigger ('изменения');" в в строке 281 (как указано ниже).

    • Крис
      3 сентября 2010 года в 3:37 вечера

      Я пробовал вариант 2, но и чему не привели : (
      Ниже приведен код я использовал. Название идентификатор размещены на выбор, и весь код по щелчку кнопкой сброса в:

      $ ("# Сброс"). Кнопку (функция () (
      $ ('# Название'). Каждого из них (функция () (Сель = (this.selectedIndex <0)? 0: this.selectedIndex; $ ('улица', $ (это). Родителя ()). Каждого из них (функция ( ) ($ (': эк (' + + Сель ')', это). кнопку ();));));
      ));

      Ничего не происходит. Нет JS ошибки либо.

    • Крис
      3 сентября 2010 в 4:00 вечера

      ладно, думаю, я нашел решение. Я изменил последнюю часть кода (прямо перед щелчку) от "Сель (текущий выбор меню), в" 0 ", т.е. первый пункт в списке, который всегда по умолчанию" Пожалуйста, выберите вариант ". Кажется, работа сброс всех моих выбирает :)

      / / RESET КНОПКА
      $ ("# Сброс"). Кнопку (функция () (
      $ ('Выберите'). Каждого из них (функция () (Сель = (this.selectedIndex <0)? 0: this.selectedIndex; $ ('улица', $ (это). Родителя ()). Каждого из них (функция () ($ (': эк (0), это). ();});}); нажмите
      ));

    • Самуил
      3 сентября 2010 в 9:24 вечера

      Крис,

      Моя ошибка. jqTransformReset () не является доступным. Я бросил эту линию, чтобы добраться до него:

      $. Fn.jqTransformReset = jqTransformReset;

      И тогда его называли, прохождения реального объекта DOM формы, например:

      $ ('# Form1'). Каждого из них (функция () ($. Fn.jqTransformReset (это );});

      Я, однако, отметить, что это * не * сброс выбрать окно для меня. Извините за диких гусей. : (

  20. Самуил
    26 августа 2010 года в 1:12 утра

    Только испытан под JQuery 1,4, но если добавить:

    Select.trigger $ ('изменения');

    в строке 281 (после "$ ul.hide ();" и до "возвращение ложным;") в разделе SELECT, он будет срабатывать событие для вас.

    Ответ
    • Крис
      3 сентября 2010 в 1:41 вечера

      Спасибо за ответы Самуила. jqTransformReset (); было бы хорошо для меня, но я могу получить его работы.

      У меня есть кнопка с идентификатором "сброс". и следующих в сценарии метки:

      $ ("# Сброс"). Кнопку (функция () (
      $ ("Форма"). JqTransformReset ();
      ));

      Я получаю ошибку $ ("форма"). JqTransformReset () не является функцией.

      Любые идеи?
      Еще раз спасибо.

Trackbacks и Pingbacks

  1. Вы сейчас котируются на FAQPAL
  2. designfloat.com
  3. zabox.net

Написать ответ

CommentLuv Enabled
  • Графический реки WpWebHost Хостинг Are My Сайты Up? Тема лесных

  • Просматривать

    • Sumeet:

      Он, кажется, работает хорошо. Когда вы нажмете на загрузку, окно ап ...

    • Майкл Holewinski:

      В настоящее время я не могу загрузить этот шаблон. Любая помощь будет мес ...

    • Джаз:

      Спасибо за обмен этой статье, я имел вид на учебник, а I. ..

    • Самуил:

      Крис, моя ошибка. jqTransformReset () не является доступным. Я бросил это ...

    • Chris:

      ладно, думаю, я нашел решение. Я изменил последнюю часть сотрудничества ...

  • Облако тегов