Бутон за връщане назад в изходния код. Създайте бутон „връщане назад“.

В тази статия ще разгледаме как можете да създадете бутон „Назад“ на всяко място, от което се нуждаете. Мисля, че от името на бутона вече е ясно какво ще се случи, когато щракнете върху него. Такъв бутон може да се вмъкне както в категория, така и в самия материал. Всичко се прави съвсем просто.

Има няколко опции за това как можете да добавите бутон, но аз лично използвах само един начин. А именно третият вариант от трите, които предложих. Малко по-нататък ще ви кажа защо.

Какви опции имаме:

Редактиране на файлове с шаблони на Jooml.

Просто поставете кода на бутона на правилното място.

Създайте модул „HTML код“, вмъкнете там кода на бутона и след това покажете този модул на правилното място.

Предимството на третия вариант е, че ако трябва да редактирате текста на бутон или да промените/добавите стилов клас, ще трябва да коригирате само самия модул, а не бутона на всички места, където се намира.

И така, на един от моите сайтове използвах третата опция:

Създаден е модулът „HTML код“ и кодът на бутона е вмъкнат там с помощта на разширението „Sourcerer“, което прави възможно добавянето на произволен код към материала.

Моят работен код на бутона:

Върни се

Текстът е леко украсен със стрелка с помощта на компоненти от Bootstrap 3, а самият бутон е стилизиран чрез CSS.

В този видео урок ще разгледаме 3 варианта как да направите бутон НАЗАД, за да се придвижвате из сайта към предишни страници в обратен ред. Бутонът НАЗАД е необходим и когато линкове от няколко страници на сайта (A1, A2...An) водят към една и съща страница (B), а от тази страница (B) трябва да се върнете на предишната страница (An) на сайта, от който сте стигнали до страница (B).

Гледайте новия видео урок:

Код на бутона “връщане назад” за поставяне в сайта:

< a href = "#" onclick = > < img src = "assets/back2.png" alt = "обратно" / > < / a >

Бутон за връщане назад. За какво е?

В този видео урок ще направим бутон за връщане към предишни страници на сайта Adobe програмаМуза. Този бутон ще се върне по същия път, който следвахме на сайта.

Бутон за връщане назад. Проект на урока.

За да направя този урок, подготвих малък проект, или по-скоро не може да се нарече малък, тук той се състои от страници от най-високо ниво, страници от първо ниво, а също и за страницата „страница-2“ има още няколко деца страници. И за разнообразие създадох два шаблона. Приложих първия шаблон към първите три страници. И приложих втория шаблон към всички останали.

Да започваме. Ще създадем бутон Назад в „Шаблон C“, така че да се появи незабавно на онези страници, към които се прилага този шаблон. Отивам да редактирам този шаблон и тук ще вмъкнем нашия бутон за връщане назад.

Бутон за връщане назад. 3 начина.

Можем да вмъкнем бутон „Назад“ по три начина. Имам специален файл, който вече съм подготвил в Notepad. И има три начина, три кода, чрез които можем да вкараме такъв бутон в сайта.

Бутон за връщане назад. Метод No1 – прост текст.

Първият вариант е само текст. Бутонът ще бъде под формата на текст. Копирам този код:

< input type = "button" onclick = "history.back();" value = "обратно" / >

И го поставям в шаблона. Изглежда така. Имаме само текст и той е маркиран в бяло. Ще го публикувам тук. За да разберем как работи всичко това, натискаме клавишите ctrl+alt+E, за да видим целия сайт с всичките му страници в браузъра. Ето как изглежда главната страница на сайта. Можем да сърфираме в менюто, да избираме страници. Тук имаме падащи менюта. И например от главната страница веднага отидохме на страница „страница-3“. И тук имаме бутон за връщане назад.

Този бутон е активен, но когато задържите мишката върху него, не се появява ръка с пръст. Можем безопасно да щракнем върху този бутон и ще бъдем пренасочени обратно към главната страница. По същия начин можем да щракнем върху страница „страница-3“, след това да отидем на страница „страница-4“ и да щракнете върху бутона „Назад“, това ще ни отведе до страница „страница-3“ и ако щракнем отново върху бутона „Назад“, след което ни отвежда до главната страница. Ето как работи бутонът за връщане назад.

