Fanebasert surfing

Fanebasert surfing er en funksjon som lar deg bla gjennom flere nettsider samtidig, mens du holder alt innenfor et enkelt vindu , for å forenkle navigering mellom den ene og den andre og forbruke mindre systemressurser .

Navnet kommer fra den engelske fanen , "tab", fordi de forskjellige fanene med de forskjellige sidene som vises har en fane øverst, faktisk, som lar deg velge hvilken som skal vises

Historie

Opprinnelig adoptert i 1994 av Opera i henhold til Multiple Document-grensesnittet (surfing / visning av flere nettsteder samtidig) [1] , i mellomtiden ble metoden som for tiden ble tatt i bruk av InternetWorks of BookLink Technologies i 1994 testet , metoden for flere web sider åpnes samtidig og kan velges via en fane som er plassert øverst og deretter introdusert for allmennheten i 1999 av IBrowse- nettleseren for AmigaOS , og året etter av Opera og deretter av andre som Mozilla Firefox , Konqueror , Safari og Internet Explorer ( fra og med versjon 7),

Tidligere (før denne teknologien) ble et dedikert vindu åpnet for hvert nettsted (IP-adresse) . Vinduene kan da stables horisontalt eller vertikalt.

Funksjoner

Konseptet med en dataøkt er knyttet til introduksjonen av fanene . Økten kan betraktes som et sett med faner . For off-line navigasjon er det nødvendig å lagre de enkelt åpne sidene; ved å navigere med fanene kan du lagre økten, dvs. alle sidene åpnes i nettleservinduet du bruker. Holder du musepekeren nær fanen vises hele adressen, i tilfelle det ikke er nok plass. Å åpne mange faner samtidig genererer en annen ulempe: for å finne et spesifikt nettsted, må du bla gjennom alle fanene, eller fanene øverst og sjekke adressen. Noen plugins løser dette problemet.

En Firefox-utvidelse, Showcase , viser i en enkelt fane et sammendrag med forhåndsvisninger av alle sidene som er åpnet under økten. Opera har en lignende funksjonalitet, som lar deg lage en fane med en lenke til et nettsted og forhåndsvisningen av denne lagret lokalt. Det er imidlertid en statisk side, ikke automatisk generert slik som Firefox-Mozilla. I Opera, Firefox og Internet Explorer (takket være IE7Pro- plugin ) er det mulig å definere egendefinerte kommandoer knyttet til musebevegelser : blant disse kan du stille inn rullingen fra en fane til den neste med en gitt musebevegelse (høyre, venstre, hjul osv.).

Internet Explorer (foreldet til fordel for Microsoft Edge som igjen støtter fanebasert surfing [2] ) lar deg administrere grupper av faner eller fanemapper, med muligheten til å lagre, oppdatere eller slette alle faner med en enkelt operasjon av samme gruppe. Et lignende alternativ er til stede i Opera, fra og med versjon 11.5.7, i tillegg til muligheten for å justere lengden og bredden på forhåndsvisningene, gjenopprette fanene lukket ved en feiltakelse, blokkere lukkingen av en fane.

Google Chrome , født i 2008 , var den første programvaren som brukte faner som uavhengige Windows-prosesser. Hvis åpningen av en nettside bremser tilkoblingen , blokkeres av brannmuren eller antiviruset , kan brukeren lukke den enkelte siden og holde de andre åpne med Chrome. Tidligere var tapet av hele økten uunngåelig, siden nettleseren er en enkelt datamaskinprosess. Ved å trykke CTRL + ALT + DEL ser brukeren de individuelle fanene åpne med Chrome, mens med de andre programmene vises bare programvarenavnet. Blant funksjonene som finnes i de forskjellige nettleserne knyttet til fanebasert surfing:

Eksempel på fanebasert surfing på nettet

HTML og CSS

HTML :

< div class = "tab" > < button class = "tablinks" onclick = "openCity (event, 'London')" > London </ button > < button class = "tablinks" onclick = "openCity (event, 'Paris') ) " > Paris </ button > < button class = " tablinks " onclick = " openCity (event, 'Tokyo') " > Tokyo </ button > </ div > < div id = "London" class = "tabcontent" > < h3 > London </ h3 > < p > London er hovedstaden i England </ p > </ div > < div id = "Paris" class = "tabcontent" > < h3 > Paris </ h3 > < p > Paris er hovedstaden i Frankrike </ p > </ div > < div id = "Tokyo" class = "tabcontent" > < h3 > Tokyo </ h3 > < p > Tokyo er hovedstaden i Japan </ p > </ div >

CSS :

