Tlačítko Zpět ve zdrojovém kódu. Vytvořte tlačítko „vrátit se zpět“.

V tomto článku se podíváme na to, jak můžete vytvořit tlačítko „Zpět“ na libovolném místě, které potřebujete. Myslím, že už z názvu tlačítka je jasné, co se stane, když na něj kliknete. Takové tlačítko lze vložit jak do kategorie, tak do samotného materiálu. Vše se dělá úplně jednoduše.

Existuje několik možností, jak přidat tlačítko, ale já osobně jsem použil pouze jeden způsob. Konkrétně třetí možnost ze tří, které jsem navrhl. O něco dále vám řeknu proč.

Jaké máme možnosti:

Upravte soubory šablon Jooml.

Stačí vložit kód tlačítka na správné místo.

Vytvořte modul „HTML kód“, vložte tam kód tlačítka a poté tento modul zobrazte na správném místě.

Výhodou třetí možnosti je, že pokud potřebujete upravit text na tlačítku nebo změnit/přidat třídu stylu, budete muset opravit pouze samotný modul a ne opravit tlačítko na všech místech, kde se nachází.

Na jednom z mých webů jsem tedy použil třetí možnost:

Byl vytvořen modul „HTML code“ a tam byl vložen kód tlačítka pomocí rozšíření „Sourcerer“, které umožňuje přidat do materiálu libovolný kód.

Můj kód pracovního tlačítka:

vrať se

Text je mírně ozdoben šipkou pomocí komponent z Bootstrap 3 a samotné tlačítko je stylizováno pomocí CSS.

V tomto výukovém videu se podíváme na 3 možnosti, jak vytvořit tlačítko ZPĚT pro pohyb po webu na předchozí stránky v opačném pořadí. Tlačítko ZPĚT je také nutné, když odkazy z několika stránek webu (A1, A2...An) vedou na stejnou stránku (B) a z této stránky (B) se musíte vrátit na předchozí stránku (An) webu, ze kterého jste se dostali na stránku (B).

Podívejte se na nový video tutoriál:

Kód pro tlačítko „vrátit se“ pro umístění na webu:

< a href = "#" onclick = > < img src = "assets/back2.png" alt = "Zadní" / > < / a >

Tlačítko Zpět. K čemu to je?

V tomto výukovém videu vytvoříme tlačítko pro návrat zpět na předchozí stránky webu program Adobe Múza. Toto tlačítko se vrátí po stejné cestě, kterou jsme šli na webu.

Tlačítko Zpět. Projekt lekce.

Aby bylo možné tuto lekci provést, připravil jsem malý projekt, nebo spíše jej nelze nazvat malým, zde se skládá ze stránek nejvyšší úrovně, stránek první úrovně a také pro stránku „stránka-2“ existuje několik dalších dětí stránky. A pro zpestření jsem vytvořil dvě šablony. První šablonu jsem aplikoval na první tři stránky. A druhou šablonu jsem aplikoval na všechny ostatní.

Začněme. V „Šabloně C“ vytvoříme tlačítko Zpět, aby se okamžitě objevilo na těch stránkách, na které je tato šablona aplikována. Jdu upravit tuto šablonu a sem vložíme naše tlačítko Zpět.

Tlačítko Zpět. 3 způsoby.

Tlačítko „Zpět“ můžeme vložit třemi způsoby. Mám speciální soubor, který už mám připravený v poznámkovém bloku. A jsou tři způsoby, tři kódy, pomocí kterých můžeme takové tlačítko na web vložit.

Tlačítko Zpět. Metoda č. 1 - jednoduchý text.

První možností je pouze text. Tlačítko bude ve formě textu. Kopíruji tento kód:

< input type = "button" onclick = "history.back();" value = "Zadní" / >

A vložím to do šablony. Vypadá to takto. Máme jen text a ten je zvýrazněn bíle. zveřejním to zde. Abychom pochopili, jak to všechno funguje, stiskneme klávesy ctrl+alt+E a zobrazíme v prohlížeči celý web se všemi jeho stránkami. Takto vypadá hlavní stránka webu. Můžeme surfovat v nabídce, vybírat stránky. Zde máme rozbalovací nabídky. A například z hlavní stránky jsme okamžitě přešli na stránku „strana-3“. A tady máme tlačítko zpět.

Toto tlačítko je aktivní, ale když na něj najedete myší, ruka s prstem se nezobrazí. Na toto tlačítko můžeme bezpečně kliknout a budeme přesměrováni zpět na hlavní stránku. Stejným způsobem můžeme kliknout na stránku „strana-3“, poté přejít na stránku „strana-4“ a kliknout na tlačítko „Zpět“, dostaneme se na stránku „strana-3“ a pokud klikneme znovu na tlačítko „Zpět“, poté se dostaneme na hlavní stránku. Takto funguje tlačítko zpět.

