Tillbaka-knapp i källkoden. Skapa en "gå tillbaka"-knapp

I den här artikeln kommer vi att titta på hur du kan skapa en "Gå tillbaka"-knapp var som helst du behöver. Jag tror att av namnet på knappen är det redan klart vad som kommer att hända när du klickar på den. En sådan knapp kan infogas både i en kategori och i själva materialet. Allt görs helt enkelt.

Det finns flera alternativ för hur du kan lägga till en knapp, men jag använde personligen bara ett sätt. Nämligen det tredje alternativet av de tre jag föreslog. Lite längre ska jag berätta varför.

Vilka alternativ har vi:

Redigera Jooml-mallfiler.

Klistra bara in knappkoden på rätt plats.

Skapa en modul "HTML-kod", infoga knappkoden där och visa sedan denna modul på rätt plats.

Fördelen med det tredje alternativet är att om du behöver redigera texten på en knapp eller ändra/lägga till en stilklass så behöver du bara fixa själva modulen och inte fixa knappen på alla ställen där den finns.

Så på en av mina webbplatser använde jag det tredje alternativet:

Modulen "HTML code" skapades och knappkoden infogades där med tillägget "Sourcerer", vilket gör det möjligt att lägga till valfri kod till materialet.

Min fungerande knappkod:

kom tillbaka

Texten är lätt dekorerad med en pil med hjälp av komponenter från Bootstrap 3, och själva knappen är utformad via CSS.

I den här videohandledningen kommer vi att titta på 3 alternativ för hur man gör en BACK-knapp för att flytta runt på webbplatsen till tidigare sidor i omvänd ordning. Tillbaka-knappen är också nödvändig när länkar från flera sidor på webbplatsen (A1, A2...An) leder till samma sida (B), och från denna sida (B) måste du gå tillbaka till föregående sida (An) för webbplatsen från vilken du kom till sida (B).

Se den nya videohandledningen:

Kod för "gå tillbaka"-knappen för placering på webbplatsen:

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

Tillbakaknapp. Vad är det för?

I den här videohandledningen kommer vi att skapa en knapp för att gå tillbaka till tidigare sidor på webbplatsen Adobe programmet Musa. Den här knappen kommer tillbaka längs samma väg som vi följde på webbplatsen.

Tillbakaknapp. Lektionsprojekt.

För att göra den här lektionen förberedde jag ett litet projekt, eller snarare kan det inte kallas litet, här består det av sidor på toppnivå, sidor på första nivå, och även för sidan "sida-2" finns det flera fler barn sidor. Och för variation skapade jag två mallar. Jag applicerade den första mallen på de tre första sidorna. Och jag applicerade den andra mallen på alla andra.

Låt oss börja. Vi kommer att skapa en Tillbaka-knapp i "Mall C" så att den omedelbart visas på de sidor som denna mall tillämpas på. Jag går för att redigera den här mallen, och det är här vi kommer att infoga vår bakåtknapp.

Tillbakaknapp. 3 sätt.

Vi kan infoga en "Tillbaka"-knapp på tre sätt. Jag har en speciell fil som jag redan har förberett i anteckningsblocket. Och det finns tre sätt, tre koder, med vilka vi kan infoga en sådan knapp på webbplatsen.

Tillbakaknapp. Metod nr 1 - enkel text.

Det första alternativet är bara text. Knappen kommer att vara i form av text. Jag kopierar denna kod:

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

Och jag klistrar in det i mallen. Det ser ut så här. Vi har bara text och den är markerad i vitt. Jag lägger upp det här. För att förstå hur allt detta fungerar trycker vi på tangenterna ctrl+alt+E för att se hela sidan med alla dess sidor i webbläsaren. Så här ser sidans huvudsida ut. Vi kan surfa på menyn, välja sidor. Här har vi rullgardinsmenyer. Och, till exempel, från huvudsidan gick vi omedelbart till sidan "sida-3". Och här har vi en bakåtknapp.

Den här knappen är aktiv, men när du håller musen över den visas inte en hand med ett finger. Vi kan säkert klicka på den här knappen, och vi kommer att omdirigeras tillbaka till huvudsidan. På samma sätt kan vi klicka på sidan "sida-3", sedan gå till sidan "sida-4" och klicka på knappen "Tillbaka", det tar oss till sidan "sida-3", och om vi klickar på "Tillbaka"-knappen igen ", så tar vi oss till huvudsidan. Så här fungerar bakåtknappen.

