Tre JavaScript-utdrag for verktøysettet ditt for webdesign

Dette innlegget inneholder en kort liste over tre nyttige JavaScript-programmeringsutdrag som jeg har brukt for å løse vanlige problemer som dukker opp når spesiell funksjonalitet blir bedt om på nettsteder. For eksempel vet vi alle som webutviklere at å åpne en kobling i et nytt vindu sannsynligvis er en av de minst morsomme onlineopplevelsene, men det er noen mennesker som liker og setter pris på det alternativet, og til tider har jeg kunder som ber om det . Dette er bare ett av skriptene som jeg inkluderer i dette innlegget, som du kan legge til i skriptbiblioteket og verktøysettet.

Åpne lenke URL i et nytt, endret størrelse vindu

Denne JavaScript onclick-funksjonaliteten har plass i spesifikke tilfeller, for eksempel når det er behov for tilleggsinformasjon, men ikke krever en full webside. Det er en slags pop-up, så det hjelper også hvis du inkluderer en "Lukk" -knapp i det resulterende vinduet, slik at brukere enkelt kan avvise den. Dette in-line skriptet lar deg endre flere alternativer, inkludert høyde, bredde, endring av størrelse, add-in rullefelt, verktøylinjer eller menylinjer, og lar deg også utelate noen av dem fra skriptet. Onclick JavaScript definerer et vindu1 tilsvarer windows.open med alternativene for å åpne html-filen 'newWindow.html', sammen med en 'advisorywindow', en bredde på 475 piksler x 286 piksler, størrelse som kan endres, bla, barer, verktøylinje og menylinje .

Den in-line skriptprøven som vises nedenfor, kan legges til hvilken som helst URL du ønsker å ha åpnet i et modifisert vindu:

 
Resultatet vises i figur A (Chrome v 21.0.1):

Figur A

Lukk og skriv ut knappene

Som jeg nevnte ovenfor, den ekstra funksjonaliteten til alternativet Lukk og skriv ut hjelper brukere med to praktiske funksjoner, og disse er spesielt fordelaktig for brukere som vil ha muligheten til å skrive ut en online uttalelse, kvittering eller andre elementer som en billett eller kupong, og deretter enkelt lukke vinduet når handlingen er fullført. Følgende skjema bruker innleggsmetoden som heter " CloseOrPrint " med en innsendingstype, en verdi av "Lukk", en onClick-handling av " self.close ()" . Skriptet inneholder også en JavaScript document.write-funksjon med innsendertype, en verdi på Print og et Onclick-alternativ for å "skrive ut" :

Dynamiske menyer

Brukere liker muligheten til å velge innganger og muligheten til å endre innhold på farten. i dette eksemplet vil vi bruke månedene i året, og når måneden er valgt, blir det tilknyttede antall dager i den måneden befolket. Denne lignende funksjonaliteten finnes også på mange nettsteder som tilbyr en meny med land og deres tilknyttede stater eller provinser, eller i tilfelle av USA, en liste over stater med deres tilknyttede prestegjeld eller fylke som er oppført. Den dynamiske menyfunksjonaliteten som er beskrevet her er inspirert av den visuelle hurtigstartboken JavaScript, Eight Edition.

Først vil vi sette opp dagene i måneden som en matrise med variabelen som heter monthDays som vist i kodebiten nedenfor. Arrayet inneholder de 12 verdiene (totale dager i hver måned) i de 12 månedene, som er riktig antall dager i hver gitt måned i rekkefølge fra januar til desember: (Merk: i et skuddår må verdien for februar til oppdateres i varianten monthDays slik den vises nedenfor):

 var månedDager = new Array (31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); 

Så setter vi opp variabelen for måneden ved å bruke denne som er den måneden brukeren velger fra listen, og så blir den lagret som monthStr, som vist i kodebiten nedenfor:

 var monthStr = this.options this.selectedIndex. verdi; 

Deretter oppretter vi en if-setning for verdien av monthStr er lik "", og deretter kan brukeren velge måned fra rullegardinmenyen og ikke navnet "Måned"; denne linjen kontrollerer for å være sikker på at verdien av monthStr ikke er en nullverdi. Hvis betingelsen er sann, blir monthStr omgjort til et tall med parseInt (monthStr) -metoden, og deretter blir variabelen theMonth satt til resultatet.

 if (månedStr! = "") { 
 var theMonth = parseInt (monthStr); 

Til slutt, for å endre Dag-menyen, satte vi alternativlengden til null, som fjerner alt som skjedde der før, slik at menyen starter friskt for hver forekomst. Sløyfen nedenfor behandler antall dager som er valgt av måneden og legger til et nytt alternativ for hver dag. Alternativet passeres av det nye alternativet (i + 1 ) slik at det viser 1 til 31:

 document.getElementById ("dager"). options.length = 0; 
 for (var i = 0; i 
 document.getElementById ("dager"). options i = nytt alternativ (i + 1); 

HTML-en setter opp skjemahandlingen som vist nedenfor:

 Måned 
 januar 
 februar 
 mars 
 april 
 Kan 
 juni 
 juli 
 august 
 september 
 oktober 
 november 
 desember 
 Dag 

Det fullstendige JavaScript-kodebiten vises nedenfor:

 windows.onload = initForm; 
 funksjon initForm () { 
 document.getElementById ("måneder"). valgtIndex = 0; 
 document.getElementById ("måneder"). onchange = populateDays; 
 } 
 funksjon populateDays () { 
 var månedDager = new Array (31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); 
 var monthStr = this.options this.selectedIndex. verdi; 
 if (månedStr! = "") { 
 var theMonth = parseInt (monthStr); 
 document.getElementById ("dager"). options.length = 0; 
 for (var i = 0; i 
 document.getElementById ("dager"). options i = nytt alternativ (i + 1); 
 } 
 } 
 } 
Utgangen er vist i figur B :

Figur B

JavaScript gir en dynamisk innflytelse til nettsteder og gir brukerne dine flere interaksjonsalternativer når de besøker. Disse tre utdragene forenkler prosessen med å inkludere dem for brukerne dine.

© Copyright 2020 | mobilegn.com