Je však obtížné nazvat toto tlačítko tlačítkem, protože je to jen takový nápis, zvýrazněný bíle. Pokud to chceme upravit v Muse, můžeme změnit pouze velikost textu, například sem dám "36", abyste to lépe viděli. Barvu textu dle mého názoru změnit nemůžeme. Teď zkusím dát červenou. Vybral jsem červenou, ale to nijak neovlivnilo naše písmo, takže barvu změnit nemůžeme. Můžeme změnit velikost. Zkusme to udělat tučně a vycentrovat. Jediné, co můžeme udělat, je takto upravit. Pokud chceme tento blok vyplnit například oranžově, bude náš text stále zvýrazněn bíle a v zásadě to nevypadá moc hezky.

Tlačítko Zpět. Metoda č. 2 – Text odkazu.

< a href = "#" onclick = "history.back();return false;" >Zadní< / a >

Nyní to zkopírujeme. Stisknu ctrl+C a přejdu do programu a stisknutím ctrl+V jej vložím na web. Vypadá to jako tento odkaz. Náš odkaz je modrý. Teď už není moc vidět. Udělejme také 36. písmo, abychom jej zvětšili a viděli blíže. Zde máme pouze modrý odkaz. Pokud nyní stiskneme ctrl+alt+E, uvidíme, že při prohlížení to vypadá jako tento běžný modrý odkaz. Pojďme si to ještě párkrát projít, abychom viděli, klikni jednou, dvakrát, vrať se. Tento odkaz má stejný vzhled jako běžný odkaz.

Můžeme na něj aplikovat styly odkazů v aplikaci Adobe Muse. Najděte styly odkazů v sekci „Hypertextové odkazy“, vyberte „Upravit styly odkazů“. Už mám připravenou verzi. Teď už mám připravenou verzi. Můžete vidět, že na to byl použit styl. Ve standardním stavu a při najetí kurzorem myši je barva modrá a v aktivním stavu - červená. Viděl jsi to při sledování. Druhý styl, který jsem vytvořil, byly prostě všechny černé státy. Tento styl můžeme aplikovat na toto tlačítko. Například vyberu a použiji tento vlastní styl na toto tlačítko. A uvidíte, že náš nápis zčernal.

Zde můžeme udělat i výplň, např. já to udělám stejnou oranžovou barvou. Zde již můžete text upravovat. Dáme to doprostřed a uděláme to tučně. A v zásadě je tato možnost již více podobná tlačítku. Už neexistuje takové bílé zvýraznění a v zásadě je tato možnost již docela vhodná. Při procházení (ctrl+alt+E) přejdeme na stránku „strana-3“, na stránku „strana-4“ a znovu klikneme. Toto tlačítko funguje úplně stejně jako to první, jen má více možností pro úpravu designu.

Tlačítko Zpět. Metoda č. 3 – tlačítko – obrázek.

A třetí možností, jak můžeme tlačítko umístit, je, že tlačítko bude obrázek. Kopíruji tento kód:

< a href = "#" onclick = "history.back();return false;" > < img src = "img.png" alt = "Obrázek" / > < / a >

Přejdu do Muse a kliknu na „Vložit“. A tato třetí možnost, kterou máme, je obrázek. Abychom zde mohli mít nějaký obrázek, musíme si stáhnout nějaký obrázkový soubor z internetu nebo si jej sami vytvořit. Obrázek přidáme pomocí funkce „Soubor“ programu, vyberte „Přidat soubory pro přenos“. Už jsem si stáhl pár obrázků z internetu. Můžeme si vybrat jednu. Vyberme tento tlačítkem zpět. Nyní, když se podíváme do sekce „Zdroje“, přidali jsme tlačítko „back2.png“ - „Předat“. Tento soubor máme k přenosu.< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "Zadní" / > < / a >

To je vše, klikněte na "OK". V samotném Muse se žádných změn nedočkáme. Všechny změny uvidíme až při prohlížení webu v prohlížeči. Znovu stiskneme ctrl+alt+E pro zobrazení stránky v prohlížeči a pokusíme se procházet naše stránky.

Tlačítko Zpět. Podívejte se na výsledek.

Pojďme na stránku, například "strana 2-1", nyní přejděte na stránku "strana-2", nyní přejděte na stránku "strana 3", poté na stránku "strana-4". A nyní, když stiskneme tlačítko Zpět, vrátíme se postupně zpět v opačném pořadí domovská stránka místo. Klikněte na „Zpět“, přejděte na stránku „strana-3“ a na stránku „strana-2“. A tady už nemáme tlačítko. Pokud bychom jej umístili do šablony, která byla aplikována na stránku „stránka-2“, pak bychom zde měli také tlačítko „Zpět“. Protože žádný nemáme, musíme se na hlavní stránku dostat pouze kliknutím na tlačítko "Domů" v menu. Pojďme například na stránku „strana 2-2-2“, poté přejděte na stránku „strana 2-2-1“, poté na strany „strana-3“ a „strana-4“. A nyní v opačném pořadí: strana „strana-3“, strana „2-2-1“, strana „2-2-2“ a na hlavní stranu.

Toto tlačítko samozřejmě nemusíte umisťovat na svůj web, ale použijte běžné šipky v prohlížeči. Pokud ale chcete, aby takové tlačítko na vašem webu bylo, tak si ho můžete vyrobit těmito způsoby... A odkaz na článek bude pod tímto videem. To je vše. Dmitrij Shapovalov byl s vámi. Dejte like tomuto videu, odebírejte kanál, napište komentáře níže a já se s vámi loučím do dalších videolekcí.

Někdy je na webových stránkách potřeba dočasně přejít na nějakou jinou (říkejme tomu pomocnou) stránku a pak se vrátit zpět a pokračovat v práci. Může to být například stránka nápovědy, registrační stránka.

V tomto případě může být zpáteční adresa samozřejmě velmi odlišná. Jak takový zpětný přechod implementovat na web? Čisté html/CSS zde nestačí, budete muset použít javascript.

Nejjednodušší je například použít tento řádek ve skriptu na pomocné stránce:

Metoda historie si pamatuje historii navigace na stránce a ve skutečnosti je její použití podobné jako použití tlačítek vpřed a Zpět v prohlížeči, jen o něco málo funkčnější. Toto je nejjednodušší a nejpohodlnější způsob, ale pouze za jedné podmínky: pokud se nová (pomocná) stránka neotevře v novém okně. V opačném případě se pomocná stránka otevře poprvé (přesněji to bude pro ni první sezení, ještě na ní nebyly žádné přechody). A to znamená, že ve skutečnosti není kam se vrátit. Tuto metodu proto nelze nazvat univerzální. Nebude fungovat, pokud je uživatel nucen otevřít stránku na nové kartě nebo to za něj udělá prohlížeč - v souladu s nastavením. V tomto případě nepomůže atribut odkazu target=”_self”: nebude možné se vrátit z otevřené pomocné stránky (pokud samozřejmě nezadáte URL zdrojové stránky ručně do adresního řádku prohlížeče).

Univerzálnější způsob

K jeho implementaci budete potřebovat skripty na zdrojové i pomocné stránce. Představa se může lišit. Jedna z nich je založena na tom, že adresa (URL) zdrojové stránky je uložena v adresním řádku prohlížeče jako požadavek GET. Tím. Pomocná stránka při přijetí takového požadavku ví o jeho zdroji. Na základě toho je možné přepnout zpět, tzn. na stránku, ze které byl přechod proveden.

Schematicky to lze znázornit takto:

Zapněte skript původní stránka

Na stránce KTERÉ by měl být přechod proveden je následující skript, což je funkce - obsluha kliknutí myší (onclick):

funkce 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);
}

Aby funkce ve skriptu fungovala, musíte nainstalovat její handler na nějaký prvek jedním ze způsobů, například takto:

Kliknutím přejdete na stránku podpory

Všimněte si, že atribut href tohoto odkazu má odpovídající adresu, která je určena ve funkci obsluhy události onclick. To se provádí tak, aby vyhledávací roboti pochopili, na kterou stránku odkaz po kliknutí na odkaz přejde. Pokud to není potřeba, měli byste vytvořit prázdný atribut href, např

Princip tohoto skriptu spočívá v tom, že při volání funkce save_back(url) se otevře (pomocná) stránka s url adresou. K tomu je určen protokol stránky (například http nebo https) a také zbytek URL původní webové stránky, včetně případných dat požadavku GET (to je to, co je v URL za "?" podepsat). Přijatá data se přidají k URL otevírané stránky – a dojde k přechodu na ni.

Skript na stránce nápovědy

Měl by mít takový skript:

var docum_protocol = document.location.protocol;
var číselné_otázky = umístění_dokumentu.délka-1;

var dotaz = "";
if(počet_otázek > 1)(
otázka = "?";
}
document.location = docum_protocol+"//"+ docum_href + dotaz + get;
}