Men det är svårt att kalla den här knappen för en knapp, eftersom det bara är en sådan inskription, markerad i vitt. Om vi ​​vill redigera den i Muse kan vi bara ändra storleken på texten, till exempel lägger jag "36" här så att du kan se det bättre. Enligt min åsikt kan vi inte ändra färgen på texten. Nu ska jag försöka sätta rött. Jag valde rött, men detta påverkade inte vår bokstäver på något sätt, så vi kan inte ändra färgen. Vi kan ändra storleken. Låt oss försöka göra den fet och centrera den. Allt vi kan göra är att redigera så här. Om vi ​​till exempel vill fylla det här blocket, göra det orange, kommer vår text fortfarande att markeras i vitt, och i princip ser det inte särskilt snyggt ut.

Tillbakaknapp. Metod nr 2 – Länktext.

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

Nu ska vi kopiera det. Jag trycker på ctrl+C och går till programmet och trycker på ctrl+V för att klistra in det på webbplatsen. Det ser ut som den här länken. Vår länk är blå. Nu är hon inte särskilt synlig. Låt oss också göra ett 36:e typsnitt för att förstora det och se det närmare. Här har vi bara en blå länk. Om vi ​​nu trycker på ctrl+alt+E kommer vi att se att när den visas ser den ut som den här vanliga blå länken. Låt oss gå igenom det ett par gånger till för att se, klicka en, två gånger, kom tillbaka. Denna länk har samma utseende som en vanlig länk.

Vi kan tillämpa länkstilar på den i Adobe Muse. Hitta länkstilar i avsnittet "Hyperlänkar", välj "Redigera länkstilar". Jag har redan en förberedd version. Nu har jag redan en förberedd version. Du kan se att den har en stil applicerad på den. I standardtillståndet och när du svävar muspekaren är färgen blå och i aktivt tillstånd - röd. Du såg det när du tittade. Den andra stilen jag skapade var helt enkelt svarta tillstånd. Vi kan tillämpa denna stil på den här knappen. Till exempel kommer jag att välja och tillämpa den här anpassade stilen på den här knappen. Och du kommer att se att vår inskription har blivit svart.

Här kan vi också göra en fill, till exempel, jag ska göra det med samma orange färg. Här kan du redan redigera texten. Låt oss lägga det i mitten och göra det djärvt. Och i princip är det här alternativet redan mer likt en knapp. Det finns inte längre en sådan vit höjdpunkt, och i princip är det här alternativet redan ganska lämpligt. Medan vi surfar (ctrl+alt+E), låt oss gå till sidan "sida-3", till sidan "sida-4" och klicka igen. Den här knappen fungerar precis som den första, bara den har fler alternativ för att redigera designen.

Tillbakaknapp. Metod nr 3 – knapp – bild.

Och det tredje alternativet för hur vi kan placera en knapp är att knappen blir en bild. Jag kopierar denna kod:

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

Jag går till Muse och klickar på "Infoga". Och det här tredje alternativet vi har är en bild. För att vi ska ha någon form av bild här behöver vi ladda ner någon bildfil från Internet eller skapa den själva. Vi lägger till bilden genom programmets "File" -funktion, välj "Lägg till filer för överföring". Jag har redan laddat ner ett par bilder från Internet. Vi kan välja en. Låt oss välja den här med bakåtknappen. Om vi ​​nu tittar i avsnittet "Resurser", har vi lagt till en knapp "back2.png" - "Sänd". Vi har den här filen för överföring.< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "Tillbaka" / > < / a >

Det är allt, klicka på "OK". Vi kommer inte att se några förändringar i Muse själv. Vi kommer att se alla ändringar endast när vi tittar på webbplatsen i en webbläsare. Låt oss trycka på ctrl+alt+E igen för att se sidan i webbläsaren och försöka surfa på våra sidor.

Tillbakaknapp. Se resultatet.