Но е трудно този бутон да се нарече бутон, тъй като това е просто такъв надпис, подчертан в бяло. Ако искаме да го редактираме в Muse, можем да променим само размера на текста, например ще сложа "36" тук, за да можете да го видите по-добре. Според мен не можем да променим цвета на текста. Сега ще пробвам да сложа червено. Избрах червено, но това не се отрази по никакъв начин на надписа ни, така че не можем да променим цвета. Можем да променим размера. Нека се опитаме да го направим получер и да го центрираме. Всичко, което можем да направим, е да редактираме по този начин. Ако искаме да запълним този блок, например, да го направим оранжев, тогава текстът ни пак ще бъде маркиран в бяло и по принцип не изглежда много добре.

Бутон за връщане назад. Метод № 2 – Текст на връзката.

< a href = "#" onclick = "history.back();return false;" >обратно< / a >

Сега ще го копираме. Натискам ctrl+C и отивам на програмата, и натискам ctrl+V, за да го поставя в сайта. Изглежда като тази връзка. Нашата връзка е синя. Сега тя не се вижда много. Нека направим и 36-ти шрифт, за да го увеличим и да го видим по-отблизо. Тук имаме само синя връзка. Ако сега натиснете ctrl+alt+E, ще видим, че когато се гледа, изглежда като тази обикновена синя връзка. Нека го прегледаме още няколко пъти, за да видим, щракнете веднъж, два пъти, върнете се. Тази връзка има същия вид като обикновената връзка.

Можем да приложим стилове на връзки към него в Adobe Muse. Намерете стилове на връзки в секцията „Хипервръзки“, изберете „Редактиране на стилове на връзки“. Вече имам готов вариант. Сега вече имам готов вариант. Можете да видите, че има приложен стил. В стандартно състояние и при задържане на курсора на мишката цветът е син, а в активно състояние - червен. Видяхте го, докато гледахте. Вторият стил, който създадох, беше просто всички черни щати. Можем да приложим този стил към този бутон. Например ще избера и ще приложа този персонализиран стил към този бутон. И ще видите, че нашият надпис е почернял.

Тук също можем да направим запълване, например ще го направя със същия оранжев цвят. Тук вече можете да редактирате текста. Нека го поставим в средата и да го удебелим. И по принцип тази опция вече е по-подобна на бутон. Вече няма такъв бял акцент и по принцип тази опция вече е доста подходяща. Докато разглеждате (ctrl+alt+E), нека отидем на страница "page-3", на страница "page-4" и щракнете отново. Този бутон работи точно както първия, само че има повече опции за редактиране на дизайна.

Бутон за връщане назад. Метод No3 – бутон – картинка.

И третият вариант за това как можем да поставим бутон е, че бутонът ще бъде изображение. Копирам този код:

< a href = "#" onclick = "history.back();return false;" > < img src = "img.png" alt = "Снимка" / > < / a >

Отивам в Muse и щраквам върху „Вмъкване“. И този трети вариант, който имаме, е картина. За да имаме някаква снимка тук, трябва да изтеглим някакъв картинен файл от интернет или да го създадем сами. Добавяме снимката чрез функцията „Файл“ на програмата, изберете „Добавяне на файлове за прехвърляне“. Вече изтеглих няколко снимки от интернет. Можем да изберем един. Нека изберем този с бутона за връщане назад. Сега, ако погледнем в секцията „Ресурси“, добавихме бутон „back2.png“ - „Предаване“. Имаме този файл за прехвърляне.< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "обратно" / > < / a >

Това е всичко, щракнете върху "OK". Няма да видим никакви промени в самия Muse. Ще видим всички промени само когато разглеждаме сайта в браузър. Нека отново натиснете ctrl+alt+E, за да видите сайта в браузъра и да се опитаме да сърфираме в нашите страници.

Бутон за връщане назад. Вижте резултата.

Да отидем на страницата, например "страница 2-1", сега да отидем на страница "страница-2", сега да отидем на страница "страница 3", след това на страница "страница-4". И сега, ако натиснете бутона за връщане назад, ще се върнем последователно в обратен ред към начална страницасайт. Щракнете върху „Назад“, преминете към страница „страница-3“, към страница „страница-2“. И тук вече нямаме бутон. Ако го поставим в шаблон, който е приложен към страница „страница-2“, тогава ще имаме и бутон „Назад“ тук. Тъй като нямаме такъв, трябва да навигираме до главната страница само като щракнем върху бутона "Начало" в менюто. Да отидем например на страница „страница 2-2-2“, след това на страница „страница 2-2-1“, след това на страници „страница-3“ и „страница-4“. А сега в обратен ред: страница „страница-3“, страница „страница 2-2-1“, страница „страница 2-2-2“ и към главната страница.

