HTML naaseb eelmisele lehele. Looge nupp "mine tagasi". Kasutajad ei ole valmis tagasi nupust loobuma

Selles artiklis vaatleme, kuidas saate luua nuppu "Mine tagasi" mis tahes kohas, mida vajate. Arvan, et nupu nimest on juba arusaadav, mis peale vajutades saab. Sellist nuppu saab sisestada nii kategooriasse kui ka materjali endasse. Kõik tehakse üsna lihtsalt.

Nupu lisamiseks on mitu võimalust, kuid mina isiklikult kasutasin ainult ühte võimalust. Nimelt kolmas variant minu pakutud kolmest. Natuke edasi ma ütlen teile, miks.

Millised võimalused meil on:

  • Muutke Joomli mallifaile.
  • Lihtsalt kleepige nupu kood õigesse kohta.
  • Looge moodul "HTML-kood", sisestage sinna nupu kood ja seejärel kuvage see moodul õiges kohas.

    • Kolmanda võimaluse eeliseks on see, et kui on vaja nupul teksti redigeerida või stiiliklassi muuta/lisa, siis tuleb parandada vaid moodul ise, mitte kõigis selle asukoha kohtades nuppu parandada.

    Niisiis, ühel oma saidil kasutasin kolmandat võimalust:

    Loodi moodul “HTML code” ja sinna sisestati “Sourcerer” laienduse abil nupukood, mis võimaldab materjalile lisada mis tahes koodi.

    Minu töönupu kood:

    tule tagasi

    Tekst on Bootstrap 3 komponentide abil veidi kaunistatud noolega ja nupp ise on kujundatud CSS-i kaudu.

    Selles videoõpetuses vaatleme 3 võimalust, kuidas teha nuppu TAGASI, et liikuda saidil eelmisele lehele. vastupidises järjekorras. Nupp TAGASI on vajalik ka siis, kui saidi mitme lehe lingid (A1, A2...An) viivad samale lehele (B) ja sellelt lehelt (B) peate naasma eelmisele lehele (An) saidilt, kust jõudsite lehele (B).

    Vaadake uut videoõpetust:

    Saidil paigutuse nupu „Tagasi” kood:

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

    Tagasi nupp. Milleks see mõeldud on?

    Selles videoõpetuses teeme nupu saidi eelmistele lehtedele naasmiseks Adobe programm Muusa. See nupp naaseb mööda sama rada, mida me saidil järgisime.

    Tagasi nupp. Tunni projekt.

    Selle õppetunni tegemiseks valmistasin ette väikese projekti, õigemini seda ei saa väikeseks nimetada, siin koosneb see lehekülgedest kõrgeim tase, esimese taseme leheküljed ja ka lehe “leht-2” jaoks on veel mitu alamlehte. Ja mitmekesisuse huvides lõin kaks malli. Esimese malli rakendasin esimesele kolmele lehele. Ja ma rakendasin teist malli kõigile teistele.

    Alustame. Loome “Malli C” nupu Tagasi, et see ilmuks kohe nendele lehtedele, millele see mall on rakendatud. Ma lähen seda malli redigeerima ja siia sisestame tagasinupu.

    Tagasi nupp. 3 viisi.

    Nupu "Tagasi" saame sisestada kolmel viisil. Mul on spetsiaalne fail, mille olen juba märkmikus ette valmistanud. Ja seal on kolm võimalust, kolm koodi, mille abil saame sellise nupu saidile sisestada.

    Tagasi nupp. Meetod nr 1 – lihtne tekst.

    Esimene võimalus on lihtsalt tekst. Nupp on teksti kujul. Kopeerin selle koodi:

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

    Ja kleebin selle malli. See näeb välja selline. Meil on lihtsalt tekst ja see on valgega esile tõstetud. Ma postitan selle siia. Selle kõige toimimise mõistmiseks vajutame klahve ctrl+alt+E, et vaadata brauseris kogu saiti koos kõigi selle lehtedega. Selline näeb välja saidi avaleht. Saame surfata menüüs, valida lehti. Siin on rippmenüüd. Ja näiteks pealehelt läksime kohe lehele “lehekülg-3”. Ja siin on meil tagasinupp.

    See nupp on aktiivne, kuid hiirega selle kohal hõljutades ei ilmu sõrmega kätt. Võime sellel nupul julgelt klõpsata ja meid suunatakse tagasi avalehele. Samamoodi saame klõpsata leheküljel “lehekülg-3”, siis minna lehele “lehekülg-4” ja klõpsata nuppu “Tagasi”, see viib meid lehele “lehekülg-3” ja kui klõpsame nuppu "Tagasi" uuesti ", siis viib see meid avalehele. Nii töötab tagasinupp.

    Kuid seda nuppu ei saa vaevalt nupuks nimetada, kuna see on just see valgega esile tõstetud kiri. Kui tahame seda Muse'is muuta, saame muuta ainult teksti suurust, näiteks panen siia "36", et saaksite seda paremini näha. Minu arvates ei saa me teksti värvi muuta. Nüüd proovin punast panna. Valisin punase, kuid see ei mõjutanud kuidagi meie kirjapilti, seega ei saa me värvi muuta. Saame suurust muuta. Proovime muuta paksuks ja tsentreerida. Kõik, mida saame teha, on niimoodi redigeerida. Kui me tahame seda plokki täita, näiteks muuta see oranžiks, siis on meie tekst ikkagi valgega esile tõstetud ja põhimõtteliselt ei näe see eriti kena välja.

    Tagasi nupp. Meetod nr 2 – lingi tekst.

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

    Nüüd kopeerime selle. Vajutan ctrl+C ja lähen programmi juurde ning vajutan ctrl+V, et see saidile kleepida. See näeb välja selline link. Meie link on sinine. Nüüd pole teda eriti näha. Teeme ka 36. fondi, et seda suurendada ja lähemalt näha. Siin on meil ainult sinine link. Kui nüüd vajutada ctrl+alt+E, siis näeme, et vaadatuna näeb see välja nagu see tavaline sinine link. Vaatame selle veel paar korda üle, et näha, klõpsa üks, kaks korda ja tule tagasi. Sellel lingil on sama välimus kui tavalisel lingil.

    Saame sellele Adobe Muse'is lingi stiile rakendada. Otsige jaotisest "Hüperlingid" üles lingi stiilid, valige "Muuda lingi stiile". Mul on juba ettevalmistatud versioon. Nüüd on mul juba ettevalmistatud versioon. Näete, et sellele on rakendatud stiil. Tavalises olekus ja hiirekursori hõljutamisel on värv sinine ja aktiivses olekus punane. Sa nägid seda vaadates. Teine stiil, mille ma lõin, oli lihtsalt kõik mustad olekud. Seda stiili saame sellele nupule rakendada. Näiteks valin ja rakendan sellele nupule selle kohandatud stiili. Ja näete, et meie kiri on muutunud mustaks.

    Siin saame teha ka täidise, näiteks teen selle sama oranži värviga. Siin saate juba teksti redigeerida. Paneme selle keskele ja teeme paksuks. Ja põhimõtteliselt sarnaneb see valik juba rohkem nupule. Sellist valget esiletõstmist enam pole ja põhimõtteliselt on see valik juba üsna sobiv. Sirvimise ajal (ctrl+alt+E) läheme lehele “leht-3”, lehele “lehekülg-4” ja klõpsake uuesti. See nupp töötab täpselt samamoodi nagu esimene, ainult et see on rohkem võimalusi kujunduse redigeerimiseks.

    Tagasi nupp. Meetod nr 3 – nupp – pilt.

    Ja kolmas võimalus nupu paigutamiseks on see, et nupp on pilt. Kopeerin selle koodi:

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

    Ma lähen Muse'i ja klõpsan "Insert". Ja see kolmas võimalus, mis meil on, on pilt. Selleks, et meil siin mingisugune pilt oleks, peame mingi pildifaili Internetist alla laadima või ise looma. Lisame pildi programmi "Fail" funktsiooni kaudu, valige "Lisa failid edastamiseks". Olen juba paar pilti Internetist alla laadinud. Saame valida ühe. Valime selle tagasinupuga. Nüüd, kui vaatame jaotist "Ressursid", oleme lisanud nupu "back2.png" - "Edasta". Meil on see fail ülekandmiseks.< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "tagasi" / > < / a >

    See on kõik, klõpsake nuppu "OK". Muse'is endas muudatusi me ei näe. Kõiki muudatusi näeme ainult siis, kui vaatame saiti brauseris. Vajutagem uuesti ctrl+alt+E, et vaadata saiti brauseris ja proovida meie lehtedel surfata.

    Tagasi nupp. Vaata tulemust.

    Läheme lehele, näiteks "lehekülg 2-1", nüüd läheme lehele "lehekülg-2", nüüd läheme lehele "lehekülg 3", siis lehele "lehekülg-4". Ja nüüd, kui vajutame tagasi nuppu, läheme järjest tagasi vastupidises järjekorras avaleht saidile. Klõpsake "Tagasi", liikuge lehele "lehekülg-3" ja lehele "lehekülg-2". Ja siin pole meil enam nuppu. Kui paigutaksime selle malli, mida rakendati lehele “2. lehekülg”, oleks meil siin ka nupp “Tagasi”. Kuna meil seda pole, peame avalehele navigeerima ainult menüüs nuppu "Kodu" klõpsates. Liigume näiteks lehele “lehekülg 2-2-2”, siis leheküljele “lehekülg 2-2-1”, seejärel lehekülgedele “lehekülg-3” ja “lehekülg-4”. Ja nüüd vastupidises järjekorras: lehekülg “lehekülg-3”, leht “lehekülg 2-2-1”, leht “lehekülg 2-2-2” ja avalehele.

    Loomulikult ei pea te seda nuppu oma veebisaidile paigutama, vaid kasutage brauseris tavalisi nooli. Aga kui sa tahad, et sinu kodulehel oleks selline nupp, siis saad seda teha nii... Ja artikli link tuleb selle video alla. See on kõik. Dmitri Šapovalov oli teiega. meeldib see video, tellige kanal, kirjutage alla kommentaarid ja jätan teiega hüvasti kuni järgmiste videotundideni.

      Tere pärastlõunal, mul on küsimus, kuidas tellimust esitades nuppu tagasi liigutada ja järgmise nupu kõrvale asetada. Nüüd näeb see minu jaoks välja selline: https://yadi.sk/i/_ZNvGrvEhqSk3 alla, see lakkab töötamast ..

      Lahendus on olemas

      Tere, kas keegi oskab öelda kuidas teha näiteks ostukorvi tagasi nuppu, et inimene saaks tagasi eelmisele lehele?

      Sisestage nupp malli, kuhu soovite, näiteks see

      +1

      Kui ma vajutan brauseri tagasi nuppu, näivad kõik stiilid kaovat, kuni lehte värskendan. Vaiketeema peaks ilmuma nagu alloleval ekraanipildil.) Öelge, milles probleem

      Tere, tegin ostukorvi "Mine tagasi" nupu, isegi mitte nuppu, vaid lihtsalt link koodiga Mine tagasi Nüüd käru juurde tagasi tulles...

      Lahendus on olemas

      Tere pärastlõunal, puutusin kokku järgmise probleemiga: kui lisate kauba ostukorvi ja klõpsate brauseris nuppu "Tagasi", ei salvestata teavet ostukorvis (lisaplokis) olevate kaupade kohta kuni lehe värskendamiseni. Need. minge saidile, minge ...

      Teie märgitud sait kasutab ostukorvi jaoks pistikprogrammi. Muudatustena saate kasutada kaupade lisamise saatmist mitte aadressile?html=1&items=1; käru.

      Tere pärastlõunal. Igas etapis kuvatakse nupp "Järgmine" Teemast "Suprime" leidsin nupu koodi: