Du kan bygga några riktigt snygga saker med jQuery. Den senaste versionen bunt uppdaterar många buggar och till och med tips till stöd för en ny jQuery Mobile. Med frontend-skript kan du bygga praktiskt taget alla typer av webbapplikationer. Men mer specifikt ser vi på att bygga ett litet modalboxfönster.
Jag har utformat funktionaliteten för att se ut som en privat meddelandes lösning. Det här är perfekt att implementera på en användarprofil sida eller författarens sida i en blogg. Vi kommer att använda några praktiska CSS3-tekniker tillsammans med att koda sidstrukturen i HTML5. Du behöver inte vara en mästare jQuery artist för att förstå denna handledning, men det skulle inte skadas för att borsta på grunderna. Kolla in mitt live demo-exempel och ladda ned projektkällkoden nedan.
Testa
Visa Live Demo - Hämta källa
HTML-strukturen
Innan vi dyker in i jQuery låt oss undersöka lite av HTML först. Om du är intresserad av att granska hela dokumentlayouten föreslår jag nedladdning från källkoden. Men jag skulle vilja fokusera på HTML-koden för modalbox för ytterligare förklaring.
Jag delar mallen med HTML5 .containmsg som rymmer vår modala låda och knapp för att visa / dölja innehållet. Modalbehållaren använder klassen .mainCompose. Det här är också hur vi inriktar oss på jQuery - låt oss titta på HTML-koden för detta nedan.
** Ange lite text!
Skicka meddelande
Inom vårt formelement finns inga överraskningar. Ett litet märke och inmatningsfält. Också ett till: fält med en länk till användarens sida. I den här demo kopplade jag till min DesignShack-författarsida. Det är dock inte nödvändigt. Du kan till och med ta bort länken helt och hållet fortfarande CSS-stilar in-tact. Användarlistan är kodad som ett UL-element så att du kan stödja meddelanden till mer än en person.
Nu innan vi dyker in i jQuery finns det en mer teknik jag ville täcka. Om du klickar på komponentikonet märker du att vår modalbox har en liten triangeltips högst upp. Du kan använda bilder för denna teknik, men det finns ett enklare alternativ med strikt CSS.
Cool CSS Tooltip Triangles
Det finns en liten div som visas direkt ovanför meddelandeformuläret. Detta innehåller två klasser märkta calloutUp och calloutUp2. Den förra beter sig som en fortsättning på vår yttre kant (den mörkare solbränna) medan den senare ansluter till mitten av vårt formområde. Genom att använda båda kan vi skapa matchande trianglar i en verktygstypstilkoppling.
Detta fungerar på grund av en inställning i CSS som gör att alla gränser kommer ihop i mitten som en triangel. Så vi kan sätta båda dessa divs att ha ingen höjd eller bredd, men massiva gränser. Om vi bara ger färg till en av gränserna och resten är genomskinliga skapar vi triangel-effekten här. Kolla in CSS-klasserna för båda samtalen.
Jag ställer också in detaljer för de omgivande gränserna, eftersom det här håller div-blocket ser fyrkantigt. Annars skulle vår form vrida rektangulär, och då skulle våra trianglar komma ut lutade med skarpa kanter. De z-index egendom är också viktigt så att vår inre spets kommer att ligga över ytterspetsen. De andra stilarna används för att mockup våra teckensnitt i demo-exemplet, absolut inget extraordinärt.
Utveckla interaktioner med jQuery
Nu kan vi dyka in i de goda grejerna! Om du har använt jQuery innan du säkert kommer att känna till att du startar ett nytt dokument. Först inkludera den senaste versionen av jQuery till din sida. Om du inte vill ladda ner och värd filen själv erbjuder Google alla versioner av jQuery live för utvecklare. Det senaste jag använder är bibliotek 1.6.2 mini.
När det är med bör du öppna en annan skriptikett för JavaScripting. Jag bestämde mig för att skriva min kod i huvudblokken på samma HTML-sida. Men du kan alternativt flytta detta till kroppen, sidfoten eller till en extern fil. De första fragmenten av kod jag har lagt till nedan.
Vi kallar vår $ (Dokument) .ready () funktionen för att hålla bort alla åtgärder tills sidan är klar att ladda. Den första uppgiften är att dölja 3 sidelement direkt. Dessa är .mainCompose att dölja vår modalbox, .lastare att dölja ajax-laddningsgiften, och #errortxt som bara visar om användaren inte har skrivit in något och försöker skicka in formuläret. Vart och ett av dessa element visas bara under vissa förutsättningar så det är bäst att hålla dem gömda omedelbart.
Och äntligen söker vår första skriptåtgärd en händelsehanterare. De .komponera klassen är faktiskt knuten till vår komponera bild trots att det inte finns någon ankarlänk att klicka på. jQuery kan hantera klickhändelserna och ringa slideToggle () på något sätt. Nu är den sista koden som ska undersökas hur vi kan dra data ut från användarinmatning.
Bearbetning av modalformen
Vi söker bara efter en enda sista händelsehanterare. Detta är knutet till vårt klickarhändelse .sendbtn, som faktiskt är knuten till en ankare länk i vår modalbox.Direkt bredvid detta är vår animerade ajax .gif-bild som var dold strax efter att sidan laddats.
Exekveringsfunktionen direkt efter att knappen har klickat har nu en parameter. funktion (e) passerar bara förekomsten av vår klickhändelse direkt in i funktionen som en variabel. Vi använder den här händelseväljaren för att ringa metoden preventDefault () så att vår länk inte fungerar som en länk. Vi gömmer också omedelbart .sendbtn och ersätter den med vår .loader-bild.
Nästa passerar vi in i en standard om / else klausul kontrollerar #mymsg textarea värde. Om det inte finns någon text så vet vi att användaren inte har skrivit något. I det här fallet visar vi vårt felmeddelande och återställer laddningsbilden medan du visar vår knapp igen. Annars kommer vi in i annars {} klausul som förutsätter att vi kan skicka meddelandet!
Jag har inte skrivit någon Ajax / PHP-kod eftersom den hoppar utanför det här handledningen. Men du bör kolla in funktionen jQuery ajax () som kan påskynda uppbyggnadens utveckling tiofaldigt. Jag har avsatt en variabel formQueryString som kan användas för att skicka formulärdata till ett Ajax-samtal. I stället ska jag bara slutföra estetiken i en liten funktion finalSend ();
Vad vi vill göra nu är nära vår modalkassa och visa en liten kontrollikon för att låta användaren veta allt är bra och dandigt. Jag har använt .delay () för att hålla modalboxen öppen i 1 sekund innan vi ringer till vår sista slideToggle () -metoden. Detta har bara lagts till för att visas i denna handledning så att du kan se hur det ser ut som väntar på att servern ska laddas. Om du vill behålla dina användare som väntar en extra sekund kan du lämna det här - men det tjänar lite punkt annars!
Efter bildspelet har jag lagt till en återuppringningsfunktion. Den innehåller bara 2 linjer med grundläggande kod. Först riktar vi oss till komponentikonet och ändrar klassen från .komponera till .sent, sedan göm det från vy. Slutligen riktar vi oss mot #composebtn vilken är container div av vår ikon och lägg till en ny kryssmarkeringsymbol. Nu vet våra användare att meddelandet har skickats och vi har knappt använt någon fastighetsskärm!
Visa Live Demo - Hämta källa
Slutsats
Denna handledning borde ha fått dig lite mer bekväm att bygga en skalbar modalbox i jQuery. Vi har byggt några bra CSS-stilar och använt vissa grundläggande formulärbehandling för att förbättra användarens interaktion. Det finns säkert mycket du kan lägga på, men vårt exempel lägger grundstrukturen och banar vägen för högre möjligheter.
Om du fortfarande vill kolla in min demo eller ladda ner källkoden kan du göra det nedan. Läsningskoden kan vara förvirrande efter långa perioder, så jag rekommenderar att du hämtar källan direkt för att få en bättre uppfattning om hur den här lilla appen fungerar. På samma sätt om du har några frågor eller idéer kan du erbjuda dem på diskussionsområdet.