Разбира се, не е нужно да поставяте този бутон на уебсайта си, но използвайте обикновени стрелки в браузъра си. Но ако искате такъв бутон да има на вашия сайт, тогава можете да го направите по тези начини... А връзката към статията ще бъде под това видео. Това е всичко. Дмитрий Шаповалов беше с вас. Харесайте това видео, абонирайте се за канала, пишете коментари по-долу и аз ви казвам сбогом до следващите видео уроци.

Понякога на уеб страниците има нужда временно да отидете на друга (да я наречем спомагателна) страница и след това да се върнете обратно и да продължите да работите с нея. Например, това може да е помощна страница, страница за регистрация.

В този случай, очевидно, обратният адрес може да бъде много различен. Как да реализирате такъв обратен преход на уебсайт? Чистият html/CSS не е достатъчен тук; ще трябва да използвате javascript.

Най-простото нещо е например да използвате този ред в скрипта на спомагателната страница:

Методът на историята запомня историята на навигацията на дадена страница и всъщност използването му е подобно на използването на бутоните Напред и Назад на браузъра, само че е малко по-функционално. Това е най-простият и удобен начин, но само при едно условие: ако новата (спомагателна) страница не се отваря в нов прозорец. В противен случай помощната страница ще бъде отворена за първи път (по-точно това ще бъде първата сесия за нея, все още не е имало преходи по нея). А това означава, че всъщност няма къде да се върне назад. Следователно този метод не може да се нарече универсален. Няма да работи, ако потребителят е принуден да отвори страницата в нов раздел или браузърът го прави вместо него - в съответствие с настройките. В този случай атрибутът на връзката target=”_self” няма да помогне: ще бъде невъзможно да се върнете от отворена спомагателна страница (освен ако, разбира се, не въведете URL адреса на изходната страница ръчно в адресната лента на браузъра).

По-универсален начин

За да го приложите, ще ви трябват скриптове както на изходната, така и на спомагателната страница. Идеята може да варира. Един от тях се основава на факта, че адресът (URL) на изходната страница се съхранява в адресната лента на браузъра като GET заявка. По този начин. Помощната страница, когато получи такава заявка, знае за нейния източник. Въз основа на това става възможно превключването обратно, т.е. към страницата, от която е направен преходът.

Схематично това може да се представи по следния начин:

Сценарият е включен оригинална страница

На страницата КОЙ трябва да се направи прехода има следния скрипт, представляващ функция - манипулатор на щракване на мишката (onclick):

функция save_back(url) (

var docum_href = document.location.toString().substring(docum_protocol.length+2);
if(docum_href.substring(0,1) == "/") (
docum_href = docum_href.substring(1);
}
var href = window.location.protocol+"//"+document.location.hostname + url + "?"+docum_href;
window.open(href);
}

За да работи функцията в скрипта, трябва да инсталирате нейния манипулатор на някакъв елемент по един от начините, например по този начин:

Кликнете, за да отидете на страницата за поддръжка

Обърнете внимание, че атрибутът href на тази връзка има съответен адрес, който е посочен във функцията за обработка на събития onclick. Това се прави, така че роботите за търсене да разберат към коя страница ще отиде връзката, когато щракнете върху връзката. Ако това не е необходимо, тогава трябва да направите празен атрибут href, като

Принципът на този скрипт е, че когато се извика функцията save_back(url), се отваря (спомагателна) страница с url адреса. За да направите това, се определя протоколът на страницата (например http или https), както и останалата част от URL адреса на оригиналната уеб страница, включително евентуално всички GET данни за заявка (това е, което е в URL адреса след "?" знак). Получените данни се добавят към URL адреса на отваряната страница - и се осъществява преход към нея.

Скрипт на помощната страница

Трябва да има скрипт като този:

var docum_protocol = document.location.protocol;
var number_questions =docum_location.length-1;