Låt oss gå till sidan, till exempel "sida 2-1", låt oss nu gå till sidan "sida-2", låt oss nu gå till sidan "sida 3", sedan till sidan "sida-4". Och nu, om vi trycker på bakåtknappen, går vi tillbaka sekventiellt i omvänd ordning till startsida webbplats. Klicka på "Tillbaka", flytta till sidan "sida-3", till sidan "sida-2". Och här har vi ingen knapp längre. Om vi ​​placerade den i en mall som användes på sidan "sida-2", så skulle vi också ha en "Tillbaka"-knapp här. Eftersom vi inte har någon, måste vi navigera till huvudsidan endast genom att klicka på "Hem"-knappen i menyn. Låt oss till exempel gå till sidan "sida 2-2-2", gå sedan till sidan "sida 2-2-1", sedan till sidan "sida-3" och "sida-4". Och nu i omvänd ordning: sida "sida-3", sida "sida 2-2-1", sida "sida 2-2-2" och till huvudsidan.

Naturligtvis behöver du inte placera den här knappen på din webbplats, utan använd vanliga pilar i din webbläsare. Men om du vill att en sådan knapp ska finnas på din webbplats, så kan du göra den på dessa sätt... Och länken till artikeln kommer att finnas under den här videon. Det är allt. Dmitry Shapovalov var med dig. Gilla den här videon, prenumerera på kanalen, skriv kommentarer nedan, så säger jag hejdå till dig till nästa videolektion.

Ibland på webbsidor finns det ett behov av att tillfälligt gå till någon annan (låt oss kalla det extra) sida och sedan gå tillbaka och fortsätta arbeta med den. Detta kan till exempel vara en hjälpsida, registreringssida.

I det här fallet kan uppenbarligen returadressen vara väldigt annorlunda. Hur implementerar man en sådan omvänd övergång på en webbplats? Ren html/CSS räcker inte här, du måste använda javascript.

Det enklaste är till exempel att använda denna rad i skriptet på hjälpsidan:

Historikmetoden minns historiken för navigering på en sida och i själva verket liknar användningen av webbläsarens knappar framåt och bakåt, bara lite mer funktionell. Detta är det enklaste och bekvämaste sättet, men bara under ett villkor: om den nya (extra) sidan inte öppnas i ett nytt fönster. Annars kommer hjälpsidan att öppnas för första gången (mer exakt, det kommer att vara den första sessionen för den, det har inte skett några övergångar på den ännu). Och det betyder att det faktiskt inte finns någonstans att gå tillbaka. Därför kan denna metod inte kallas universell. Det kommer inte att fungera om användaren tvingas öppna sidan i en ny flik eller om webbläsaren gör det åt honom - i enlighet med inställningarna. I det här fallet hjälper inte länkattributet target="_self": det kommer att vara omöjligt att gå tillbaka från en öppen extrasida (såvida du inte anger URL-adressen till källsidan manuellt i webbläsarens adressfält).

Ett mer universellt sätt

För att implementera det behöver du skript på både käll- och extrasidor. Tanken kan variera. En av dem bygger på att adressen (URL) till källsidan lagras i webbläsarens adressfält som en GET-förfrågan. Därigenom. Hjälpsidan, när den tar emot en sådan förfrågan, känner till dess källa. Utifrån detta blir det möjligt att byta tillbaka, d.v.s. till sidan från vilken övergången gjordes.

Schematiskt kan detta representeras enligt följande:

Skript på originalsida

På sidan VILKEN övergången ska göras finns följande script, som är en funktion - en musklickshanterare (onclick):

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

För att funktionen i skriptet ska fungera måste du installera dess hanterare på något element på ett av sätten, till exempel så här:

Klicka för att gå till supportsidan

Observera att href-attributet för denna länk har en motsvarande adress, som anges i onclick-händelsehanterarens funktion. Detta görs för att sökrobotar ska förstå vilken sida länken ska gå till när du klickar på länken. Om detta inte behövs, bör du skapa ett tomt href-attribut, som

Principen för detta skript är att när save_back(url)-funktionen anropas, öppnas en (extra) sida med url-adressen. För att göra detta bestäms protokollet för sidan (till exempel http eller https), liksom resten av URL:en för den ursprungliga webbsidan, inklusive eventuellt GET-förfrågningsdata (detta är vad som finns i URL:en efter "?" skylt). Den mottagna informationen läggs till i URL:en för sidan som öppnas - och en övergång till den sker.

Skript på hjälpsidan

Det borde ha ett skript så här:

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

var fråga = "";
if(antal_frågor > 1)(
fråga = "?";
}
document.location = docum_protocol+"//"+ docum_href + question + get;
}

Det här skriptet kommer också att startas när musen klickar på något element där motsvarande hanterare är installerad:

Lämna tillbaka

