Простые решения, простая жизнь!В данной тебе внимание привлечено в тех мелких деталях, которые помогают сделать любую веб страницу лучше, проще, быстрее, надеждее и удобнее для пользователя. Простые механизмы на Javascript и CSS, о которых все забывают - помогут облизать любую веб-страницу и преподнести пользовтелю информацию в лучшем виде.
Поехали...
-
Если используете AJAX в случаях, когда потеря данных дорого может обойтись – обязательно пропишите в основном файле оповещение, которое будет уведомлять пользователя о том, что данные возможно, потеряны.
Данный скрипт будет отрабатывать, если статус страницы – не 200. То есть такая реакция будет на любые 50х ошибки
$(document).ajaxError(function(event, request, settings) {
Alert('Ошибкаприобращенииксерверу' +request.status + ' ' + request.statusText+'. Ваши данные не сохранились. Обновите страницу, чтобы увидеть актуальные данные');
});- Если Вы цените красоту форм – для всех Textarea– используйте стиль resize. Firefox – по умолчанию позволяет менять размеры всех textarea. Стиль resize: vertical позволяет установить возможность менять размер только по вертикали, или вовсе запретить. Не позволяйте пользователю ломать всю верстку страницы
- Дайте пользователю возможность использовать голосовой ввод. Один лишь параметр –webkit-textspeethв поле ввода inputдля всех пользователей Chrome показывает базовый микрофончик с возможностью голосового ввода. С одной стороны – баловство, с другой стороны – выглядит престижно
- Помогите пользователю не отправить данные, если на компьютере нет подключения к интернету. Да. Браузеры умеют отслеживать подключен ли компьютер к интернету или нет. Скрипт поможет лишь не дать пользователю отправить (и возможно потерять) введенные данные. Речь идет, прежде всего, о больших формах.
var state='online';
addEventListener('online',function(){state='online';},false);
addEventListener('offline',function(){state='offline';},false);
function form_validate(form){
if (state=='offline'){
if (!confirm('Браузер не подключен к интернету. Уверены, что хотите продолжить?'))returnfalse;
}
…
}- Чтобы вывести отдельную страничку для печати – не нужно создавать новый шаблон, в котором будет выделена основная часть и поддерживать его каким-либо образом. С этой функцией хорошо справляется CSS и медиа запросы типа @mediaprint {}. К примеру – если какой-то блок не должен попадать в область печати – можно присвоить ему класс «noprint». А в настройках CSS – дописать @mediaprint { .noprint{ dispay: none; } }. Аналогично – можно сделать стили для отображения новых элементов.
- Не давайте пользователю отправить форму дважды. В вебе довольно распространенное явление, когда пользователь нажал на кнопку отправки данных, данные отправились, но страница еще не отобразилась, а пользователь уже еще раз нажал на ту же кнопку. Получается – двойная порция данных. Отсюда появляются – двойные комментарии к постам. Варианта решения – 2. Добавлять в форму скрытое поле с идентификатором данных и отлавливать отправку формы с этими данными, либо при помощи Javascript – делать кнопку отправки после клика – недоступной/скрытой. Если на странице – также присутствует функция валидации – желательно по таймеру – секунд 10 – вернуть кнопку назад.
-
Не давайте пользователю случайно уйти со страницы, если данные в форму он уже начал вводить. Бывало ли у вас такое… большая форма, большое текстовое поле. И тут вы хотите заполнить оставшееся мелкое поле – жмете по привычке клик мышкой и backspace←, чтобы стереть ее текущее значение. Промахиваетесь мышью, попадаете по форме вместо поля… значок вкладки браузера начинает вертеться и открывает вам предыдущую страницу в истории браузера… и то, что данные были какие-то введены – его не интересует. Пытаетесь вернуться обратно в надежде, что данные таки сохранились, ан нет. Вводите все заново. И браузер даже не напомнит вам только что введенные данные. Здесь помочь могут только яваскрипты.
Вешаем на каждое поле формы – событие, которое будет опрашивать пользователя о том, что данные редактировать он начал. На страницу вешаем событие, если ранее была установлена переменная в редактирование – спросить пользователя перед закрытием – что форму он не отправил, хочет ли он продолжить. Конечно, на кнопку отправки формы вешаем переменную обратно.
Для вызова исключений вроде открытия в дополнительном окне новых данных – заводим новую переменную
Все это может быть описано, как
var endsubmit=false;
var notlink=false;
var fc=false; // formchange
window.onbeforeunload = function () {
if (notlink)return;
if (fc)return 'У Вас есть не сохраненные данные. Вы уверены, что хотите покинуть форму?';
};
$('a[href^="javascript:"]').click(function(){
notlink=true;
})
$('input:not(.nc,.nc *),select:not(.nc,.nc *),textarea:not(.nc,.nc *)').change(function(){
fc=true;
})
$('input:submit').click(function(){
endsubmit=true;
notlink=true;
})
$(document).click(function(){
if (endsubmit)return;
setTimeout('notlink=false;',1);
})Для простого решения – хватит и первой основной функции. Для форм, которым не нужно пристальное заполнение данных – можно проставить класс nc.
Пользуйтесь во благо пользователя.