var question = "";
if(брой_въпроси > 1)(
въпрос = "?";
}
document.location = docum_protocol+"//"+ docum_href + въпрос + get;
}

Този скрипт също ще се стартира, когато мишката щракне върху всеки елемент, на който е инсталиран съответният манипулатор:

Връщане

Този ред отменя действието по подразбиране, когато мишката щракне върху връзка. Факт е, че по подразбиране връзката се следва. В този случай преходът ще се извърши точно до адреса, посочен в атрибута href. Този адрес (по-специално на спомагателна страница) може да не съдържа обратния адрес на страницата, от която е направен преходът (ако преходът към спомагателната страница е възможен не от една конкретна страница, а от няколко изходни страници).

И така, скриптът на помощната страница чете съдържанието на адресната лента и след това го разделя на масив от елементи "?". Моля, обърнете внимание, че един URL може да съдържа два такива знака. Първият ще се появи, както вече беше споменато, поради факта, че адресът (без протокола) на изходната страница е добавен към адреса на спомагателната страница. А вторият може да присъства в резултат на наличието на параметри на GET заявка при зареждане на изходната страница. С други думи, може да има един или два въпросителни знака в адресната лента на страницата за помощ. За да преминете от вторична страница към оригиналната страница, когато щракнете върху връзка

Връщане

Заявката се чете от адресната лента и се преобразува в същата форма, която е имала на оригиналната страница, след което страницата се зарежда на този адрес.

Бележки

Освен това трябва да се отбележи, че статията всъщност не е за връщане към оригиналната страница, а за нейното презареждане. Това, разбира се, е само имитация на връщане. По-специално, въведените на тази страница данни и нейните настройки може да не бъдат запазени. Освен това, за разлика от RETURN, когато страницата се зареди, тя ще бъде отворена от самото начало на сайта (т.е. горната му част ще бъде разположена в горната част на екрана). Докато „истинският“ обратен път връща (оригиналната) страница на точното място, от което е направен скокът. Затова нека се опитаме да комбинираме и двата метода.

Комбиниран метод

И така, нека поставим задачата:

ако спомагателната страница се отваря в същия раздел (прозорец), тогава нека методът history.back() е наличен;

но ако спомагателната страница се отвори в нов прозорец, тогава методът, обсъден по-горе, трябва да работи (защото в този случай history.back() няма да работи).

Скриптът на спомагателната страница ще се промени леко (ще бъде добавен редът, споменат по-горе):

функция return_to_initial_page() (
history.back();
var docum_location = document.location.toString().split("?");
var docum_href = местоположение_документ;
var docum_protocol = document.location.protocol;
var number_questions =docum_location.length - 1;
var get = местоположение_документ;
var question = "";
ако (брой_въпроси > 1) (
въпрос = "?";
}
document.location = docum_protocol + "//" + docum_href + въпрос + get;
}

Първо се опитваме да се върнем. Ако работи, останалата част от скрипта няма да работи и ще се върнете към оригиналната страница на същото място, откъдето е направен преходът. Ако не, тогава, както преди, извличаме адреса на изходната страница от параметрите на GET заявката и отиваме към нея.

Заключение

Разбира се, тази статия показва само една от технологичните опции за „връщане“ НАЗАД - към оригиналната страница. За тази цел, в допълнение към GET заявката, могат да се използват и други технологии, например локално хранилище localStorage. Освен това, за да се симулира напълно връщане НАЗАД, би било хубаво да се предаде количеството на превъртане на оригиналната страница чрез GET заявка - така че по-късно, дори когато отваряте спомагателната страница в нов прозорец, да можете да се върнете на същото място на оригиналната страница, откъдето преди това е направен преходът.

Много изследвания на използваемостта показват, че потребителите (както нови, така и опитни) често използват бутона „връщане назад“ в браузъра. За съжаление дизайнерите и маркетолозите от предния край рядко обмислят какви последици може да има това за използваемостта, като се имат предвид съвременните модели на уеб дизайн, които използват приложения, анимация, видео и др. Често техническата структура на тези оформления не реагира правилно на функцията „връщане назад“, нарушавайки менталния модел на потребителя и влошавайки преживяването му.