Den här raden avbryter standardåtgärden när musen klickar på en länk. Faktum är att länken som standard följs. I det här fallet kommer övergången att ske exakt till den adress som anges i href-attributet. Denna adress (särskilt på en extra sida) får inte innehålla returadressen till sidan från vilken övergången gjordes (om övergången till extrasidan inte är möjlig från en viss sida, utan från flera källsidor).

Så skriptet på hjälpsidan läser innehållet i adressfältet och delar sedan upp det i en array av "?"-element. Observera att en URL kan innehålla två sådana tecken. Den första kommer, som redan nämnts, att visas på grund av att adressen (minus protokollet) för källsidan har lagts till adressen för hjälpsidan. Och den andra kan vara närvarande som ett resultat av närvaron av GET-begäranparametrar när källsidan laddas. Med andra ord kan det finnas ett eller två frågetecken i adressfältet på hjälpsidan. Att gå från en sekundär sida till den ursprungliga sidan när du klickar på en länk

Lämna tillbaka

Förfrågan läses från adressfältet och konverteras till samma form som den hade på den ursprungliga sidan, varefter sidan laddas på denna adress.

Anteckningar

Dessutom bör det noteras att artikeln i själva verket inte handlar om att återgå till den ursprungliga sidan, utan om att ladda om den. Detta är naturligtvis bara en imitation av en retur. Framför allt kan det hända att de uppgifter som anges på den här sidan och dess inställningar inte sparas. Dessutom, till skillnad från RETURN, när sidan laddas, kommer den att öppnas från början av webbplatsen (dvs. dess övre del kommer att vara placerad högst upp på skärmen). Medan ett "riktigt" bakspår returnerar (ursprungliga) sidan till den exakta platsen från vilken hoppet gjordes. Låt oss därför försöka kombinera båda metoderna.

Kombinerad metod

Så låt oss ställa in uppgiften:

om hjälpsidan öppnas i samma flik (fönster), låt metoden history.back() vara tillgänglig;

men om hjälpsidan öppnas i ett nytt fönster, så borde metoden som diskuterats ovan fungera (för i det här fallet kommer history.back() inte att fungera).

Skriptet på hjälpsidan kommer att ändras något (raden som nämns ovan kommer att läggas till):

funktion return_to_initial_page() (
history.back();
var docum_location = document.location.toString().split("?");
var docum_href = docum_location;
var docum_protocol = document.location.protocol;
var number_questions = docum_location.length - 1;
var get = docum_location;
var fråga = "";
if (antal_frågor > 1) (
fråga = "?";
}
document.location = docum_protocol + "//" + docum_href + question + get;
}

Först försöker vi gå tillbaka. Om det fungerar kommer resten av skriptet inte att fungera och du kommer tillbaka till den ursprungliga sidan på samma plats där övergången gjordes. Om inte, så extraherar vi, som tidigare, adressen till källsidan från parametrarna för GET-förfrågan och går till den.

Slutsats

Naturligtvis visar den här artikeln bara ett av teknikalternativen för att "återvända" TILLBAKA - till den ursprungliga sidan. För detta ändamål, utöver GET-begäran, kan andra teknologier användas, till exempel lokal lagring localStorage. Dessutom, för att helt simulera en retur BACK, skulle det vara trevligt att överföra rullningsmängden för den ursprungliga sidan via en GET-förfrågan - så att du senare, även när du öppnar extrasidan i ett nytt fönster, kan återvända till samma plats på originalsidan där övergången tidigare gjordes.

Många användbarhetsstudier visar att användare (både nya och erfarna) ofta använder "gå tillbaka"-knappen i webbläsaren. Tyvärr överväger frontend-designers och marknadsförare sällan vilka konsekvenser detta kan ha för användbarheten, med tanke på moderna webbdesignmodeller som använder appar, animationer, video och mer. Ofta svarar den tekniska strukturen för dessa layouter inte korrekt på "gå tillbaka"-funktionen, vilket bryter användarens mentala mönster och försämrar deras upplevelse.

Konsekvenserna av detta kan vara fruktansvärda: under experiment var webbplatsens otillräckliga svar på att trycka på "tillbaka"-knappen orsaken till att många användare lämnade, med missbruk och föga smickrande recensioner. I de flesta fall tappade även de ärevördiga, gråhåriga försökspersonerna sitt humör fruktansvärt.

Från den här artikeln kommer du att lära dig:

