Inmatningsknappar används i webbformulär där en användare behöver välja ett alternativ från en större samling. Detta händer ofta med unika värden som nyhetsbrev prenumerationer, profilinställningar och inlämningskategorier. Jag har alltid gillat ingångsknapparna för gamla skolans Digg-stil där du klickar på en länk för att välja din berättelsekategori.
I denna handledning vill jag visa hur vi kan bygga ett liknande gränssnitt med CSS3 och jQuery. Alla ingående radioknappar finns fortfarande i själva formuläret, men de är gömda på sidan. I stället uppdaterar vi det valda valet med hjälp av JavaScript och har till och med möjlighet att visa detta värde i HTML (eller returnera det till ett backend-skript). Kolla in min provdemo för att få en idé för vad vi bygger.
Live Demo - Hämta källkod
Bygga webbsidan
Först måste vi hämta en lokal kopia av jQuery och inkludera en länk till ett externt CSS-dokument som heter styles.css. JS-koden är inte för komplicerad, men du kan dra nytta av att flytta dem till en separat .js-fil. Det beror på om din webbplats kräver ytterligare skript som skulle raka bort tiden när du gör sidan.
Nu innehåller inre sidokroppen ett litet antal viktiga delar. Vi har en span med ID #radiovaltxt vilket är hur jag visar den valda ingången. När en användare klickar på en av sidlänkarna uppdateras detta spänningsvärde med det aktuella valda inmatningsvärdet. Under det här har jag skapat en ny form som inte laddar någonting - det är mer en platshållare att se hur HTML ska se ut.
Du hittar div #radiobtns innehåller ett antal div rader som vidare innehåller oorderade elementlistor. Varje rad är baserad på ett ämne av en enda kategori och användaren kan välja ett av alternativen för att markera den valda kategorin. Jag kopierade bara över en rad länkar men de är alla strukturerad mycket liknande.
En viktig del att förstå är att ankarlänk-ID matchar upp till ett motsvarande ingångsknapps värde. Så här kan vi bestämma vilken länk som har klickats och hur det matchar radionvalet. Du hittar dessa faktiska inmatningar som ligger inom en div #fullradios längst ner i formuläret.
Jag har dem dolda som standard och hela syftet är att aldrig visa dem på sidan. Om användare kan interagera med vårt eget anpassade gränssnitt, är det aldrig något behov av att manipulera radioingångarna. Beviljas att vi i stället kan bygga inmatningarna kopplade till en etikett som inte kräver någon jQuery. Men effekten är också svårare att dra av och kräver CSS3-kompatibla webbläsare.
Styling the Cat Links
Mitt standardformat innehåller alla typiska återställningar och sidstrukturer som du förväntar dig. Inmatningsfälten är gömda med display: none genom att rikta in parentes div-elementet. Spänntexten är också utformad för att visas naturligt centrerad mot toppen av sidan. Du brukar inte använda det här på en levande webbplats utan istället överföra värdet till formuläret med hjälp av ett dolt fält.
Varje rad har en enda oordnad lista och det allra första objektet ges en klass av .förälder. Så här har jag organiserat listan över kategorier. Föremålet i sig är inte en länk utsedda för varje ingång. Du kan ändra detta i din egen design, men det är mer meningsfullt att använda en typ av förälderklistermärke för att definiera valen. Detta föräldraobjekt har en fast bredd på 110px för att ge mer utrymme mellan länkarna.
Jag skrev också en anmärkningsvärd klass av .sel som appliceras på det valda länkobjektet. När en användare klickar på en av länkvärdena behöver vi dem att veta att den har valts och bekräftats. Den här valda klassen kommer att tas bort och appliceras på nya länkar som användaren växlar mellan kategorier.
Inmatningsval med jQuery
För att manuellt välja och avmarkera radioknappar måste du dyka in i jQuery lite. Det finns många populära frågor om Stack Overflow som adresserar denna idé, och teknikerna har förändrats över de olika iterationerna i jQuery's library. Det här skriptet finns längst ner på index.html-sidan och jag slår ner det i segment för att förstå.
När en användare klickar på en av dessa länkar använder vi omedelbart händelsen.preventDefault () som passerar i händelsevariabeln för klick. Detta stoppar HREF-värdet från att ladda, så vi får inte sidan hoppa i samband med hashed-länkar. Variabeln catid är en sträng som bildas i syntaxen för en jQuery-väljare.Det tar länk-ID och omformar det till ID-värdet för motsvarande radioutgång. Den andra variabeln checkedinput får värdet av den aktuella valda radioen - om inget väljs får vi ett returvärde av odefinierad.
Så nu kan vi bryta mer in i den logiska koden genom att först kontrollera om det inte finns något som redan valts. I det här fallet använder vi jQuery's .prop () -metod för att ställa in den markerade egenskapen. Annars riktar vi oss mot varje enskild radio med input [name = 'kategori'] och ta bort det markerade alternativet så det återgår till inget val. Då uppdaterar vi baserat på den senast klickade radiolänken.
Efteråt skapar jag en annan variabel newval som kontrollerar det aktuella valda radiovärdet igen. Om det här värdet matchar länkens ID så vet vi att det har blivit kontrollerat och vi visar det nya värdet i HTML. Det här steget kommer antagligen inte vara användbart på någon levande produktionswebbplats - men det är trevligt för den här demoen att se hur allt fungerar bakom kulisserna.
Den här sista delen av koden handlar om att uppdatera den aktuella valda länken. Om den nuvarande länken redan har en .sel klassen är det redan valt och vi gör ingenting. Annars är det enklare att rikta in varje länk inuti #radiobtns och ta bort klassen, för att sedan uppdatera vår nuvarande länk med $ (This) .addClass (SEL).
Kom ihåg $ (Detta) är bara en platshållare för någon aktuell aktiv jQuery-väljare, och i det här fallet talar vi om klickhändelsen som utförs på någon av kategorilänkarna.
Live Demo - Hämta källkod
Jag kan bara föreställa mig de många lösningarna för varför utvecklare skulle använda radioutgångar. Moderna webbtekniker erbjuder så mycket i vägen för användargränssnittet, och det här är ett intressant sätt att anpassa en radioknappserfarenhet till något helt unikt.
Jag hoppas att denna handledning kan ge några idéer till webbutvecklare som arbetar med stora former och inmatningsfält. Du kan också ladda ner en kopia av min källkod för handledning för att se exakt hur det fungerar på din egen dator.