Teeme tundlikke vahelehti ilma javascripti ja räpaste häkkideta. Kaunite vahelehtede (vahelehtede) tegemine CSS -i ja JQuery abil Reas vahekaardid css -is

Tere kallid lugejad. Sellel külmal päeval teeme teiega toredad vahelehed CSS ja jQuery abil... Selgub, et need nn vahelehed on saidi kui terviku jaoks väga kasulikud, need võivad lehel märkimisväärselt ruumi kokku hoida. Neid saab paigutada ükskõik kuhu, külgribale või otse artiklisse.

Samuti on meie valmistatud vahekaardid kaunilt kujundatud, need kaunistavad teie saiti oluliselt. Mõlemas :-) tore ja kasulik, mulle tundub see harv juhus. Pealegi tehakse neid ainult vastavalt abiga: need laadivad kiiresti ja ei kanna serverile mingit koormust.

JQuery

$ (dokument) .ready (function () ($ ("# content div"). hide (); // Varjatud sisu $ ("# tabs li: first"). attr ("id", "current"); // Millisel vahekaardil kuvada esimene $ ("# content div: first"). FadeIn (); // Kuva esimese vahelehe sisu $ ("# tab a"). Klõpsake (function (e) (e.preventDefault (); $ ("#content div"). hide (); // Peida kogu sisu $ ("# tabs li"). attr ("id", ""); // Lähtesta identifikaatorid $ (this) .parent (). attr ("id", "praegune"); // Aktiveerige identifikaatorid $ ("#" + $ (this) .attr ("title")). fadeIn (); // Kuva praeguse vahekaardi sisu)); )) ();

See on põhimõtteliselt kõik, peamine on katsetada. Nendele vahelehtedele saate lisada taustapilte, mis annavad neile märgatavalt välimuse, ainult need laadivad kauem.

Brauseri ühilduvus

Neid vahekaarte toetavad peaaegu kõik brauserid, ainult mõnes näevad need veidi teistsugused välja, sest paljud ei toeta veel CSS3.

See on kõik, ma loodan, et teile meeldis :-) Kui midagi pole teile selge, küsige kindlasti kommentaarides. Varsti näeme.

Umbes koodi kohta

Navigeerimiskaart

Kahe vormi navigeerimiskaardid.

Vastutulelik: ei

Sõltuvused: bootstrap.css

Umbes koodi kohta

CSS vahekaart

Ühilduvad brauserid: Chrome, Firefox, Opera, Safari

Vastutulelik: jah

Sõltuvused: -

Umbes koodi kohta

Vahekaardid

Valija + valib järgmise külgneva elemendi. Ajalooliselt on see siltide kujundamisel lahe olnud. CSS -ruudustiku korral võib element märgistada teise kõrval, kuid kuval on see täiesti erinev. See pliiats kasutab lihtsat sisendit: kontrollitud valijat koos paljude plussmärkidega, et kujundada kujuteldava mikrosaidi erinevaid lehti.

Ühilduvad brauserid: Chrome, Edge, Firefox, Opera, Safari

Vastutulelik: jah

Sõltuvused: -

Umbes koodi kohta

Puhtad CSS -i vahelehed

Vahekaartide raadioversioon. Nõuded: ärge tuginege CSS-ile konkreetsetele ID-dele (CSS ei peaks teadma konkreetseid ID-sid), paindlik mis tahes arvu tundmatute vahelehtede jaoks, juurdepääsetav. Hoiatused: kuna need on märkeruudud, ei saa vahekaarte vahekaardil kasutada, peate kasutama nooleklahve ...

Ühilduvad brauserid: Chrome, Edge, Firefox, Opera, Safari

Vastutulelik: jah

Sõltuvused: -

Umbes koodi kohta

CSS -i vahelehed

Puhtad CSS vertikaalsed sakid.

Ühilduvad brauserid: Chrome, Edge, Firefox, Opera, Safari

Vastutulelik: ei

Sõltuvused: -

Umbes koodi kohta

Puhtad indikaatoriga CSS -vahelehed

Ühilduvad brauserid: Chrome, Edge, Firefox, Opera, Safari

Vastutulelik: jah

Sõltuvused: -

Umbes koodi kohta

Animeeritud üleminekukaardid

Animeeritud üleminekukaardid märkeruutudega.

Ühilduvad brauserid: Chrome, Edge, Firefox, Opera, Safari

Vastutulelik: jah

Sõltuvused: -

Umbes koodi kohta

Puhtad CSS -värvikaardid

Puuduvad sildiga puhtad CSS -värvikaardid.

Ühilduvad brauserid: Chrome, Edge, Firefox, Opera, Safari

Vastutulelik: jah

Sõltuvused: -

Umbes koodi kohta

Ainult CSS -i vahelehed

Materjali kujundus Ainult CSS -i vahelehed.

Ühilduvad brauserid: Chrome, Edge, Firefox, Opera, Safari

Vastutulelik: jah

Sõltuvused: -

Umbes koodi kohta

CSS3 vahelehed

Soraxi tundlikud puhtad CSS3 vahelehed.

Ühilduvad brauserid: Chrome, Edge, Firefox, Opera, Safari

Vastutulelik: jah

Sõltuvused: -

Umbes koodi kohta

Vahekaartide juhtimine HTML -i ja CSS -i abil

Siltidel klõpsamine on tegelikult sama, mis sisestuskastidel. Raadiosisendid on CSS -iga peidetud. Raadio valimisel ilmuvad nende uudishimulikud vahekaardi sisu naabrid. See on kõik! Ainus puudus on see, et te ei saa valitud vahelehte stiilida ilma mõne JS -i kasutamiseta, kuid see ei tohiks olla väga suur asi.

Ühilduvad brauserid: Chrome, Edge, Firefox, Opera, Safari

Vastutulelik: jah

Sõltuvused: -

Umbes koodi kohta

Puhtad CSS -i vahelehed

Lihtsalt HTML ja CSS.

Ühilduvad brauserid: Chrome, Edge, Firefox, Opera, Safari

Eelmise postituse jätkamiseks valikuelementide kujundamise kohta tahaksin teile öelda, kuidas seda täielikult teha tundlikud vahelehed ilma javascriptita, absoluutne positsioneerimine ja linkide häkkimine.

Alustuseks tahaksin öelda, et ma ei kutsu JavaScripti kasutamisest loobumist ainult CSS -i kasuks, allpool esitatakse ainult üks vahekaartide rakendamise viisidest. On palju olukordi, kus see lähenemine teie jaoks ei tööta ja kus te ei saa ilma JS -iga hakkama, kuid nüüd pole see sellest.

Mõistame, mida tahame töö tulemusena näha ja milliseid nõudeid me sellele esitame:

Töötamine ilma JavaScriptita,
Vahekaartide arv ei ole seotud (saame kasutada ühte vidinat erinevatel lehtedel, millel on erinev sisu),
Kohanemisvõime,
Maksimaalne ühilduvus brauserite ja platvormide vahel,
Kõige mugavam ja arusaadavam kasutajaliides,
Vahekaartide sisulisele sisule pole piiranguid, olgu see siis tekst, meediasisu või paigutus vahekaardil.

Visuaalselt peaksite saama midagi sellist:

Enne oma versiooni näitamist vahelehed ilma JS -ta, Tahaksin rääkida mõnest rakendusest, mis selle probleemi lahendamise käigus leidsin.

Variant üks

Inimene, kes selle meetodi välja pakkus, tahtis selgelt kasutajaid nalja teha või on ta üks redditi külastajatest, kes lõi need väga "mugavad" helitugevuse regulaatorid. See lähenemine tekitab minus närvilise närvi.

Meetodi olemus on järgmine:

Vahekaartide pealkirjadena (nupud ise) kasutatakse atribuudis href linke, mis kirjutatakse vastava vahelehe id - div või mõne muu elemendi järgi. Aktiivse vahekaardi valimisel kasutatakse: pseudoklassi target.

See toimib nii:

Nagu näete, on meil selle meetodi kasutamisel probleeme:

Vahekaardil klõpsates hakkab leht hüppama, kuna brauser saadab meile, kuhu see link viib. Seda saab muidugi vältida, kuid ilma JS -iga, ükskõik kuidas.
Vahekaardi aktiivne pealkiri ei paista silma, seda saab teha, kuid see on äärmiselt problemaatiline.
Esialgu pole aktiivseid vahekaarte (kuna me pole veel linkidel klõpsanud) ja peame kasutama häkkimist ja tegema kolmanda vahekaardi aktiivseks, ei tööta esimese sellisel viisil valimine.
Väga vastuoluline kohanemisvõime: jah, vahekaardid paigutatakse ekraani ahenedes uuele reale ümber ja vahelehe sisu on sellega kitsendatud, kuid see ei tundu eriti kena. Meediumipäringud võivad selle probleemi lahendada, kuid arvestades, et me ei vali vahekaartide arvu, jääb probleem mõne kuvasuuruse juurde.

Teeme põhjendatud järelduse: see meetod ei sobi meile, sest ei vasta enamikule nõuetest. Rakendus on kohutav ja ma ei soovitaks seda kasutada.

Teine võimalus

See meetod vahelehtede loomine ilma JavaScriptita on juba praktilisem, kuigi selle rakendamisel on ka mõningaid probleeme. Meetodi olemus on järgmine: vahekaartide pealkirjade jaoks kasutatakse märkeruute ja siltide elemente ning kasutades: märgitud pseudoklassi ja mõnda muud div-elementi, saame näidata ainult aktiivse vahelehe sisu ja peita kõik ülejäänud:

Vahekaardi ümbrise sisend: märgitud + silt + .tab-element (kuva: plokk;)

Vahekaart - ümbrise sisend: märgitud + silt +. sakk - kirje (kuva: plokk;)

See toimib järgmiselt.

Nagu näete, kasutame selles näites positsiooni: absoluutne; , et asetada vahelehtede pealkirjad ülaosale ja vahelehe sisu alla. See tekitab teatud probleeme:

Täielik kohanemisvõimetus. Kui ekraani suurust muudetakse, langevad vahelehed alla ja vahelehe sisu sulgub. Selle saab parandada: et sakke horisontaalselt kerida, siis selline lahendus toimub, aga mulle see väga ei meeldi.
Kuna me kasutame vahelehtede sisu kuvamiseks absoluutset positsioneerimist, peame vahekaartidele määrama kindla kõrguse, vastasel juhul kattuvad need allpool oleva sisuga (näites näha), mis tähendab, et me ei saa seda lähenemist kasutada, kui vahelehtede arv pole ette teada.

Muidugi võib mõnel juhul seda meetodit kasutada, näiteks kui teate ette vahelehtede arvu ja nende sees oleva sisu hulka. Kuid me otsime universaalset lahendust, seega pole see lähenemine meie puhul rakendatav.

Lahendus

Kolmas võimalus, mis on ka lahendus, on teise meetodi modifikatsioon. See toimib samamoodi, kuid me ei kasuta rubriikides absoluutset positsioneerimist ja ujuki omadust.

Selle meetodi puhul kasutame vahekaartide ja nende sisu paigutamiseks nüüd trendikat flexboxi. Flexboxi ilu seisneb selles, et saame määrata, milliseid esemeid esmalt kuvada ja milliseid lõpus kuvada. Seda saab teha tellimuse atribuudi abil: 1; mis on vaikimisi null.

Vahekaartide reageerimisvõime saavutatakse ka paindliku kinnisvara paindliku kasvatamise kaudu: 1; , mis võimaldab sakke sirutada kogu sisu laiuse ulatuses, nii et me ei pea muretsema erineva arvu vahelehtede kuvamise pärast. Samuti võime iga vahelehe sisse paigutada mis tahes ja erineva mahuga sisu, see ei mõjuta sisu kuvamist pärast neid.

See meetod töötab kõigis kaasaegsetes brauserites, sealhulgas mobiilseadmetes. Paljude kinnistute puhul ebatavalisest kasutatakse ainult Flexboxi ja seda on juba ammu laialdaselt toetatud. Brauserites FireFox, Chrome, Safari ja Opera pole ma vahekaartide tööga probleeme leidnud.

Seda lähenemist saate kontrollida saidil jsfiddle või oma projektides. Mul oleks hea meel näha kommentaarides muid ettepanekuid selle probleemi lahendamiseks.

TPL_TPL_FIELD_SCROLL