Последствията от това могат да бъдат ужасни: по време на експерименти неадекватната реакция на сайта при натискане на бутона „назад“ беше причината много потребители да напуснат, с обиди и нелицеприятни отзиви. В повечето случаи дори почтените, сивокоси поданици изпускаха ужасно нервите си.

От тази статия ще научите:

• какво очакват потребителите от бутона „връщане назад“;
• кои са 5-те най-чести грешки;
• просто решение на тези проблеми.

Решението наистина е много просто, но често се пренебрегва дори от най-големите марки. Да поправим ли тази грешка?

Очаквания на потребителите

Накратко: Потребителите очакват бутон „връщане назад“, за да им покаже какво възприемат като предишната страница. Думата „възприемане“ е много важна, защото има огромна разлика между това, което изглежда като предишната страница и това, което е технически.

Възниква въпросът какво точно тълкуват потребителите като нова страница? В повечето случаи, ако една страница е значително различна визуално, но концептуално е свързана със сайта, тогава тя се възприема като нова. Ето защо е много важно да наблюдавате как сайтът обработва различни интерактивни елементи: лайтбоксове, форми, филтри и др.

Повечето посетители не разбират технически аспекти, а разчитат само на интуитивни идеи за това как трябва да работи ресурсът. Следователно, когато щракнат върху бутона „назад“, те очакват страница, на която вече са имали важен опит, но получават страница с леко променен интерфейс.

По-долу са най-популярните интерактивни елементи и препоръки за използването им, за да увеличите максимално потребителското изживяване и използваемост.

Целта на внедряването на наслагвания и лайтбоксове е да се покаже на потребителя елемент, който се появява в горната част на страницата. Следователно потребителите възприемат такива елементи като нови страници и натискат бутона „назад“, за да се върнат в първоначалната си позиция - но те се озовават на съвсем различно място, отколкото са очаквали. Това е особено жалко, тъй като използването на лайтбоксове само умножава негативното възприемане на уеб страницата - повечето потребители не харесват тези елементи в сайтовете за онлайн пазаруване.

Използването на филтри често трансформира страница и дава на човек ново изживяване. Следователно, след сортиране, страницата се възприема като нова, дори ако нищо не е заредено на нея. Това се случва, защото след всяко взаимодействие на посетител със страницата на онлайн магазина се генерира нов резултат.

Този пример подчертава, че хората не навлизат в технически аспекти, когато определят нова страница, но използвайте само интуиция и формирано възприятие.

3. Форма за регистрация/плащане

Страниците за плащане се възприемат като нови страници и дори по-лошо - като многоетапен процес, всеки етап от който може да бъде отменен с бутон „връщане назад“.

Този подход може да създаде проблеми; прост пример е, че човек иска да се върне стъпка назад при попълване на формуляр, за да редактира въведената информация. Натискането на бутона „назад“ го връща в кошницата и изтрива всички (!) въведени данни. Дразненето и напускането на мястото е естествен ефект.

Технологията AJAX може да не отговаря на очакванията на потребителите: Всяка AJAX страница е технически под един и същ URL адрес, но изглежда, че се отварят нови страници.

В контекста е-търговияПотребителите имат ясно усещане, че страница 3 и страница 4 са отделни и могат да се навигират от страница 4 до страница 3 с помощта на бутона за връщане назад.

Потребителите не са готови да се откажат от бутона за връщане назад

Като се има предвид колко широко използвана е тази функция на интернет браузъра, проблемът с несъответствието между очакванията на потребителите и визията на разработчиците става критичен и не трябва да се приема с лека ръка.

Потребителите особено харесаха бутона „връщане назад“. мобилни приложенияи уебсайтове. Както показа проучването мобилни версиисайтове, по-голямата част от потребителите са използвали тази функция на всички предлагани ресурси. Освен това използването на бутона не се ограничава до връщане на една страница назад - някои субекти го натискаха до 15 (!) пъти подред.

Потребителите на компютри също често натискат бутона - но не толкова, колкото собствениците на мобилни телефони, защото потребителите настолни компютриНалична е удобна навигация на сайта.

Решение

Добрата новина е, че HTML5 има сравнително просто решение на проблема и то се нарича HTML5 History API. По-конкретно, функцията history.pushState() ви позволява да промените URL адреса, без да презареждате страницата. Съответно, сайтът ще се държи в съответствие с очакванията на потребителя, който е натиснал бутона „връщане назад“.