• vad användarna förväntar sig av "gå tillbaka"-knappen;
• vilka är de 5 vanligaste misstagen;
• en enkel lösning på dessa problem.

Lösningen är egentligen väldigt enkel, men den försummas ofta även av de största märkena. Ska vi fixa detta fel?

Användarnas förväntningar

Kort sagt: Användare förväntar sig en "gå tillbaka"-knapp för att visa dem vad de uppfattar som föregående sida. Ordet "uppfatta" är mycket viktigt, eftersom det är en enorm skillnad mellan vad som verkar vara föregående sida och vad det tekniskt är.

Frågan uppstår: vad exakt tolkar användarna som en ny sida? I de flesta fall, om en sida är väsentligt annorlunda visuellt, men är begreppsmässigt relaterad till webbplatsen, så uppfattas den som ny. Därför är det mycket viktigt att övervaka hur webbplatsen bearbetar olika interaktiva element: ljuslådor, formulär, filter, etc.

De flesta besökare förstår inte tekniska aspekter, utan förlitar sig endast på intuitiva idéer om hur resursen ska fungera. När de klickar på "tillbaka"-knappen förväntar de sig därför en sida där de redan har haft en viktig upplevelse, men de får en sida med ett något ändrat gränssnitt.

Nedan finns de mest populära interaktiva elementen och rekommendationer för att använda dem för att maximera användarupplevelsen och användbarheten.

Syftet med att implementera överlägg och ljusbord är att visa användaren ett element som visas överst på sidan. Därför uppfattar användarna sådana element som nya sidor och trycker på "tillbaka"-knappen för att återgå till sin ursprungliga position - men de hamnar på en helt annan plats än de förväntade sig. Detta är särskilt olyckligt, eftersom användningen av lightboxar bara multiplicerar den negativa uppfattningen av webbsidan - de flesta användare gillar inte dessa element på online shoppingsajter.

Att använda filter förvandlar ofta en sida och ger en person en ny upplevelse. Därför upplevs sidan efter sortering som ny, även om ingenting laddats på den. Detta beror på att efter varje besökares interaktion med webbbutikssidan genereras ett nytt resultat.

Det här exemplet visar att människor inte går in på tekniska aspekter när de avgör ny sida, men använd bara intuition och bildad uppfattning.

3. Anmälnings-/betalningsblankett

Betalningssidor uppfattas som nya sidor, och ännu värre - som en process i flera steg, där varje steg kan avbrytas med en "gå tillbaka"-knapp.

Det här tillvägagångssättet kan orsaka problem, ett enkelt exempel är att en person vill gå tillbaka ett steg i att fylla i ett formulär för att redigera den inmatade informationen. Genom att trycka på "tillbaka"-knappen återgår den till korgen och raderar alla (!) inmatade data. Irritation och att lämna platsen är en naturlig effekt.

AJAX-teknik kanske inte uppfyller användarnas förväntningar: Varje AJAX-sida är tekniskt sett under samma URL, men det verkar som om nya sidor öppnas.

I sammanhanget e-handel Användare har en tydlig uppfattning om att sida 3 och sida 4 är separata och kan navigeras från sida 4 till sida 3 med hjälp av bakåtknappen.

Användare är inte redo att ge upp bakåtknappen

Med tanke på hur mycket använd den här webbläsarfunktionen är, blir frågan om bristande överensstämmelse mellan användarnas förväntningar och utvecklarnas vision kritisk och bör inte tas lätt på.

Användare gillade särskilt "gå tillbaka"-knappen mobila applikationer och webbplatser. Som studien visade mobila versioner webbplatser använde majoriteten av användarna denna funktion på alla erbjudna resurser. Dessutom är användningen av knappen inte begränsad till att rulla tillbaka en sida - vissa ämnen tryckte på den upp till 15 (!) gånger i rad.

PC-användare trycker också ofta på knappen - men inte lika mycket som mobiltelefonägare, eftersom användare stationära datorer Bekväm webbplatsnavigering är tillgänglig.

Lösning

Den goda nyheten är att HTML5 har en relativt enkel lösning på problemet, och den kallas HTML5 History API. Mer specifikt låter funktionen history.pushState() dig ändra webbadressen utan att ladda om sidan. Följaktligen kommer webbplatsen att bete sig i enlighet med förväntningarna hos användaren som klickade på "gå tillbaka"-knappen.