|
|
Интересные статьи
|
|
|
|
|
Улучшение форм авторизации, регистрации и напоминации 
Гутен морген таг, майне либе фройнде. Пока писал, доброе утро превратилось в добрый следующий день )
Сегодня мы займемся улучшением формы, которую я представил в этой статье.
В примере было немало косяков и несовершенств. На некоторые из них обратили внимание читатели, другие пришлось заметить самому.
К делу.
1. Доступность
Это был главный, на мой взгляд недостаток, который, в общем-то поправить было несложно. В чем суть: без js мы не могли увидеть другую форму, кроме той, которая показывается по умолчанию. Поэтому вместо "#" прописываем нормальные адреса страниц:
2. Код
Первое, что надо было поправить - ошибки оформить в массивы. Что и было сделано. var er = []; er[0] = "Неправильный формат email'a"; //0 er[1] = "Пароли не совпадают"; //0 er[2] = "Пользователь с таким email'ом уже зарегистрирован"; //0 er[3] = "Не угадали пароль. Или email. Попробуйте еще раз"; //1
Второе - сделать привязку событий на клики по псевдоссылкам более лаконичной. Для этого я убрал лишние классы из разметки и определял, что должно сработать ислодя из атрибута href ссылки: $('.additional a').click(function(e) { e.preventDefault(); var x; switch ($(this).attr('href')) { case ("signup.html"): x = 0; break; case ("index.html"): x = 1; break; case ("remind.html"): x = 2; break; }; GoTo(x); }); 3. Фокусировка
Если бы мы попробовали в прошлом примере с помощью табуляции переходить по элементам формы, мы бы перескакивали с формы на форму, причем в некоторых браузерах маргин менялся бы автоматически, чтобы показать сфокусированные элементы формы и назад нам вернуться было бы проблематично.
Проблема решается простым указанием visibility: hidden для тех форм, которые сейчас не видны. На такие элементы формы фокус не переходит.
Таким образом при клике мы должны сделать блок, который сейчас приедет видимым: $('.additional a').click(function(e) { e.preventDefault(); var x; switch ($(this).attr('href')) { ... }; $(blocks[x]).css({ 'visibility': 'visible' }); //Эту строчку мы только что добавили GoTo(x); });
А уехавший блок надо скрыть: var cur = 1; function GoTo(num) { margin = num * 382; $('#wr').animate( { marginLeft: -margin }, 800, 'easeInOutBack', function() { $(blocks[cur]).css({ 'visibility': 'hidden' }); cur = num; }); }
Victor сделал разумное предложение: фокусировать на первом текстовом поле при переходе на другую форму. Предложение было весьма разумным. Реализуем. function GoTo(num) { margin = num * 382; $('#wr').animate( { marginLeft: -margin }, 800, 'easeInOutBack', function() { switch (num) { case 0: $('#email').focus(); break; case 1: $('#loginEmail').focus(); break; case 2: $('#remindEmail').focus(); break; }; $(blocks[cur]).css({ 'visibility': 'hidden' }); cur = num; }); } 4. Индикатор.
В форме не было индикатора загрузки. А без индикатора сейчас на приличные вечеринки уже не пускают. Генерируем его на аджакслоад.инфо и вставляем в уголочек.
Код увеличится на несколько функций: показ и скрытие индикатора, которые будут вызываться при вызове ajax-функций. function ShowIndicator() { $('#indicator').show(); } function HideIndicator() { $('#indicator').hide(); }
А в функцию авторизации вставляем в нужные места показ и скрытие индикатора: function SignIn() { pass = $('#loginPass').val(); email = $('#loginEmail').val(); ShowIndicator(); //показали if ((email != "") && ( CheckPassword(email, pass))) { //Sign User In HideIndicator(); //скрыли HideError(); } else { ShowError(3); HideIndicator();//скрыли, даже если залогинить не удалось } } Источник: http://vremenno.net
|
|
|
Создание календаря-расписания
Многие верстальщики старой закалки, стараясь обеспечить поддержку IE6 избегали использовать псевдоклассы, вроде :first-child, вместо этого первым элементам дописывали дополнительные классы или использовали js, и поэтому забыли их напрочь |
|
|
|
|