jQuery и Drupal. Урок 5. jQuery онлайн-калькулятор, sexy uniform

В этом видео мы разберем как использовать jQuery для создания онлайн-калькулятора. Также мы подключим плагин sexy uniform, чтобы наши кнопочки смотрелись красиво.

Группа Вконтакте: http://vk.com/sitemade
Уроки на Рутрекере : http://rutracker.org/forum/viewtopic.php?t=4039808

Комментарии

Добавить комментарий

Войти, используя Loginza Google Account Yandex Mail.ru Vkontakte Facebook

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.

Вам нужно будет использовать

Вам нужно будет использовать form_state или ajax в форме, чтобы менять вид какого-нибудь поля.

Пример использования form_state, когда мы выбираем чекбокс и появляются нужные поля формы (только вам вместо полей, нужно будет поставить markup'ы с html кодом картинки, что придется добавить через hook_form_alter():

http://randyfay.com/states

https://api.drupal.org/api/drupal/developer!topics!forms_api_reference.html/7#markup

Form API Drupal создание форм на Друпал

 

Тоже самое можно сделать и через ajax, с использованием callback-функции с параметром. Но думаю в вашем варианте проще сделать через form_state.

https://api.drupal.org/api/drupal/developer!topics!forms_api_reference.html/7#ajax

https://drupal.org/node/1561608

 

Тестировал на своем примере,

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

Проблема нашлась в

Проблема нашлась в функциях parseFloat(для дробных чисел) и parseInt(для целых чисел) Спасибо за урок, у меня получился ОтЛичный калькулятор, но для одной проблемы не нашел решения. В хроме при обработчике событий ".bind('change' , function()" работает на ура, даже когда нажимаешь "ENTER", а в Опере, Мозиле другие не пробовал, с клавишей "ENTER" проблема - она вызывает нажатие кнопки отправить форму, можно ее убрать..., я использовал display: none; :(. Может в шаблоне?... или можно  переопределить через скрипты?

Я понял, но до конца

Я понял, но до конца разобраться не могу Cry. Получилось например вывести алерт после нажатия "Enter", дальше нажимаешь ОК и форма всеравно отправляется. Если можно сделайте пример для своего урока, думаю будет актуально для WebForm модуля как калькулятора.  И можно добавить вариант с  переопределением - чтобы при нажатии на клавишу отправить происходил еще один расчет суммы. (Клавишу можно переименовать в настройках самой формы) Спасибо.

Да отправляется, жму Enter

Да отправляется, жму Enter страница начинает обновлятся появляется алерт жму ОК и она перезагружается полностью. Просто я незнаю как правильно использовать это функцию return fasle; вот и все. этот http://jsfiddle.net/clooud/TDu6T/ каклькулятор сделал на Вашем уроке Знаю этот язык ровно на столько сколько есть в Ваших уроках (1-5) по jQuery, помогите разобраться.

Есть еще вариан навесить вот

Есть еще вариан навесить вот этот jquery-метод submit() на всю форму:

http://api.jquery.com/submit/

 

Вот здесь-то точно return false; должно сработать:

$('#target').submit(function() {
  alert('Handler for .submit() called.');
  return false;
}); 

В #target нужно забить id формы.

$('#webform-client-form-1296

$('#webform-client-form-1296 #edit-submit').hide();

$('#webform-client-form-1296 #edit-submit').attr('keydown', false);

Это помогло для оперы и IE - кроме мозилы
 

     $(document).keypress(function (e) { 

if ((e.which == 13) || (e.keyCode == 13)) {

return false;

}

});

      $(document).keypress(function (e) { 

if ((e.which == 13) || (e.keyCode == 13)) {

return false;

}

});

      $(document).keypress(function (e) { 

if ((e.which == 13) || (e.keyCode == 13)) {

return false;

}

});
Это убило все телодвижения с "ENTER" причем для всех кнопок на сайте :(, но если заменить $(document) на $(#idкнопки) не работает!
Ваш способ попробую обязательно... 

Привтствую! Спасибо за урок,

Привтствую! Спасибо за урок, у меня получилось отличная форма!

Единственное но, кнопка отправить так и остается рабочей даже с выше написанным кодом.

Можете есть ещё какое-нибудь решение?

Добавьте еще одно поле и

Добавьте еще одно поле и скройте его через css, через jquery оно будет доступно, но не будет видно. Но это не есть хорошее решение, потому что можно файербагом открыть поле и вписать туда все что захочется. Правильнее будет на submit формы писать те же вычисление которые на jquery в php и записывать результат в поле.

Здесь написано как:

https://drupal.org/node/58689

Добрый день добрый

Добрый день добрый человек.

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

Спасибо вам за ваши уроки,

Спасибо вам за ваши уроки, долго искал что-то подобное!

 

Подскажите, как прикрутить js и css только к определенной странице(где будет сам калькулятор). Неохота чтобы css и js запускались на каждой странице сайта?

 

Еще, как вы так красиво оформили ваш калькулятор? Чтобы были и картинки с цветами и прочее?

Что прикрепить js и css к

Что прикрепить js и css к форме, можно использовать hook_form_alter() и поле #attached:

// Get the path to the module
$path = drupal_get_path('module', 'form_theme');
// Attach the CSS and JS to the form
$form['#attached'] = array
(
	'css' => array
	(
		'type' => 'file',
		'data' => $path . '/form_theme.css',
	),
	'js' => array
	(
		'type' => 'file',
		'data' => $path . '/form_theme.js',
	),
);

 

Здравствуйте Иван. В примере

Здравствуйте Иван.

В примере вы используете функцию insertBefore

Рытаюсь использовать эту функцию делаю вставку тега input

$('<input type="submit id="id" ">')insertBefore($('#id'))

 

событие не работает 

$("#id").click(function(){

alert('sssss');

});

или jquery не может обращаться к таким элементам после вставки с помощью фнукции  insertBefore ?

Извиняюсь за ошибки

Извиняюсь за ошибки торопился.

$("#test1").click(function(){

     $('<input type="submit" id="test2" />').insertBefore($('#test3'));

});

сам input вставляется а вот событие не работает 

$("#test2").click(function(){

      alert('sssss');

});