Многие знают, что стилизация форм непростая задача. Многие манипуляция с элементами формы с помощью CSS просто невозможны. Поэтомe на помощь нужно звать JavaScript.
Чтобы сделать форму стильной и красивой существует множество JS библиотек и функций, есть также множество плагинов для стилизации формы для яваскрипт фреймворка Jquery. Одним из часто используемых и простых среди таких плагинов является Jqtransform.
Для тех, кто еще не пользовался данным плагином даю ссылку на сайт автора http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/. С помощью его можно быстро и просто стилизовать формы на сайте. Сюда приводить примеры и выставлять демо не буду, так как на сайте разработчика все показано и расписано как нужно.
В этом посте я хочу поделиться полезной информацией дял тех, кто использует ajax и работает с динамичными формами, данные и в списки в которые подгружаются в зависимости от выбора пользователи или других действий.
Во время работы над одним сайтом, возникла необходимость подгружать списки регионов и городов в зависимости от того, какую страну выбрал пользователь. Но возникла проблема, что вновь подгруженные списки выбора не стилизуются. Так как инициализация функции Jqtransform происходит после загрузки страницы, а добавленные после этого элементы формы уже оказываются без изменений.
Для того чтобы вновь обновить форму стилизованную с помощью Jqtransform, нужно внутри функции ajax подгружения прописать несколько строчек. Я приведу пример как это работает у меня и ниже дам комментарии:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$('#country').ready(function(){ $("#country div.jqTransformSelectWrapper ul li a").click(function(){ var value= $(this).text() $.post("stranica.php')?>", { country: value}, function(data) { $('#region').remove(); $("#country").after(data); // #form2 это ID формы, стилизованной с помощью Jqtransform. Ниже 3 строчки для обновления формы $('#form2').removeClass('jqtransformdone'); $('#form2').removeClass('jqTransformHidden'); $('#form2').jqTransform({imgPath:'/include/style/default/images/'}); }); return false; //prevent default browser action }); }) |
Ниже вырезка из трех строк, которые Вам будут интересны (именно эти строчки необходимы для стилизации подгруженных аяксом элементов):
|
1 2 3 |
$('#form2').removeClass('jqtransformdone'); $('#form2').removeClass('jqTransformHidden'); $('#form2').jqTransform({imgPath:'/include/style/default/images/'}); |
Вам в своем коде придется поменять идентификатор формы (#form2) и путь к изображениям плагина. Лично я применял это решение для выпадающих списков выбора — работает. Как будет работать для других — пока не знаю.
Небольшая заметка для тех кто интересуется недвижимостью:
Продать и купить квартиру в Фастове можно на сайте объявлений http://rieltor.ua/fastov/flats-sale/. Тут найдутся объявления об аренде, покупке и продаже недвижимости в городе Фастов. Удобный поиск по цене, по длительности аренды, по площади и другим важным параметрам поможет быстро и без проблем найти квартиру.