Tento skript se také spustí, když klepnete myší na libovolný prvek, na kterém je nainstalován odpovídající handler:

Vrátit se

Tento řádek zruší výchozí akci při kliknutí myší na odkaz. Faktem je, že ve výchozím nastavení je odkaz následován. V tomto případě dojde k přechodu přesně na adresu uvedenou v atributu href. Tato adresa (zejména na pomocné stránce) nesmí obsahovat zpáteční adresu stránky, ze které byl přechod proveden (pokud je přechod na pomocnou stránku možný nikoli z jedné konkrétní stránky, ale z několika zdrojových stránek).

Skript na stránce pomocníka tedy přečte obsah adresního řádku a poté jej rozdělí na pole prvků „?“. Upozorňujeme, že adresa URL může obsahovat dva takové znaky. První se objeví, jak již bylo zmíněno, díky tomu, že k adrese pomocné stránky byla přidána adresa (minus protokol) zdrojové stránky. A druhý může být přítomen v důsledku přítomnosti parametrů požadavku GET při načítání zdrojové stránky. Jinými slovy, v adresním řádku stránky nápovědy může být jeden nebo dva otazníky. Přechod ze sekundární stránky na původní stránku po kliknutí na odkaz

Vrátit se

Požadavek je přečten z adresního řádku a převeden do stejného tvaru, jaký měl na původní stránce, poté se stránka načte na tuto adresu.

Poznámky

Navíc je třeba poznamenat, že článek ve skutečnosti není o návratu na původní stránku, ale o jejím opětovném načtení. To je samozřejmě jen imitace návratu. Zejména nemusí být uložena data zadaná na této stránce a její nastavení. Na rozdíl od RETURN se navíc stránka při načtení otevře od samého začátku webu (tj. její horní část bude umístěna v horní části obrazovky). Zatímco „skutečný“ backtrack vrátí (původní) stránku na přesné místo, odkud byl skok proveden. Zkusme proto oba způsoby zkombinovat.

Kombinovaná metoda

Pojďme tedy zadat úkol:

pokud se pomocná stránka otevře ve stejné záložce (okně), pak nechť je k dispozici metoda history.back();

ale pokud se pomocná stránka otevře v novém okně, pak by měla fungovat výše popsaná metoda (protože v tomto případě history.back() nebude fungovat).

Skript na pomocné stránce se mírně změní (bude přidán řádek zmíněný výše):

funkce return_to_initial_page() (
historie.zpet();
var docum_location = document.location.toString().split("?");
var dokument_href = umístění_dokumentu;
var docum_protocol = document.location.protocol;
var číselné_otázky = umístění_dokumentu.délka - 1;
var get = umístění_dokumentu;
var dotaz = "";
if (počet_otázek > 1) (
otázka = "?";
}
document.location = docum_protocol + "//" + docum_href + dotaz + get;
}

Nejprve se pokusíme vrátit. Pokud to funguje, zbytek skriptu nebude fungovat a vrátíte se na původní stránku na stejném místě, odkud byl přechod proveden. Pokud ne, tak jako dříve vyjmeme z parametrů požadavku GET adresu zdrojové stránky a přejdeme na ni.

Závěr

Tento článek samozřejmě ukazuje pouze jednu z technologických možností pro „návrat“ ZPĚT – na původní stránku. K tomuto účelu lze kromě požadavku GET použít i další technologie, například lokální úložiště localStorage. Kromě toho, aby bylo možné plně simulovat návrat ZPĚT, bylo by hezké přenést velikost rolování původní stránky prostřednictvím požadavku GET - abyste se později, i když otevřete pomocnou stránku v novém okně, mohli vrátit na stejné místo na původní stránce, odkud byl přechod dříve proveden.

Mnoho studií použitelnosti ukazuje, že uživatelé (noví i zkušení) často používají v prohlížeči tlačítko „vrátit se zpět“. Bohužel přední designéři a marketéři jen zřídka zvažují, jaké důsledky to může mít na použitelnost, vzhledem k moderním modelům webdesignu, které využívají aplikace, animace, video a další. Technická struktura těchto rozvržení často nereaguje správně na funkci „vrátit se“, čímž narušuje mentální vzorec uživatele a zhoršuje jeho zkušenost.

Důsledky toho mohou být hrozné: během experimentů byla nedostatečná reakce webu na stisknutí tlačítka „zpět“ důvodem, proč mnoho uživatelů odešlo, se zneužíváním a nelichotivými recenzemi. Ve většině případů i ctihodní, šedovlasí poddaní strašně ztratili nervy.