. tab { overløp : skjult ; kantlinje : 1 px solid #ccd ; bakgrunnsfarge : # f3f3f3 ; } . tabulatorknapp { bakgrunnsfarge : arv ; _ flyte : venstre ; grense : ingen ; disposisjon : ingen ; markør : peker ; polstring : 18 px 22 px ; overgang : 0,2 s ; } . tabulatorknapp : hover { bakgrunnsfarge : #dcc ; _ } . tabulatorknapp . _ aktiv { bakgrunnsfarge : #ccd ; } . tabcontent { display : ingen ; polstring : 8 px 14 px ; kantlinje : 1 px solid #ccd ; border-top : ingen ; }

AJAX

HTML :

< ul id = "nav" > < li > <a href = "Page_1.html"> Side 1 </ a > < / li > < li > <a href = "Page_2.html"> Side 2 < / a > </ li > < li > <a href = "Page_3.html"> Side 3 </ a > </ li > </ ul > < div id = "ajax-content" > Standardtekst </ div >

JavaScript :

$ ( dokument ). klar ( function () { $ ( "#nav li a" ). klikk ( function () { $ ( "# ajax-innhold" ). tom (). append ( "<div id = 'laster'> <img src = 'bilder / loading.gif' alt = 'Laster inn' /> </div>" ); $ ( "#nav dem a" ). removeClass ( 'nåværende' ); $ ( dette ). addClass ( 'nåværende' ); $ . ajax ({ url : this . href , suksess : funksjon ( html ) { $ ( "# ajax-innhold" ). empty (). append ( html ); } }); returner falsk ; }); });

Trekkspill

Trekkspillet ("trekkspill") er et grafisk kontrollelement som består av en vertikalt stablet liste med elementer, for eksempel etiketter eller miniatyrbilder. Hvert element kan "utvides" eller "skjules" for å avsløre innholdet knyttet til det elementet [3] . Det er en type fanebasert surfing [4] [5] .

Begrepet stammer fra det musikalske trekkspillet der belgseksjonene kan utvides ved å trekke utover [6] .

Eksempel

HTML:

< button class = "trekkspill" > Seksjon 1 </ button > < div class = "panel" > < p > Lorem ipsum ... </ p > </ div > < button class = "trekkspill" > Del 2 </ button > < div class = "panel" > < p > Lorem ipsum ... </ p > </ div > < button class = "trekkspill" > Seksjon 3 </ button > < div class = "panel" > < p > Lorem ipsum ... </ p > </ div >

CSS:

. trekkspill { bakgrunnsfarge : #fef ; farge : # 454 ; markør : peker ; polstring : 20 px ; bredde : 100 % ; tekstjustering : venstre ; grense : ingen ; disposisjon : ingen ; overgang : 0,3 s ; } . aktiv ,. _ trekkspill : hover { bakgrunnsfarge : #ccd ; } . panel { padding : 0 28 px ; bakgrunnsfarge : hvit ; display : ingen ; overløp : skjult ; }

JavaScript:

var acc = dokument . getElementsByClassName ( "trekkspill" ); var i ; for ( i = 0 ; i < acc . lengde ; i ++ ) { acc [ i ]. addEventListener ( "click" , function () { this . classList . toggle ( "active" ); var panel = this . nextElementSibling ; if ( panel . style . display === "block" ) { panel . style . display = " ingen " ; } else { panel . style . display = " blokk " ; } }); }

Fordeler og ulemper [7] [8]

Pro

  • Fanebasert surfing lar deg presentere mer innhold for brukeren på et begrenset sted.
  • Nyttig for mobile enheter der du ikke har mye skjermplass.
  • På stasjonære nettlesere, så snart innholdet for den aktive fanen er hentet fra serveren, kan det vises til brukeren. Resten av fanene kan lastes på forespørsel ved hjelp av Ajax . Dette gir en god brukeropplevelse da dataene raskt er tilgjengelige for brukeren.

Mot

  • Innholdet i flere faner kan ikke vises samtidig. Fane-navigasjon bør aldri brukes når det er et brukstilfelle der brukeren kan trenge å se / sammenligne data fra flere faner.

Merknader

  1. ^ 5 funksjoner Opera Browser gjorde først
  2. ^ Microsoft Edge Addons , på microsoftedge.microsoft.com . Hentet 22. februar 2021 .
  3. ^ Apple - Nedlastinger , på web.archive.org , 30. april 2008. Hentet 22. februar 2021 (arkivert fra originalen 30. april 2008) .
  4. ^ trekkspill , på codepen.io .
  5. ^ 37 CSS -trekkspill , på Free Frontend . Hentet 22. februar 2021 .
  6. ^ SlideVerse - A Different Look at the Internet , på web.archive.org , 3. februar 2009. Hentet 22. februar 2021 (arkivert fra originalen 3. februar 2009) .
  7. ^ Lyubov Kurach, 9 Mobile Navigation Patterns: Usage, Pros & Cons , on Medium , 7. september 2020. Hentet 22. februar 2021 .
  8. ^ Hva er noen fordeler og ulemper med å bruke fanebasert navigasjon? - Quora , på quora.com . Hentet 22. februar 2021 .

Andre prosjekter