Digg är ett av de mest populära sociala nyheterna hittills. De får en massiv publik i miljontals medlemmar. Nyligen har företaget skurit en ny riktning med lanseringen av Digg v4. Hela systemet har ersatts med ny statistik och följare / efterföljande nätverk.
En av de mest anmärkningsvärda förändringarna finns i sidan estetik. Med lanseringen av Digg v4 ståtar med en helt ny design med ett unikt utseende. I denna handledning går jag över hur du kan skapa din egen Digg V4-stil inmatningsform med några grundläggande CSS3 egenskaper.
Vi använder också jQuery för att manipulera var och en av nyckelavdelningarna för en snygg animationseffekt. Vi använder inte några fina Ajax-samtal här, även om jQuery stöder sådan funktionalitet. Huvudformen vi använder bygger på Diggs aktuella inläggssida.
Live Demo - Hämta
Arbetar med CSS3 och jQuery
Eftersom det inte kan antas att det inte finns något speciellt krävs för att arbeta med CSS3. Vi behöver inte inkludera externa filer eller bibliotek eftersom de flesta moderna webbläsare kommer att stödja en nyare återgivningsmotor. jQuery måste inkluderas i vår fil. Lycklig för oss Google Code är värd för alla versioner av populära skript online.
Med hjälp av Google APIs-dokument kan vi börja arbeta med jQuery 1.4.1. Jag har inkluderat den minifierade versionen för att spara bandbredd på lång sikt (alltid en bra idé för produktionsmiljöer). Utöver detta behöver vi också våra kärnfiler. För att detta ska inkludera ett enkelt index.html, global.css för stilar och script.js för vår jQuery-funktionalitet.
Nakna strukturer
Vi kan först börja med vår HTML-kod. Det borde vara ganska enkelt men det gör inte ont för att bryta saker ner i sektioner.
Detta är huvudrubrikdelen av vårt HTML-dokument. Den innehåller all metainformation tillsammans med en XHTML övergångs doktyp. De enda filintegrationerna vi arbetar med är CSS och extern JavaScript-kod. Båda dessa filer lagras lokalt medan vår jQuery-karta finns med på http://ajax.googleapis.com/.
Därefter har vi några grundläggande kod för vår kärna kroppslayout. Detta kommer att inkludera rubriken Digg och logotypen på sidan. Detta inkluderar även vår lilla form med några inmatningsknappar och div-lådor.
Digg det AvbrytNästa bör det vara enkelt att täcka några av de vanliga CSS-frågorna. Det finns några egenskaper och ID som bör förstås bra när du redigerar ett liknande stilskript. Vi har också använt några CSS3 egenskaper som är nya till moderna webbläsare.
Nästa generations CSS
Vår fil börjar enkelt med att återställa marginaler och rubrik / kroppsstilar. Det finns verkligen inte mycket i vägen för teckensnitt, blockområden eller andra gemensamma element. Eftersom syftet med vår kod är handledningsdriven brydde jag mig inte om att skapa en omfattande lista över CSS-egenskaper.
Lägg märke till hur det finns en liten klass kallad? Sprite ?. Detta använder en master.png-fil som innehåller alla ikoner och grafik för Diggs layout. Detta är en spridningsteknik som används för att spara bandbredd och serversamtal för bakgrundsgrafik.
Längre ner på sidan har vi några nyare block relaterade till CSS3-frågor. Många av formulärets inmatningsfält och knappar innehåller effekter som genereras i webbläsare genom CSS. Som ett exempel har alla inmatade textfält en webbkit-box-skugga som har ett inmatningsfall.
Detta ger en 3-D-effekt till skillnad från många sett tidigare. De nya webbstandarderna skapar vacker tonalitet och med dessa CSS-egenskaper kan vi designa fantastiska gränssnitt.
Lite lägre vi har ett block med kod tillgodoses några klasser. inlämning-detalj-fältet och nu-redigering innehåller några intressanta egenskaper som bör undersökas lite längre. Ursprungligen har allt innehåll i en nuredigerande klass ingen bildskärm. Detta ändras med jQuery för att manipulera hur vi ska våra former.
Inlämningsformulär anges som standard för att se ut som etiketter. När du klickar på för att redigera dem ändrar vi klassen för moderklass till nuredigering och tar bort display: none; klausul.Härifrån kan vi med lätthet växla mellan de två staterna.
Dessa CSS-stilar kan fungera med nästan vad som helst. Du kommer att märka några fel i systemet direkt. Som ett kort exempel kommer inga knappar eller länkar inuti div att visa muspekaren på svävaren. I stället får du textfältet som används för att markera textblock - det här kan ändras genom CSSs marköregenskap.
Bygga vårt skript
JavaScript krävs är ganska enkelt att arbeta med. Lyckligtvis hjälper jQuery genom att raka bort många rader kod som krävs för att rikta och manipulera DOM-objekt.
Vi börjar med vår standardklara händelse och kontrollerar att vårt dokument är färdigt att ladda. Det här är ett mer exakt sätt att rikta in skriptutveckling eftersom allt vi verkligen behöver är en fullt laddad dokumentobjektmodell för att flytta. Många mindre tillgångar på hela sidan fortsätter att laddas, men istället för att vänta är vårt skript körbart direkt.
Inom våra färdiga funktionsparametrar passerar vi en ny fungera() utformad för att hantera händelse lyssnare. Dessa kommer att kontrollera att en viss händelse inträffar och när den gör det kommer den att köra koduppsättningen inuti en ny funktion.
Detta kommer att ge större mening med ett exempel, så låt oss börja med det första inmatningsfältet.
Den första raden kontrollerar vårt dokument för något element (er) med klassen? Edit-input? och binda en händelsehanterare till den (eller dem). Händelsen vi letar efter är ett klickhändelse vilket innebär att när användaren klickar på det här elementet kallar vi en annan funktion. I vår HTML-kod .edit-ingång är en klass som tillämpas på våra redigeringslänkar.
När funktionen börjar, drar vi klassnamnet från vårt inneboende moderelement. Vi tar också fast det aktuella ID-numret på länken för redigering, eftersom vi kan bestämma om vi redigerar titellistan eller beskrivningen. Längre ner har vi kod för att byta de två klasserna, vilket gör att vårt textfält kan redigeras.
Efteråt finns det några rader kod som behövs för att automatiskt fokusera textfältet och spara några resultat. Vi kunde ha använt ett Ajax-samtal för att spara data i en databas med varje klick, men detaljerna för att göra det varierar från det här handledarens räckvidd. Vi skulle också behöva stöd från ett backend-språk som PHP eller Ruby.
Det finns en liknande bindande händelse som är knuten till våra två formfältavdelningar. Detta kommer att söka efter textområdet som innehåller vår historiabeskrivning och fungerar på liknande sätt som ovan. Observera att du kan kedja flera händelsehögtalare på detta sätt för att skapa dynamiska formulärskript på några minuter.
Slutsats
Denna handledning har gett en stark översikt över nyare CSS3-tekniker och klassisk jQuery-funktionalitet. Vår slutprodukt ser mycket ut som Digg-formuläret utan att dra bilder från en URL som kräver Ajax-tekniker.
Alla CSS-stilar och mönster har skapats på ett mycket liknande sätt som Digg v4. Bättre än, många av kodblocken har gjorts enkla att kopiera och manipulera till din egen sida.
Som tidigare sagt har jag uppdaterat både live-demokoden och erbjöd en .zip-fil för nedladdning. Du kan kolla in min Digg-demokod här på DesignShack och ladda ner arkivet för dina egna verk. Om du har några frågor / kommentarer, ger dig gärna dina idéer i diskussionsområdet nedan.