Z tohoto článku se dozvíte:

• co uživatelé očekávají od tlačítka „vrátit se“;
• jakých 5 nejčastějších chyb;
• jednoduché řešení těchto problémů.

Řešení je opravdu velmi jednoduché, ale často ho opomíjejí i ty největší značky. Opravíme tuto chybu?

Uživatelská očekávání

Stručně řečeno: Uživatelé očekávají tlačítko „vrátit se“, které jim ukáže, co vnímají jako předchozí stránku. Slovo „vnímat“ je velmi důležité, protože existuje obrovský rozdíl mezi tím, co se zdá být předchozí stránkou, a tím, co technicky je.

Nabízí se otázka: co přesně uživatelé interpretují jako novou stránku? Ve většině případů, pokud je stránka vizuálně výrazně odlišná, ale koncepčně souvisí s webem, je vnímána jako nová. Proto je velmi důležité sledovat, jak web zpracovává různé interaktivní prvky: lightboxy, formuláře, filtry atd.

Většina návštěvníků nerozumí technickým aspektům, ale spoléhá se pouze na intuitivní představy o tom, jak by měl zdroj fungovat. Když tedy kliknou na tlačítko „zpět“, očekávají stránku, kde již zažili důležitou zkušenost, ale obdrží stránku s mírně změněným rozhraním.

Níže jsou uvedeny nejoblíbenější interaktivní prvky a doporučení pro jejich použití k maximalizaci uživatelské zkušenosti a použitelnosti.

Účelem implementace překryvných vrstev a světelných polí je ukázat uživateli prvek, který se zobrazí v horní části stránky. Uživatelé proto takové prvky vnímají jako nové stránky a stisknutím tlačítka „zpět“ se vrátí na původní pozici – ale skončí úplně jinde, než očekávali. To je obzvláště nešťastné, protože používání lightboxů pouze znásobuje negativní vnímání webové stránky - většina uživatelů tyto prvky na internetových stránkách nakupování nemá ráda.

Používání filtrů často transformuje stránku a dává člověku nový zážitek. Po seřazení je tedy stránka vnímána jako nová, i když na ní nebylo nic načteno. To se děje proto, že po každé interakci návštěvníka se stránkou internetového obchodu se vygeneruje nový výsledek.

Tento příklad zdůrazňuje, že lidé při určování nezacházejí do technických aspektů nová stránka, ale používejte pouze intuici a zformované vnímání.

3. Registrační/platební formulář

Platební stránky jsou vnímány jako nové stránky, a co je ještě horší - jako vícestupňový proces, jehož každou fázi lze zrušit tlačítkem „vrátit se zpět“.

Tento přístup může způsobit problémy, jednoduchým příkladem je, že se člověk chce vrátit o krok zpět při vyplňování formuláře, aby mohl upravit zadané informace. Stisknutím tlačítka „zpět“ jej vrátíte do košíku a smažete všechny (!) zadané údaje. Podráždění a opuštění místa je přirozený efekt.

Technologie AJAX nemusí splňovat očekávání uživatelů: Každá stránka AJAX je technicky pod stejnou adresou URL, ale zdá se, že se otevírají nové stránky.

V kontextu elektronický obchod Uživatelé mají jasnou představu, že stránka 3 a stránka 4 jsou oddělené a lze je přecházet ze stránky 4 na stránku 3 pomocí tlačítka Zpět.

Uživatelé nejsou připraveni vzdát se tlačítka Zpět

Vzhledem k tomu, jak široce je tato funkce internetového prohlížeče používána, problém nesouladu mezi očekáváními uživatelů a vizí vývojářů se stává kritickým a neměl by být brán na lehkou váhu.

Uživatelé si oblíbili především tlačítko „vrátit se zpět“. mobilní aplikace a webové stránky. Jak ukázala studie mobilní verze Většina uživatelů tuto funkci využívala na všech nabízených zdrojích. Použití tlačítka navíc není omezeno na návrat o jednu stránku zpět – některé subjekty jej stiskly až 15 (!)krát za sebou.

Uživatelé PC také často mačkají tlačítko – ale ne tolik jako majitelé mobilních telefonů, protože uživatelé stolní počítače K dispozici je pohodlná navigace na webu.

Řešení

Dobrou zprávou je, že HTML5 má poměrně jednoduché řešení problému a jmenuje se HTML5 History API. Přesněji řečeno, funkce history.pushState() vám umožňuje změnit adresu URL bez opětovného načítání stránky. V souladu s tím se stránka bude chovat v souladu s očekáváním uživatele, který kliknul na tlačítko „vrátit se zpět“.