HTML кнопка – незаменимый помощник для навигации по сайту
Почти все люди (некоторые больше, некоторые – меньше) любят порядок, потому что порядок – это всегда удобно. Удобно, когда у человека порядок на рабочем столе, на работе, в квартире. И очень удобно, когда заходишь на незнакомый сайт, а там тоже – порядок, всё легко и просто.
Обычно такой порядок называется дружественным (интуитивно понятным) интерфейсом. Html кнопка – это просто незаменимое средство для наведения порядка на сайте и организации дружественного интерфейса.
Кнопки для сайта HTML создаются одним из двух способов:
1. С помощью тега input. Синтаксис такой команды выглядит следующим образом:
<input type="button" value=надпись на кнопке>
2. С помощью тега button:
<button>Надпись на кнопке</button> Пример кода, который выполняет создание кнопки в <b>html</b> сразу двумя этими способами: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопка</title> </head> <body> <form> <p><input type="button" value=" Кнопочка1 "></p> <p><button>Кнопочка2</button></p> </form> </body> </html>
В результате получаются две одинаковые кнопки:
Таким образом, хотя получились две абсолютно одинаковые кнопки html, код для них немного разный. Не имеет значения, как создать кнопку в html.
Разница между двумя методами состоит лишь в том, что при использовании тега button – вы можете поместить в контейнер свой набор в виде картинки и текста, и это все будет активно, а при использовании тега input возможно будет использовать либо только картинку, либо только текст.
Но при этом старые версии браузера Internet Explorer могут неправильно отображать современный тег button.
Кнопка со ссылкой HTML (например, кнопка наверх для сайта html или кнопка назад html) может быть создана с помощью ссылок «якорей». Обычный «якорь» имеет следующий вид:
Такой «якорь» невидим и может быть поставлен в любом месте, в котором вы считаете нужным. Для того чтобы перейти к «якорю», используется следующая команда:
<a href="#имя якоря">название кнопки</a>
Нажатие на название кнопки, моментально переводит курсор к «якорю».
Допустим, нам нужно, чтобы внизу сайта стояла кнопка перехода на начало, а в начале – для перехода вниз:
<!DOCTYPE html>
<html>
<head>
<title>Якорь</title>
</head>
<body>
<form>
<a name="top"></a>
<p><a href="#end">вниз</a></p>
…
<p><a href="#top">вверх</a></p>
…
<a name="end"></a>
</form>
</body>
</html>Выглядит это следующим образом:
Кнопки типа Submit существуют для отправки информации, введённой посетителем сайта, на сервер. Например, простейшая организация ввода пароля выглядит так:
<p><input name="login"></p> <p><input type="submit"></p>
Кнопки типа Reset предназначены для обновления данных форм (возврата их в первоначальное состояние). Для того чтобы создать такую кнопку, следует использовать следующий код:
<input type="reset" value="Название кнопки">
В HTML кнопки можно украшать какими-либо картинками. Для этого достаточно использовать следующий код:
<input type="image" src="ссылка на картинку">"
Кнопка с картинкой и текстом:
<button> <img alt="" src="ссылка на картинку" />Нажмите, чтобы посмеяться</button>
Например:
Таким образом, при создании кнопок HTML можно проявить свою выдумку: любые дизайнерские фантазии реализуются написанием достаточно простого кода.
Удачи!
Кнопки «Наверх», «Назад», «Вниз» на jQuery, как вконтакте
Это статья — продолжение к моему старому посту про кнопку наверх, который с момента публикации набрал максимальное количество просмотров среди остальных постов на блоге и 95 комментариев!
Вот скрин из Google Analytics, топ 3 поста на блоге с момента публикации «кнопки наверх»:
Отрыв практически в два раза, впечатляет 🙂
В комментах меня просили, и не раз, сделать точную копию кнопки как вконтакте, то есть чтобы при прокрутке наверх она превращалась в кнопку «Назад» (это было в то время), а сейчас там кнопка немного поменялась и теперь её можно назвать кнопкой «Вверх-вниз» (возвращает обратно в ту часть страницы, откуда вы нажали «наверх». Сегодня я распишу оба варианта.
1. Кнопка «Наверх-Назад» (на предыдущую страницу)
Теория этой кнопки в том, что когда человек нажал на кнопку «наверх», ему захочется вернуться на предыдущую просмотренную страницу (разве что предыдущая страница — результаты поиска в Google) и поэтому ему необходимо предложить такую возможность.
HTML
Сначала HTML-код, вставьте его куда-нибудь на своё усмотрение, я бы засунул перед закрывающим тегом </body>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="button_back.js"></script> <div> <a href="#top">наверх</a> </div> |
Повторю ещё раз, если кнопка не работает, попробуйте при подключении файла button_back.js прописать абсолютный URL.
CSS
#top-link{
cursor:pointer;
display:none;
position:fixed;
top:0px;
bottom:0px;
padding-left:5px;
padding-top:5px;
z-index:1;
}
#top-link a{
display:block;
} |
jQuery
Это содержимое файла button_back.js. Обратите внимание на ID основного блока с контентом на 3-й строчке кода, у меня это #content, а у вас может быть что-нибудь другое, например #container.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | jQuery.extend(jQuery.fn, {
toplinkwidth: function(){
totalContentWidth = jQuery('#content').outerWidth(); // ширина блока с контентом, включая padding
totalTopLinkWidth = jQuery('#top-link').children('a').outerWidth(true); // ширина самой кнопки наверх, включая padding и margin
h = jQuery(window).width()/2-totalContentWidth/2-totalTopLinkWidth;
if(h<0){
// если кнопка не умещается, скрываем её
jQuery(this).hide();
} else {
if(jQuery(window).scrollTop() >= 1){
jQuery(this).show();
}
jQuery(this).css({'padding-right': h+'px'});
}
}
});
jQuery(function($){
var topLink = $('#top-link');
topLink.css({'padding-bottom': $(window).height()});
// если вам не нужно, чтобы кнопка подстраивалась под ширину экрана - удалите следующие четыре строчки в коде
topLink.toplinkwidth();
$(window).resize(function(){
topLink.toplinkwidth();
});
$(window).scroll(function() {
if($(window).scrollTop() >= 1) {
topLink.fadeIn(300).children('a').html('наверх').parent().removeAttr("onClick");
} else {
topLink.children('a').html('назад').parent().attr("onClick", "history.back()");
}
});
topLink.click(function(e) {
$("body,html").animate({scrollTop: 0}, 500);
return false;
});
}); |
P.S. в примере я особо не заморачивался с оформлением кнопки — всё только самое необходимое, если вам нужно оформление — смотрите или скачивайте демо.
2. Кнопка «Наверх-Вниз» (обратно в ту часть страницы, где был переход наверх)
Как я уже говорил, вконтакте отказались от теории, по которой посетителю постоянно хочется перейти на предыдущую просмотренную страницу.
Они решили, что непостоянному пользователю после прокрутки страницы наверх вновь захочется продолжить чтение ленты новостей с того места, где он остановился. Скажу честно, я сам сталкивался с такой ситуацией, так что этот вариант мне нравится больше.
Подробнее о том, как определить текущее местонахождение на странице.
Итак, погнали.
HTML и CSS
button_down.js:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="button_down.js"></script> <div> <a href="#top">наверх</a> </div> |
#top-link{
cursor:pointer;
display:none;
position:fixed;
top:0px;
bottom:0px;
padding-left:5px;
padding-top:5px;
z-index:1;
}
#top-link a{
display:block;
} |
jQuery + плагин scrollTo
Содержимое файла button_down.js
#content.;(function($){var h=$.scrollTo=function(a,b,c){$(window).scrollTo(a,b,c)};h.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1,limit:true};h.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(e,f,g){if(typeof f=='object'){g=f;f=0}if(typeof g=='function')g={onAfter:g};if(e=='max')e=9e9;g=$.extend({},h.defaults,g);f=f||g.duration;g.queue=g.queue&&g.axis.length>1;if(g.queue)f/=2;g.offset=both(g.offset);g.over=both(g.over);return this._scrollable().each(function(){if(e==null)return;var d=this,$elem=$(d),targ=e,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}$.each(g.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=h.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(g.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=g.offset[pos]||0;if(g.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*g.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(g.limit&&/^\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&g.queue){if(old!=attr[key])animate(g.onAfterFirst);delete attr[key]}});animate(g.onAfter);function animate(a){$elem.animate(attr,f,g.easing,a&&function(){a.call(this,e,g)})}}).end()};h.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);
jQuery.extend(jQuery.fn, {
toplinkwidth: function(){
totalContentWidth = jQuery('#content').outerWidth(); // ширина блока с контентом, включая padding
totalTopLinkWidth = jQuery('#top-link').children('a').outerWidth(true); // ширина самой кнопки наверх, включая padding и margin
h = jQuery(window).width()/2-totalContentWidth/2-totalTopLinkWidth;
if(h<0){
// если кнопка не умещается, скрываем её
jQuery(this).hide();
} else {
if(jQuery(window).scrollTop() >= 1){
jQuery(this).show();
}
jQuery(this).css({'padding-right': h+'px'});
}
}
});
jQuery(function($){
var topLink = $('#top-link');
topLink.css({'padding-bottom': $(window).height()});
// если вам не нужно, чтобы кнопка подстраивалась под ширину экрана - удалите следующие четыре строчки в коде
topLink.toplinkwidth();
$(window).resize(function(){
topLink.toplinkwidth();
});
$(window).scroll(function() {
if($(window).scrollTop() >= 1) {
topLink.fadeIn(300).children('a').html('наверх').parent().removeClass('bottom_button').addClass('top_button');
} else {
topLink.children('a').html('вниз').parent().removeClass('top_button').addClass('bottom_button');
}
});
topLink.click(function(e) {
if($(this).hasClass('bottom_button')){
// при нажатии на кнопку «Вниз» переходим туда, где прекратили чтение
$("body").scrollTo( pos + 'px', 500 );
} else{
// определяем и запоминаем координаты того места страницы, откуда был совершен переход наверх
pos = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
$("body,html").animate({scrollTop: 0},500);
}
return false;
});
}); |
Работоспособность кода протестирована в браузерах Google Chrome, Mozilla Firefox и Opera (в актуальных на момент обновления данной статьи версиях).
Миша
Впервые познакомился с WordPress в 2009 году. С 2014 года меня можно встретить на WordCamp по всему миру — официальной конфе по WordPress, иногда там выступаю. Также периодически школа Epic Skills и LoftSchool приглашают меня вести у них уроки/вебинары.
Если вам нужна помощь с вашим сайтом или может даже разработка с нуля — пишите мне.
misha.blog
Как кнопка «Назад» способна уничтожить юзабилити сайта?
Многие исследования юзабилити показывают, что пользователи (как новички, так и опытные), часто используют кнопку «вернуться назад» в браузере. К сожалению, разработчики интерфейсов и маркетологи редко задумываются, какие последствия это может иметь для юзабилити — учитывая современные модели веб-дизайна, которые используют приложения, анимацию, видео и прочее. Часто техническая структура таких макетов некорректно реагирует на функцию «вернуться назад», чем разрывает ментальный шаблон пользователей и ухудшает их опыт.
Последствия этого могут быть ужасны: во время экспериментов неадекватная реакция сайта на нажатие кнопки «назад» была причиной ухода многих пользователей, причем с бранью и нелестными отзывами. В большинстве случаев даже почтенные, седовласые испытуемые страшно выходили из себя.
Из этой статьи вы узнаете:
- что ожидают пользователи от кнопки «вернуться назад»;
- каковы 5 самых распространенных ошибок;
- простое решение этих проблем.
Решение действительно очень простое, однако им часто пренебрегают даже самые крупные бренды. Исправим эту ошибку?
Ожидания пользователей
Коротко: пользователи ждут, что кнопка «вернуться назад» покажет им то, что они воспринимают как предыдущую страницу. Слово «воспринимают» очень важно, ведь между тем, что кажется предыдущей страницей, и тем, что является ей технически — колоссальная разница.
Возникает вопрос: что именно пользователи интерпретируют как новую страницу? В большинстве случаев, если страница существенно отличается визуально, но при этом концептуально связана с сайтом, то она воспринимается как новая. Поэтому очень важно отслеживать, как сайт обрабатывает различные интерактивные элементы: лайтбоксы, формы, фильтры и прочее.
Большая часть посетителей не разбирается в технических моментах, а полагается только на интуитивные представления о том, как должен работать ресурс. Поэтому при нажатии кнопки «назад» они ожидают страницу, на которой уже получили важный опыт, а получают страницу со слегка измененным интерфейсом.
Ниже приведены наиболее популярные интерактивные элементы и рекомендации по их использованию для максимального улучшения пользовательского опыта и юзабилити.
1. Наложения и лайтбоксы
Цель внедрения наложений и лайтбоксов — показать пользователю элемент, который возникает поверх страницы. Поэтому пользователи воспринимают подобные элементы как новые страницы, и нажимают кнопку «назад», чтобы вернуться в исходное положение — но попадают совсем не туда, куда ожидали. Это особенно прискорбно, ведь использование лайтбоксов только умножает отрицательное восприятие web-страницы — большинство пользователей не любят эти элементы на сайтах интернет-магазинов.
2. Фильтры и сортировка
Использование фильтров часто преображает страницу и дает человеку новый опыт. Поэтому страница после сортировки воспринимается как новая, даже если на ней ничего не подгружалось. Это происходит потому, что после каждого взаимодействия посетителя со страницей интернет-магазина получается новая выдача результатов.
Данный пример подчеркивает, что люди не вникают в технические аспекты при определении новой страницы, но используют только интуицию и сформировавшееся восприятие.
3. Форма регистрации/оплаты
Страница оплаты воспринимаются как новые страницы, и даже хуже — как многоступенчатый процесс, каждый этап которого можно отменить кнопкой «вернуться назад».
Подобный подход может принести проблемы, простой пример — человек хочет вернуться на шаг назад в заполнении формы, чтобы отредактировать введенную информацию. Нажатие кнопки «назад» возвращает его в корзину, и удаляет все (!) введенные данные. Раздражение и уход с сайта — закономерный эффект.
4. Использование AJAX
Технология AJAX может не оправдать ожидания пользователей: технически каждая страница AJAX находится под тем же URL, однако создается впечатление, что открываются новые страницы.
В контексте электронной коммерции у пользователей есть четкое восприятие того, что страница 3 и страница 4 — отдельные, и с четвертой к третьей можно перейти с помощью кнопки «назад».
Пользователи не готовы отказаться от кнопки «назад»
Учитывая, как широко применяется эта функция интернет-браузера, вопрос несоответствия ожиданий пользователя с видением разработчиков становится критическим — не стоит воспринимать его легкомысленно.
Особенно полюбилась кнопка «вернуться назад» пользователям мобильных приложений и сайтов. Как показало исследование мобильных версий сайтов, большинство пользователей использовало эту функцию на всех предложенных ресурсах. Причем использование кнопки не ограничивается откатом одной страницы — некоторые испытуемые нажимали ее до 15 (!) раз подряд.
Пользователи ПК тоже часто нажимают кнопку — но не так, как владельцы мобильных, ибо пользователям настольных компьютеров доступна удобная навигация по сайту.
Решение
Хорошая новость: HTML5 может предложить относительно простое решение проблемы, и называется оно HTML5 History API. Конкретнее — функция history.pushState() позволяет изменять URL без перезагрузки страницы. Соответственно сайт будет вести себя адекватно ожиданиям пользователя, нажавшего кнопку «вернуться назад».
Это означает, что при активации какого-либо интерактивного элемента сайт может вносить изменения в историю браузера пользователя. Конечно, функция применима не только к элементам, о которых мы говорили сегодня, но и ко всем прочим. Используя этот прием, вы можете быть уверены, что сайт оправдает ожидания пользователей.
Будьте разумны
Постарайтесь не переусердствовать с использованием history.pushState(). Эта сила должна быть применена разумно. Не стоит задавать отдельный URL для каждого слайда из фотогалереи и прочих мелких деталей. Иначе пользователь не почувствует разницу: по-прежнему, при нажатии «назад» ему потребуется пройти сквозь десятки незначительных изменений.
Любое значительное визуальное и контекстуальное изменение, воспринимающееся как отдельная страница, должно быть под своим URL.
Высоких вам конверсий!
По материалам baymard.com, image source M D
22-05-2014
lpgenerator.ru
что делать с кнопкой «назад» в браузерах / Habr
Примечание: статья посвящена обзору проблемы неработающей кнопки «назад» в браузере при использовании AJAX-методов для передачи содержания страниц от сервера к клиенту. В статье рассматриваются основные принципы работы AJAX и возможные пути решения заявленной проблемы. Курсивом даны мои комментарии.Эта статья является первой из ряда материалов (вторая статья посвящена работе с закладками), направленных на устранение части критики, которую адресуют сейчас AJAX, и предоставляющих обзор полезных методов, которые помогут сделать ваши приложения и веб-страницы, использующие технику AJAX, немного лучше.
Суть проблемы
С самого начала в основе Веба лежала возможность поставить гиперссылку с одной страницы на другую. Ссылки между страницами была первично двунаправленными: это означало, что переход по ссылке со страницы А на страницу Б никаким образом не мог предотвратить ни переход по ссылке обратно на страницу А, ни использование кнопки «назад» в браузере. Цепочка таких страниц представляет собой историю посещения в браузере, с каждой из них связан уникальный URL. Если представить это с технической стороны, то такая цепочка реализуется в виде стека. В дальнейшем я буду использовать термин «горизонтальная» ссылка для обозначения связи между элементами такого стека.
Рисунок 1. Горизонтальные ссылки
Чтобы вести разговор о страницах, построенных на горизонтальных ссылках и использующих AJAX, я введу термин «вертикальные» ссылки. Вертикальные ссылки являются ссылками на дополнительную информацию, отображаемую на текущей странице, но при этом доступ к ним осуществляется только с использованием AJAX-методов (прим.: в оригинале XMLHttpRequest, но информация может быть получена, в частности, и с помощи iframe, поэтому ввожу более общий термин). Другими словами, вы получаете новое содержание страницы на экране, но при этом сам URL этой страницы в браузере не меняется. Поскольку вертикальные ссылки не меняют URL’а страницы, то и в стек истории браузера новый элемент не добавляется. В результате, когда пользователь нажимает кнопку «назад» в браузере, он попадает на предыдущую горизонтальную страницу, которая может и не содержать всех изменений, появившихся на странице, которая только что была на экране.
Рисунок 2. Вертикальная ссылка между вторым URL’ом и сервером
Веб-сайт и веб-приложение
Подход, который стоит использовать для решения этой проблемы, напрямую зависит от того, что вы разрабатываете: веб-сайт или веб-приложение. Иногда тяжело разделить эти два понятия, но обычно веб-приложение можно отличить по следующим свойствам:
- Перед использованием требуется авторизация
- Серьезная работа с пользовательскими сессиями
- Процесс взаимодействия пользователя с приложением имеет вполне определенное начало и конец
В качестве примера веб-сайта можно рассмотреть Yahoo! Finance и E*TRADE — в качестве веб-приложения. С точки зрения пользователя я могу сказать, что не всегда возможно провести четкую границу между этими двумя типами. Однако, веб-разработчикам стоит с самого начала определиться, что же они собираются разрабатывать: сайт или приложения? Если вам это понять, то можно задать простой вопрос: в отсутствии интернета чем лучше всего описывается ваша разработка: это набор Word’овых документов или же настольное приложение? Рассматривайте веб-приложения наравне с настольными с той лишь разницей, что первым еще требуется браузер для нормальной работы. Другой вопрос, который можно себе задать, звучит так: «Вашей главной целью будет предоставление информации или обеспечение функциональности?».
Первое решение: не злоупотребляйте вертикальными ссылками
Если вы собираетесь создать веб-сайт для публичного доступа, я бы советовал вам использовать AJAX только в случаях крайней необходимости (не злоупотреблять им). Возможно, будет требоваться изменение URL’а страницы, чтобы обновить ее всю, но при этом, я полагаю, иделогия правильной работы кнопки «назад» в браузере будет соблюдена. Помните, что не все вызовы AJAX сильно связаны с вертикальными ссылками (прим.: как я понимаю, автор имеет в виду прежде всего изменение каких-либо малых частей страницы при неизменном основном содержимом).
Легче всего просто не принимать во внимание неработоспособность кнопки «назад» в браузере, но полностью этим пренебрегать нельзя. Вместо того, чтобы создавать целостное приложение, использующее большое количество вертикальных ссылок и привязанное к единственному URL’у, создайте некоторое количество горизонтальных ссылок в тех местах, где это действительно требуется. Другими словами, используйте горизонтальные ссылки для разделения частей вашего приложения, например, таким образом, как это делается в бумажной литературе (книга делится на части и главы). Используя разумную комбинацию традиционных горизонтальных ссылок с вертикальными, можно добиться баланса мощи AJAX и возможности использовать функционал перемещения по истории браузера.
Прим.: в качестве примера, пожалуй, можно привести некоторое количество современных сайтов, на которых AJAX используется только для предоставления некоторых дополнительных возможностей, в частности, это Хабрахабр и механизм голосования/добавления комментариев.
Второе решение: используйте специальную AJAX-библиотеку
Сейчас существует достаточное количество библиотек с открытым кодом, созданных в том числе с целью рарешить данную проблему. Большая часть из них используют так или иначе якори (anchor) (которые задаются после ‘#’ (hash) в ссылке). В результате получается вертикальная ссылка, которая изменяет URL страницы таким образом, что эмулирует новую горизонтальную ссылку (прим.: когда мы переходим по вертикальным ссылкам, мы одновременно переходим и по псевдо-горизонтальным), при этом не перегружая текущую страницу. Хотя каждая из таких библиотек добавляет на веб-страницу еще один уровень обработки (сложности, complexity), все же они довольно легко могут быть интегрированы в вашу разработку.
Прим.: ниже сгруппированы основные методы создание псевдо-горизонтальных ссылок, я постарался дополнить их известными мне примерами, расширив список статьи-первоистоника.
- Прим.: суть решения: при каждом вызове AJAX к URL’у страницы в качестве якоря добавляется текущий номер элемента в стеке «истории», фактически, просто увеличивающиеся числа. При нажатии кнопки «назад» в браузере, URL страницы меняется на предыдущий. Каждые 100 (200, 400, 1000) миллисекунд страница проверяет, не изменился ли у нее якорь в URL’е, если якорь изменился, то осуществляется подгрузка данных, соответствующих текущему якорю (=элементу в стеке «истории»).
Подход Mike Stenhouse’а. Демо-версия предельна проста и работает почти во всех браузерах. Демо-версия этого решения можно посмотреть по этой ссылке и проследить, что происходит с URL’ом страницы, когда вы кликаете по ссылкам. У меня постоянно вываливается сообщение об ошибке, но суть решения понять можно
Подход Brad Neuberg’а, эта библиотека пытается быть максимально кроссбраузерной без лишнего усложнения кода. Хорошо, что она доступна под BSD opensource лицензией. Brad опубликовал пошаговую инструкцию создания этой библиотеки, равно как и онлайн-демо.
Подход mikage’а с использованием библиотеки jQuery можно посмотреть здесь.
- Прим.: суть решения: вместо изменения URL’а самой страницы создается невидимый
iframeэлемент, в который загружается URL, у которого меняется якорь (в данном случае подход более гибкий, потому что позволяет задать часть параметров прямо после ‘#’, например, URL для AJAX-запроса или дополнительные параметры, но при этом не происходит изменение адреса головной страницы, т.е. для пользователя, фактически, ничего не меняется, но история посещений в броузере обновляется). На основе этой идеи создано несколько framework’ов.Plex — AJAX framework с открытым кодом, который поддерживает очень много возможностей, в том числе, и эмуляцию кнопки «назад» в браузере.
Dojo — еще один AJAX framework с открытым кодом, обеспечивающий некоторую AJAX функциональность и эмуляцию кнопки «назад» в браузере.
Обнаружил еще одну разновидность этого подхода в блоге Streampad, автор гарантирует работоспособность под Safari.
- Прим.: следующий метод очень мало отличается от предыдущего, однако, хочу выделить его в отдельный случай, потому что в нем вместо «native» AJAX методов используется просто отправка данных в скрытый
iframe, в таком случае никаких дополнительных действий применять не требуется, потому что история посещений в браузере будет загружать тот или иной URL в этотiframe, а он уже будет соответствующим образом обновлять головную страницу.Описание подхода и демо-версия.
- Существует также ряд других подходов, в частности, с использованием
document.save()илиdocument.body.onbeforeunload(), которые не являются кроссбраузерными.
Не могу также не упомянуть про неплохую обзорную статью Vladimira Kelmana, в которой обсуждаются часть вышеупомянутых решений.
Решение третье: обеспечьте пользователям удобную альтернативу кнопки «назад»
Традиционно, кнопка «назад» служила для реализации концепции: «Верните меня туда, откуда я пришел» Однако, при нажатии на нее многие пользователи, на самом деле, подразумевают «отмените то, что я только что сделал». Чтобы избавить их от сооблазна воспользоваться кнопкой «обратно» не по назначению, можно создать кнопки с функциями «Отменить» или «Шаг назад» в вашем веб-приложении, использующем AJAX. Например, если вы разрабатываете в Вебе расширенный текстовый редактор, создайте кнопку «Отменить», которая предотвратит потерю пользователями целого документа при неверном нажатии кнопки «назад» в браузере.
Однако, самим плохим решением из всех, которые я видел, является создание альтернативной кнопки «назад» в пределах самой веб-страницы, используя AJAX-методы. Многие пользователи с трудом смогли привыкнуть к границе между браузером и веб-страницей, смогли понять, где кончается браузер и начинается, собственно, сама страница. Нет никакой необходимости усиливать их неудобства. Ведь вы не можете гарантировать, что те пользователи, которые легко с этим справились, смогут привыкнуть еще к одной «инновации» и изменят свои привычки ради вашего сайта. Обеспечить пользователей альтернативной навигацией и функционалом будет вполне достаточно, но никак не создавать эту кнопку заново.
В заключении, если вы все же ограничиваете функционал стандартной истории в браузере при создании веб-приложения, пожалуйста, поставьте пользователей об этом в известность тем или иным способом. AJAX не является первым методом, который ограничивает этот функционал, и, скорее всего, пользователи впервые узнают об этом тоже не от вас. (Есть еще апплеты, Flash и eCommerce приложения, которые могут снять с кредитной карточки сумму еще раз, если нажать кнопку «назад» в браузере.) Вес ответственности, который вы, в конечном счете, возложите на пользователя за его действия на сайте, будет зависеть от вашей корпоративной культуры, но почему бы не сделать его чуточку легче?
Спасибо всем, что читал, читает и будет читать мои переводы и статьи. Заранее хочу поблагодарить всех тех, что укажет на фактические неточности или ошибки в статье, а может быть, даст ссылки на дополнительную информацию.
Web Optimizator: проверка скорости загрузки сайтов
habr.com
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
funer.ru
Учебник HTML 5. Статья «Тег кнопка»
HTML тег <button> используется для размещения кнопки. Внутри тега <button> вы можете разместить как отформатированный текст, так и изображение. Это основная разница между этим элементом и кнопками, созданными с использованием тега <input> (c атрибутом type = «button»).
Атрибут type тега задает тип, используемой кнопки:
| Значение | Описание |
|---|---|
| button | Обычная кликабельная кнопка, которая не имеет поведения по умолчанию. Может использоваться совместно с клиентскими скриптами. |
| reset | Кнопка, которая сбрасывает все значения элементов управления формы к их первоначальным значениям. |
| submit | Кнопка, которая служит для отправки данных формы на сервер. Это значение по умолчанию, если атрибут не указан, или если атрибут динамически меняется в пустое или недопустимое значение. |
Всегда указывайте для тега <button> тип атрибута type = «button» если элемент используется в качестве обычной кнопки. Если вы используете тег <button> внутри HTML формы, то вы можете столкнуться с тем, что старые версии браузеров могут представить различные значения при отправке формы. Рекомендуется в этом случае использовать элемент <input> для отправки HTML форм.
Давайте рассмотрим пример использования:
<!DOCTYPE html> <html> <head> <title>Тег <button></title> </head> <body> <button type = "button" name = "button1" style = "width: 80px; height:50px;"> <b>Кнопка 1</b> </button><br><br> <button type = "button" name = "button2" style = "width: 80px; height:50px"> <img src = "../../images/top2.png" alt = "up" width = "40" height = "40"> </button><br><br> <button type = "button" name = "button3" style = "width: 80px; height:50px;"> <i>Кнопка 3</i> </button><br><br> </body> </html>
В данном примере мы разместили 3 кнопки, которым задали уникальные имена атрибутом name и с использованием внутренних CSS стилей указали ширину (width) размером 80 пикселей и высоту (height) размером 50 пикселей:
- Текст внутри первой кнопки мы отформатировали жирным начертанием (тег <b>). Обратите внимание, что текст, который мы поместили внутри тега отображается на самой кнопке.
- Внутри второй кнопки элементом <img> мы разместили *.png изображение (с прозрачным задним фоном). Атрибутом alt мы задали альтернативный текст для изображения, для того случая если оно по каким-то причинам не будет загружено (обязательный атрибут), относительный путь к изображению мы задали атрибутом src (обязательный атрибут), атрибутами width (ширина) и height (высота) задали размеры изображения равными 40 на 40 пикселей. Обратите внимание, что в атрибутах, которые задают размер не требуется указывать единицы измерения в отличии от CSS стилей, по той причине, что атрибутами можно указать значение только в пикселях.
- Текст внутри третьей кнопки мы отформатировали курсивным начертанием (тег <i>).
Результат нашего примера:
Рис. 41 Пример использования тега <button> (кнопкa в HTML).Отключение кнопки
Атрибут disabled (HTML тега <button>) является логическим атрибутом и указывает, что кнопка должна быть отключена (недоступна для взаимодействия с пользователем). Атрибут используется совместно со скриптами, например, пока какое-то условие не выполнено элемент неактивен.
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута disabled HTML тега <button></title> </head> <body> <button type = "button">Элемент активен</button> <!-- элемент используется в качестве кнопки --> <button type = "button" disabled>Элемент отключен</button> <!-- кнопка отключена --> </body> </html>
В данном примере мы указали для второго элемента <button> с типом кнопка (type = «button») атрибут disabled, который отключает элемент и не дает нам кликнуть по кнопке.
Рис. 41а Пример отключения кнопки (предварительное отключение элемента).Автофокус на кнопке
В HTML 5 был добавлен такой логический атрибут как autofocus (HTML тега <button>) указывает, что кнопка должна автоматически получить фокус при загрузке страницы.
Обращаю Ваше внимание, что только один элемент в документе может иметь атрибут autofocus (браузер даст фокус тому элементу, который ближе расположен к началу документа, остальные просто будут игнорированы).
Давайте рассмотрим пример использования:
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута autofocus HTML тега <button></title> </head> <body> <form> <button name = "button" type = "button">Кнопка</button> <button name = "focusButton" type = "button"><b>Жми!!!</b></button> </form> </body> </html>
В данном примере мы создали две кнопки (HTML тег <button>), атрибутом name указали им уникальные имена. Для второй кнопки атрибутом autofocus задали, что при загрузке страницы она получит фокус (браузеры, как правило, подсвечивают этот элемент).
Результат нашего примера:
Рис. 41б Пример использования атрибута autofocus (фокус на кнопке).Браузер Internet Explorer поддерживает атрибут autofocus только с десятой версии.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два png изображения) в любую папку на вашем жестком диске:
- Используя полученные знания составьте следующую HTML страницу:
Практическое задание № 24.
Для выполнения задания Вам потребуются знания из статьи «HTML Цвета». Если вы пропустили её, то вернитесь для её изучения.
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.
basicweb.ru
HTML кнопка, как ссылка и ссылка, как кнопка
Всем привет!
В сегодняшней статье я расскажу о нескольких способах, как из кнопки сделать ссылку и из ссылки сделать кнопку. То есть, чтобы кнопка была рабочая и при нажатии по ней осуществлялись какие-то действия, например, переход на другую страницу, открытие формы обратной связи и т.д. А так же, как сделать так, чтобы ссылка была похожа на кнопку.
Итак, приступим.
Внимание:
В коде я указываю «ВАША_ССЫЛКА_НА_СТРАНИЦУ» или «https://bloggood.ru/». Естественно, вам нужно заменить эти адреса своими.
HTML кнопка как ссылка
1 способ:
В атрибут «action» поместите URL-адрес, на который должна вести «кнопка»:
<form action="ВАША_ССЫЛКА_НА_СТРАНИЦУ " method="GET"> <input ENGINE="submit" value="Кнопка" /> </form>
2 способ:
Также можно использовать HTML события:
<input value="Кнопка" type="button" />
3 способ:
Тоже взят из HTML события, только другим способом:
JS:
<script type="text/javascript">
function BlogGood()
{
location.href='https://bloggood.ru/';
}
</script>
HTML:
<input value="Кнопка" type="button" />
BlogGood() – это название функции вы можете назвать по своему.
HTML ссылка как кнопка
Теперь сделаем так, чтобы ссылка отображалась, как кнопка 
.
1 способ:
Самое простое решение – это нарисовать кнопку и обхватить ее тегами ссылки <a>:
<a href=" ВАША_ССЫЛКА_НА_СТРАНИЦУ "><img src="knopka.jpeg"></a>
2 способ:
Можно использовать особое правило в CSS «-moz-appearance и -webkit-appearance» со значением «button» :
CSS:
a
{
-moz-appearance: button; /* Firefox */
-webkit-appearance: button; /* Chromium */
padding: .2em .75em;
text-decoration: none;
}
HTML:
<a href="https://bloggood.ru">ССЫЛКА на BLOGGOOD.RU</a>
3 способ:
Вы можете в CSS прописать свои стили для кнопки.
Выглядеть это будет вот так:
CSS:
.ssilka {
border:1px solid #ccc; // рамка
background:#eaeaea; //фон
padding: .2em .75em; //отступы внутри
text-decoration: none; //убрать подчеркивание ссылки
}
HTML:
<a href="https://bloggood.ru">ССЫЛКА на BLOGGOOD.RU</a>
Вроде, ничего не пропустил и ничего не напутал.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: css, html, javascript, Вебмастеру, для сайта
bloggood.ru