Många onlinebutiker och e-handelswebbplatser använder en liten detaljeringspanel för att erbjuda mer information om en produkt. Jag kommer ihåg detta från de första dagarna med att bläddra i Mall Monster, och det har blivit en gemensam trend för moderna webbdesigners.
I denna handledning vill jag förklara hur vi kan duplicera denna effekt med hjälp av en mycket grundläggande kod. Jag har tillhandahållit två olika versioner, en byggd på jQuery och en annan byggd med CSS3. Det finns fördelar för var och en och du kan ladda ner en kopia av min handledningskod för att se vilken du föredrar.
jQuery Demo - CSS3 Demo - Hämta källkod
Strukturera sidan
Min jQuery-version har en något annorlunda HTML-inställning än CSS3-anpassningen. Självklart behöver vi en kopia av jQuery-biblioteket, men ännu viktigare är hanteringen av detaljeringspanelen. Med JS ringer jag ett enda HTML-element för att ersätta det inre HTML-innehållet. CSS3 kräver unika div-element bredvid vart och ett av miniatyrlänkarna och lägger därmed mer in i din sida.
Denna kod finns i kroppen i min jQuery-version. Miniatyrerna delas upp i listobjekt där vi extraherar information för detaljeringspanelen från HTML-attribut. Dessa detaljer finns i ankarlänken, bildtaggen och en relaterad metatagg som innehåller innehållsbeskrivningen. Jag använder också en HTML5-dataattribut för publiceringsdatumet.
Mot botten märker du en enda container div med ID # Detaljer-rutan. När du riktar in det här objektet i jQuery kan vi ersätta inre värden för svängningsdetaljerna. Låt oss nu titta på ett listelementelement från CSS3-versionen.
Jag har ändrat ID till en klass av .details-rutan eftersom vi behöver flera intilliggande div bredvid varje miniatyrbild. CSS3 kontrollerar när användaren svävar på länken och visar syskon div, som redan innehåller all information. Så en annan fördel när du använder CSS3 är att vi inte behöver dra ut information från attribut varje gång måldisplayen ändras.
Jag vill börja med CSS3-exemplet eftersom min jQuery-kod är lite mer komplicerad. Detta kan vara en annan anledning att hålla fast vid frontend-HTML / CSS-versionen, även om den här effekten kommer att gå vilse i äldre äldre webbläsare.
Höger Detaljer med CSS3
Så här fungerar det hela med ett plus (+) tecken i väljaren. CSS kommer att rikta sig till det sista elementet i väljaren, i detta fall vår .details-rutan som finns direkt bredvid varje ankarlänk. Jag har givit länkarna en klass av .hvrlink så de är enklare att identifiera.
Jag hoppas att det inte finns något för komplicerat i det här inledande installationsblocket. Varje listobjekt flyttas till vänster med en bred marginal för att placera endast två miniatyrbilder per rad. Dessa listobjekt innehåller miniatyrlänken och informationsfönstret. Vi ger
Vad du kanske tycker är intressant är positionförändringen mellan de två första länkarna. För alla andra länkar har jag lagt till en klass av .höger sida på detaljpanelbehållaren. Ursprungligen trycker vi på svängpanelen över 290px till vänster eftersom det här är längden på miniatyren. Men i den högra kolumnen får vi den här panelen svänga långt utanför skärmen, så i stället vill vi att den ska visas över till vänster. Detta använder en negativ vänster position baserat på hela 530px bredden på detaljeringsrutan själv.
Dessa sista två selektorer är allt vi behöver för att få hovinstallationen korrekt. När användaren musar över en miniatyrlänk visar vi omedelbart det relaterade .details-rutan. Det andra kvarteret visar att det visas även när användaren slår av miniatyrbilden på detaljerna så att den alltid visas tills användarna helt flyttar ut ur den specifika listan.
Flytta till jQuery
Låt oss ta itu med JS-koden som finns längst ner i mitt original index.html fil. Mycket av CSS-koden är liknande, men det är ännu kortare och lättare att läsa eftersom vi inte behöver absoluta värden. Det här hanteras i stället av jQuery-beräkningar som kan verka komplicerade - men det är mycket meningslöst när du tänker på det.
Jag riktar in miniatyrbilden för lyssnaren för lyssnare och när en gång det triggas sätter vi upp en hel massa variabler.Det första stora kodblocket får all viktig information som vi behöver lägga till inloppspanelbehållaren.
Nästa måste vi samla koordinater för att förstå var denna detaljeringspanel ska visas. Y-koordinaten ändras inte baserat på positionen, men x-koordinaten kommer att svänga om vi svävar i den högra kolumnen. Jag har ett logiskt uttalande som kontrollerar den nuvarande bildpositionen dividerad med hela fönstret med $ (Fönster) .width (). Om bilden är bortom 50% av den totala sidbredden behöver vi den visa över till vänster sida istället för höger.
Dessa nästa uppsättning kod ersätter interna HTML-värden i detaljrutan med hjälp av variabler som definierats tidigare. I slutet uppdaterar vi inline CSS-egenskaper för att ändra display: block och få det att visas på sidan. När du sveper av miniatyren kommer den automatiskt att dölja skärmen igen, om inte vi svävar på detaljeringsrutan själv. Denna svängare kommer att fångas med hjälp av en helt separat händeloggare som kräver lite knepig logik.
Lägg märke till att jag använder två separata .on () metoder som är fästa vid samma jQuery-väljare. Du kan överväga att koppla ihop dem till en jQuery-kedja tillsammans med andra liknande evenemangslyttare. När vi svävar behöver vi bara behålla panelen som ett blockelement. Men när vi lämnar detaljeringspanelen vill vi bara gömma det när användaren inte svävar på samma miniatyrbild som används för att visa i första hand.
Variabeln e returneras från varje mouseout-händelse och berättar vilket nytt element som svävar. Tillämpa fastigheten parent Vi kan kolla var det här nya elementet finns. Jag har fyra separata logiska kontroller i detta uttalande, och tre av dem kontrollerar objekt i detaljrutan. Det variabla namnet detta hänvisar till # Detaljer-rutan.
Vi måste kontrollera om användaren svänger på h3-elementet, stycket eller till och med bilden (som är inbäddad i en ankarlänk och en div). Om så är fallet gömmer vi inte något.
Jag kontrollerar också med nodename egendom om användaren svävar av detaljeringsruten i kroppen. Om noden returnerar IMG ska den inte försöka gömma någonting direkt. Det här är mer en hackad lösning eftersom de enda bilderna i min demo är relaterade till miniatyrerna själva. Så när du svävar på bilden vill vi fortfarande hålla panelen uppehållen, annars blir den dold med jQuery's .css () -metod.
Jag har inte kunnat lösa med en bättre lösning men jag skulle gärna höra feedback från andra utvecklare. Det kan vara möjligt att kontrollera mot bildklassen, men tyvärr kan du inte göra det med a nodename fast egendom. Du hittar min kommenterade kod console.log (e.nodeName) som du kan köra för att kontrollera vilka egenskaper som återvänder till webbläsaren.
jQuery Demo - CSS3 Demo - Hämta källkod
Stängning
Dessa tekniker är i allmänhet enkla att förstå om du är bekväm i frontend webbutveckling. CSS3 ger en enkel lösning, men den fungerar bara korrekt i webbläsare som är kompatibla med standarder. Du kommer märka att båda versionerna är i grunden samma för besökarens perspektiv. Prova detta i ditt nästa webbprojekt och se vad du kan bygga ovanpå min mall.