Изменяем внешний вид элементов формы с помощью jqTransform

Главные вкладки

Аватар пользователя stillfinder stillfinder 23 декабря 2012 в 16:10

Допустим нас достал тот факт, что внутренние элементы формы выглядят чересчур стандартно, и нам захотелось изменить внешний вид элементов формы, сделать элементы формы красивыми, интересными и привлекательными, сделать интересные селекты, чекбоксы и другие элементы. Для того, чтобы улучшить внешний вид форм быстро и без особых забот нам на помощь приходит библиотека jqtransform.

Для начала скачиваем библиотеку вот здесь http://stillfinder.net/sites/default/files/jqtransform.zip или идем в гугль и ищем где можно скачать

Далее содержимое архива заливаем сюда /sites/all/themes/Ваша_тема/js/
Структура папок такая /sites/all/themes/Ваша_тема/js/jqtransform/jqtransformplugin/ - папка jqtransformplugin в папке jqtransform

Подключаем javascript библиотеки и ее css, для этого в Ваша_тема.info, который находится в папке с темой добавляем следующие строчки:
stylesheets[all][] = js/jqtransform/jqtransformplugin/jqtransform.css
scripts[] = js/jqtransform/jqtransformplugin/jquery.jqtransform.js

В файлике, где находятся все яваскрипты вашей темы добавляем следующий код:

Drupal.behaviors.jqTransform = function(context) {
$(function(){
//здесь пишем див в котором находится модифицируемый элемент формы
$('.webform-component-select').jqTransform();
});
}

webform-component-select заменяем на Ваш, добавляем много строчек вида
$('.webform-component-select').jqTransform();
для всех элементов внешний вид мы хотим заменить и радуемся жизни.

Оригинал здесь http://stillfinder.net/blog/izmenyaem-vneshnii-vid-elementov-formy-s-pom...

Комментарии

Аватар пользователя stillfinder stillfinder 23 декабря 2012 в 21:28

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

Аватар пользователя joomler joomler 23 декабря 2012 в 21:48

stillfinder wrote:
Ну по поводу css - это тоже не для всех случаев, наверное. Можете поделиться линком, где все тоже самое делается через css, чтобы было нормально описано ?

вот например http://www.onextrapixel.com/2012/10/26/custom-style-all-your-form-elemen...
единственно цсс надо к теме адаптировать

Аватар пользователя Niklan Niklan 23 декабря 2012 в 21:37

"stillfinder" wrote:
Ну по поводу css - это тоже не для всех случаев, наверное. Можете поделиться линком, где все тоже самое делается через css, чтобы было нормально описано ?

В смысле как?

input[type=text] {
 background: #FFF;
 color: #000;
 и т.д.
}

Как душе угодно так и делаете. Всю ту форму из примера можно сделать на CSS.

Единственное это выпадающий список.

Аватар пользователя Chyvakoff Chyvakoff 24 декабря 2012 в 9:36

"Niklan" wrote:
Единственное это выпадающий список.

Вот это самый большой геммор...

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

К jQuery у меня больше доверия в этом плане.