HTML5: nytt dialogelement. Opprette modale dialogbokser
Svært ofte brukes dialogbokser til å legge inn data i Windows-applikasjoner. Disse vinduene inneholder kontroller der dataene som kreves av applikasjonen legges inn, og OK- og Avbryt-knappene, hvorav den første bekrefter datainntastingen, og den andre kansellerer.
Det er to typer dialogbokser:
- Modale dialogbokser blokker alle andre vinduer i applikasjonen, det vil si at brukeren ikke vil få tilgang til noe annet vindu før han lukker dialogboksen ved å klikke OK eller Avbryt. Vanligvis brukes modale dialogbokser for å legge inn data som er avgjørende for at applikasjonen skal fortsette å kjøre. For eksempel gjøres filåpningsdialogen alltid modal.
- Modellløse (modellløse) dialogbokser ikke blokker andre programvinduer. Brukeren kan fritt bytte mellom en slik dialogboks og et hvilket som helst annet programvindu. Modeløse dialogbokser brukes mye sjeldnere enn modale. De brukes til å spesifisere driftsparametere som ikke er kritiske for at programmet skal fortsette å kjøre og kjøre ulike handlinger med hovedvinduet eller et dokument lastet inn i det. Dermed gjøres søkedialogen alltid modellløs.
Internet Explorer lar oss bruke både modale og modellløse dialogbokser i HTML-applikasjoner. Nå skal vi se på hvordan dette gjøres.
Merk:
Før du leser denne artikkelen, anbefales det på det sterkeste at du leser de tre foregående artiklene i serien om Internet Explorer HTML-applikasjoner.
1. Forbered en HTML-testapplikasjon
La oss lage et enkelt HTML-tekstredigeringsprogram uten bjeller og fløyter. Den vil inneholde et stort redigeringsområde, hvor teksten faktisk skrives inn, og Parameter-knappen, når du klikker på den, vil en dialogboks for å angi parametere vises.
Settet med parametere som brukeren kan spesifisere vil være lite. Dette er først og fremst tekstbrytingsfunksjonen i redigeringsområdet - enten den vil være aktivert eller deaktivert. Og tekstfarge; la brukeren kunne velge mellom svart, blått, grønt og rødt.
Vi vil implementere denne applikasjonen i to versjoner: den første vil bruke en modal dialogboks for å angi parametere, og den andre vil bruke en modellløs dialogboks.
HTML-koden for applikasjonen er gitt nedenfor.
Tekstredigerer
window.resizeTo(710, 490);
La oss lagre denne applikasjonen i to filer: Textedit_modal.hta (versjon med en modal dialogboks) og Textedit_modeless.hta (versjon med en modellløs dialogboks). Og la oss komme i gang...
2. Hvordan dialogbokser implementeres
Men først et kort teoretisk kurs. For det første implementeres innholdet i enhver dialogboks – både modal og ikke-modal – i form av en vanlig nettside. Denne nettsiden er lagret i egen fil med htm- eller html-utvidelsen (så vel som innholdet i individuelle "vinduer" i applikasjonen, hvis opprettelse ble beskrevet i den andre artikkelen i serien).
Når vi åpner en modal dialogboks, kan vi sende noen data til den (mer om dette senere). Dette kan for eksempel være gjeldende verdier for applikasjonsparametere, som deretter vil bli erstattet med kontrollene i dialogboksen.
Når vi lukker en modal dialogboks, kan vi sende noen data til vinduet som åpnet den. Når det gjelder en innstillingsdialog, kan dette være brukeroppgitte parameterverdier.
Når vi åpner en modellløs dialogboks, kan vi ikke sende noen data til den, og vi kan heller ikke returnere dataene som er lagt inn i den til vinduet som åpnet den. Imidlertid kan vi få tilgang til dette vinduet fra vinduet som åpnet det, og omvendt "komme" fra dialogboksen til vinduet som åpnet det. Vi kan bruke dette til å utveksle data mellom vinduer og utføre handlinger på innholdet i ett vindu fra et annet.
Det er alt for nå. La oss komme i praksis. Og vi vil vurdere andre teoretiske problemstillinger underveis.
3. Implementering av modaler dialogbokser
La oss starte med å implementere modale dialogbokser som de mest brukte.
3.1. Åpne en modal dialogboks
Vi har nettopp lært at innholdet i dialogboksen er implementert som en vanlig nettside. Å lage en nettside er ikke vanskelig for oss. Men hvordan åpner du selve dialogboksen?
For å åpne en modal dialogboks, bruk showModalDialog-metoden til Window-objektet. Formatet for å kalle denne metoden er:
.showModalDialog(
[,
[,
]]
);
Den første parameteren for denne metoden er nødvendig. Den spesifiserer Internett-adressen til nettsiden som implementerer innholdet i dialogboksen, som en streng.
Window.showModalDialog("options_modal.html");
Den andre parameteren er valgfri. Den spesifiserer verdien som skal sendes til dialogboksen. (Vi skal se på hvordan du får denne verdien i dialogboksen senere.) Verdien som sendes kan være hvilken som helst type: streng, tall, boolsk, matrise, funksjon eller en forekomst av et hvilket som helst objekt.
Her har vi sendt tallet 2 til dialogboksen.
Den tredje, også valgfrie, parameteren spesifiserer parametrene for selve dialogboksen. Det skal være en streng som inneholder navnene på parameterne og deres verdier. Navnet på parameteren er atskilt fra verdien med et kolon, og individuelle parametere fra hverandre med et semikolon (som i tilfellet med å skrive CSS-stiler).
"dialogHeight:300px;dialogWidth:400px");
Her spesifiserte vi parametrene til dialogboksen for å åpne - høyde (300 piksler) og bredde (400 piksler).
Listen over dialogboksalternativer som støttes av Internet Explorer er ganske stor. La oss se på dem.
- dialogLeft - setter den horisontale koordinaten til øverste venstre hjørne av dialogboksen i forhold til øverste venstre hjørne av skjermen. Hvis denne parameteren ikke er spesifisert, vil den horisontale koordinaten til vinduet bli valgt vilkårlig.
- dialogTop - setter den vertikale koordinaten til øverste venstre hjørne av dialogboksen i forhold til øverste venstre hjørne av skjermen. Hvis denne parameteren ikke er spesifisert, vil den vertikale koordinaten til vinduet bli valgt vilkårlig.
- dialogHeight - angir høyden på dialogboksen. Hvis denne parameteren ikke er spesifisert, vil dialogboksen ha sin standardhøyde. Minste mulige høydeverdi er 100 piksler.
- dialogWidth - angir bredden på dialogboksen i piksler. Hvis denne parameteren ikke er spesifisert, vil dialogboksen ha standardbredden. Minste mulige bredde er 250 piksler. For å spesifisere koordinatene til øvre venstre hjørne og dimensjonene til dialogboksen, kan en hvilken som helst måleenhet som støttes av CSS brukes, med den obligatoriske angivelsen av dens betegnelse. Så i eksemplet ovenfor indikerer px-tegnene plassert etter høyde- og breddeverdiene at de er spesifisert i piksler.
- dialogSkjul - angir om dialogboksen skal skjules ved utskrift eller forhåndsvisning før utskrift. En verdi på ja, 1 eller på indikerer gjør dette, og en verdi på nei, 0 eller av indikerer å ikke gjøre dette. Standardverdien er nei.
- center - angir om dialogboksen skal være i midten av skjermen. En verdi på ja, 1 eller på forteller Internet Explorer å sentrere dialogboksen på skjermen, mens en verdi på nei, 0 eller av forteller Internet Explorer å ikke gjøre det. Standardverdien er ja.
Merk:
Hvis du spesifiserer koordinatene til dialogboksen ved hjelp av parameterne dialogHeight og dialogWidth, vil dialogboksen bli plassert på det angitte stedet på skjermen, uavhengig av verdien til midtparameteren. Eller med andre ord, parameterne dialogHeight og dialogWidth har forrang. - kant - angir hvilken type kantlinje som skal vises rundt innholdet i dialogboksen, inne i klientområdet ( klientområde- dette er det indre området av vinduet der det faktiske innholdet på nettsiden vises). Den forhøyede verdien indikerer å vise en "hevet" ramme (faktisk er en slik ramme nesten usynlig), og den senkede verdien indikerer en "forsenket" (og denne rammen merkes ganske godt og, jeg må si, ødelegger den i stor grad utsikt). Standardverdien økes.
- kan endre størrelsen - indikerer om brukeren vil kunne endre størrelsen på dialogboksen. En verdi på ja, 1 eller på gir den denne muligheten, men en verdi på nei, 0 eller av gjør det ikke. Standardverdien er nei. Nesten alle dialogbokser som brukes i profesjonelt skrevne applikasjoner har en konstant og uforanderlig størrelse. Lag en dialogboks med kan endre størrelse det er ingen vits, i tillegg vil et slikt vindu se rart ut.
- scroll - angir om dialogboksen skal ha rullefelt. En verdi på ja, 1 eller på forteller Internet Explorer å vise dem, mens en verdi på nei, 0 eller av gjør at Internet Explorer ikke viser dem. Standardverdien er ja. Det er merkelig at Internet Explorer-utviklerne bestemte seg for å gi dialogbokser rullefelt som standard. I forfatterens minne hadde ikke en eneste Windows-applikasjon som kom i hendene hans dialogbokser med rullefelt (med mindre du selvfølgelig teller elevenes håndverk, der noe lignende ble oppdaget...). Generelt ser en rulledialogboks ekstremt latterlig ut. Så konklusjonen er klar – vi fjerner rullefeltene!
Window.showModalDialog("options_modal.html", 2,
"dialogHeight:300px;dialogWidth:400px;scroll:no"); - status - spesifiserer tilstedeværelsen eller fraværet av en statuslinje i dialogboksen. En verdi på ja, 1 eller på viser en statuslinje i vinduet, mens en verdi på nei, 0 eller av ikke gjør det. Standardverdien er nei. Statuslinjen i dialogboksen er helt klart unødvendig tilbehør. Ikke en eneste søknad forfatteren behandlet gjorde slike ting. Det vil vi heller ikke.
- unadorned - angir om dialogboksen skal ha en kantlinje, tittel, systemmenyen og knapper for å maksimere, minimere og lukke, eller som de sier nå, krom. En verdi på ja, 1 eller på spesifiserer fravær av krom, og en verdi på nei, 0 eller av spesifiserer dets tilstedeværelse. Standardverdien er nei. Generelt bør du bare fjerne krom fra sofistikerte dialogbokser i like sofistikerte programmer. Et vindu uten krom ser ekstremt uvanlig ut og kan ta motet fra brukeren.
Etter å ha kalt showModalDialog-metoden, stopper kjøringen av webskript til dialogboksen lukkes. Utførelsen fortsetter først etter at vinduet er lukket.
Det gjenstår å si om resultatet at showModalDialog-metoden returnerer. Dette er verdien som ble sendt av dialogboksen til vinduet som åpnet den. Denne verdien kan være hvilken som helst type: streng, tall, boolsk, matrise, funksjon eller en forekomst av et hvilket som helst objekt.
Merk:
Anrop til showModalDialog-metoden kan bare være til stede i hendelsesbehandlere som oppstår som et resultat av brukerhandlinger (f.eks. klikk hendelser- museklikk). Ellers vil kallet til denne metoden bli ignorert.
3.2. Sender noen data til en modal dialogboks når den åpnes
Svært ofte må du sende noen data til den modale dialogboksen som åpnes. Dette kan for eksempel være gjeldende verdier for parametere som bør erstattes med kontrollene i dette vinduet.
Vi vet allerede at vi kan sende en verdi av hvilken som helst type til en modal dialogboks ved å gjøre den til den andre parameteren til showModalDialog-metodekallet.
Window.showModalDialog("options_modal.html", 2);
Men hva om vi trenger å sende flere verdier til dialogboksen? Det er to måter å gjøre dette på.
Metode en er å lage en matrise og sette verdiene som skal sendes inn i elementene.
Var aParams = sant;
var aParams = "svart";
Her har vi laget en vanlig aParams-array med to elementer, som har blitt tildelt verdier som sendes til dialogboksen.
Vi kan skape og assosiativ matrise(hash):
Var aParams["wrap"] = sant;
var aParams["color"] = "svart";
window.showModalDialog("options_modal.html", aParams);
Kanskje dette er mer praktisk - strenghash-indekser er lettere å huske enn numeriske indekser for en vanlig matrise.
Metode to er å lage en instans Gjenstand, ved å bruke JavaScript-initialisatoren, oppretter du egenskaper i den, som du tilordner de overførte verdiene.
Var oParams = ( wrap: sant, farge: "svart" );
window.showModalDialog("options_modal.html", oParams);
Hvilken metode du skal velge er en smakssak. For eksempel foretrekker forfatteren Objekt-forekomster, og leser dem som de best egnede for dette formålet. Og noen kan finne arrays mer praktisk - vanlige eller hashes.
3.3. Motta i en modal dialogboks dataene som ble sendt av vinduet som åpnet det
Så vi sendte dataene til det modale vinduet. Nå må vi på en eller annen måte få dem inn i selve vinduet.
Window-objektet støtter en skrivebeskyttet dialogArguments-egenskap. Den lagrer verdien som ble sendt til dialogboksen som den andre parameteren i showModalDialog-metoden. Akkurat det vi trenger.
Merk:
Egenskapen dialogArguments er bare tilgjengelig i dialogbokser.
Slik kan vi få verdiene bestått som hash-elementer:
Var aParams = window.dialogArguments;
var bWrap = aParams["wrap"];
var sColor = aParams["farge"];
Og dette er verdiene som sendes som egenskaper for en forekomst av objektobjektet:
Var oParams = window.dialogArguments;
var bWrap = oParams.wrap;
var sColor = oParams.color;
3.4. Sende data fra en modal dialogboks til vinduet som åpnet den
Det gjenstår å finne ut hvordan du overfører data i motsatt retning - fra den modale dialogboksen til vinduet som åpnet den. Vi må returnere nye brukerspesifiserte verdier fra parameterdialogboksen, ikke sant?
Enhver verdi skal bare overføres fra en dialogboks til vinduet som åpnet den hvis brukeren klikket på OK-knappen. Hvis du klikker på Avbryt, trenger du vanligvis ikke å gjøre dette; Generelt skal Avbryt-knappen bare lukke dialogboksen og ikke utføre noen annen handling.
Så brukeren klikket på OK-knappen i dialogboksen. Nå må vi sende noen data til vinduet som dialogen ble åpnet fra. Hvordan gjøre det?
Window-objektet støtter en returnValue-egenskap. Denne egenskapen lagrer verdien som skal sendes fra den modale dialogen til vinduet som åpnet den. Denne verdien kan være av hvilken som helst type.
Merk:
ReturnValue-egenskapen er bare tilgjengelig i modale dialogbokser.
For eksempel, dette er hvordan vi kan sende en enkelt verdi fra vinduet som åpnes:
Window.returnValue = 2;
Og så - flere betydninger:
Window.returnValue = ( wrap: bWrap, farge: sColor );
Selvfølgelig kan vi i dette tilfellet også bruke en vanlig matrise eller hash.
Hvis brukeren klikket på Avbryt-knappen i dialogboksen, vil vi, som tidligere avtalt, ikke tilordne noen verdi til returnValue-egenskapen. I dette tilfellet denne eiendommen vil motta standardverdien - null. Det samme vil forresten skje hvis brukeren lukker dialogboksen ved å trykke på lukkeknappen eller tastekombinasjonen +.
Fint! Dialogboksen er lukket (vi finner ut hvordan du lukker den senere). Nå skal vinduet som åpnet det motta verdien av returnValue-egenskapen. Hvordan?
Veldig enkelt. ReturnValue-egenskapsverdien vil bli returnert av showModalDialog-metoden som et resultat. Dette var imidlertid allerede nevnt i avsnitt 2.1.
Vi må sjekke om denne verdien er null. Hvis dette er tilfelle, overførte ikke dialogboksen noen data. Ellers vil vi på en eller annen måte kunne bruke dataene som sendes til dem i applikasjonen.
Var oResult = window.showModalDialog(...);
if (oResult != null) (
var bResultWrap = oResult.wrap;
var sResultColor = oResult.color;
}
3.5. Lukke en modal dialog
Til slutt bør vi faktisk lukke den modale dialogboksen. For å gjøre dette kan vi bruke lukkemetoden til Window-objektet, som ikke godtar parametere og ikke returnerer et resultat.
Window.close();
3.6. HTML-applikasjon med støtte for modale dialoger
Vel, det er tid for ren øvelse. La oss fullføre vår HTML-tekstredigeringsapplikasjon slik at den støtter innstilling av parametere ved hjelp av en modal dialogboks.
Koden til selve HTML-applikasjonen (filen Textedit_modal.hta) etter rettelsene vil se slik ut:
Tekstredigerer
window.resizeTo(710, 490);
Var bWrap = sant;
var sColor = "svart";
Funksjon showParameters()
{
var oParams = ( wrap: bWrap, farge: sColor );
var oResult = window.showModalDialog("options_modal.html", oParams,
"dialogHeight:120px;dialogWidth:200px;scroll:no");
if (oResult != null) (
bWrap = oResult.wrap;
sColor = oResult.color;
var oTxtText = document.getElementById("txtText");
oTxtText.wrap = bWrap ? "soft" : "av";
oTxtText.style.color = sColor;
}
}
Her er alt i prinsippet allerede kjent for oss. Bare minimal forklaring er nødvendig.
Først av alt, erklærte vi to variabler - bWrap og sColor - som vil lagre gjeldende verdier for applikasjonsparametrene. Den første variabelen vil lagre en logisk verdi - en indikasjon på om redigeringsområdet utføres i dette øyeblikket linjeinnpakning. Og den andre variabelen vil lagre gjeldende verdi av tekstfargen i redigeringsområdet som en streng.
Merk:
Generelt kan de nåværende verdiene til parameterne ikke lagres hvor som helst, men hver gang hentes fra de tilsvarende egenskapene til forekomsten av HTMLTextAreaElement-objektet, som representerer redigeringsområdet der teksten skrives inn. Forfatteren bestemte seg ganske enkelt for ikke å overkomplisere søknadskoden.
Et redigeringsområde er representert av en forekomst av et HTMLTextAreaElement-objekt. Dette objektet støtter wrap-egenskapen, som spesifiserer linjebrytingsmodus. Verdien "myk" for denne egenskapen instruerer redigeringsområdet om å utføre linjeskift, og vognretur og linjeskift vil ikke bli satt inn ved bruddene ("myke" linjeskift). Og verdien "av" forteller redigeringsområdet at det ikke skal bryte linjer i det hele tatt.
Alle objekter som representerer nettsideelementer støtter stil eiendom. Denne egenskapen lagrer en forekomst av CSSStyle-objektet som representerer gjeldende CSS-stil, som er knyttet til dette elementet nettsider.
CSSStyle-objektet støtter på sin side mange egenskaper som tilsvarer forskjellige stilattributter. Så, fargeegenskap tilsvarer stilattributtet med samme navn, som spesifiserer tekstfargen.
La oss nå lage en nettside som implementerer selve dialogboksen. La oss sette inn avmerkingsboksen Bryt tekst, rullegardinlisten Tekstfarge og selvfølgelig OK- og Avbryt-knappene som kreves for vinduer av denne typen.
Koden for denne nettsiden er gitt nedenfor.
Alternativer
funksjonsoppsett()
{
var oParams = window.dialogArguments;
OChkWrap.checked = oParams.wrap;
oSelColor.value = oParams.color;
}
Funksjon sendParams()
{
var oChkWrap = document.getElementById("chkWrap");
var oSelColor = document.getElementById("selColor");
window.returnValue = ( wrap: oChkWrap.checked, color: oSelColor.value );
window.close();
}
Bryte tekst
Tekstfarge
Svart
rød
Grønn
Blå
Her, igjen, er alt allerede kjent for oss. De mest minimale forklaringene kreves.
SIZE-attributtet til taggen som oppretter listen, spesifiserer størrelsen denne listen i poeng. En verdi på 1 for dette tag-attributtet angir at listen skal være ett element høyt, det vil si at det skal være en rullegardinliste.
VALUE-attributtet til en kode som oppretter et separat listeelement, spesifiserer verdien til det elementet.
Umiddelbart etter at nettsiden som implementerer dialogboksen er ferdig lastet, vil load-hendelsen inntreffe. Vi spesifiserte oppsettfunksjonen som en behandler for denne hendelsen. Denne funksjonen vil motta verdien sendt til dialogboksen fra vinduet som åpnet den - en forekomst av et objekt med egenskaper som lagrer gjeldende verdier for applikasjonens innstillinger. Etter det vil den legge inn disse verdiene i de tilsvarende kontrollene.
HTMLInputElement-objektet, som representerer en kontroll, inkludert en avmerkingsboks, støtter en avkrysset egenskap, som bare er tilgjengelig for avmerkingsbokser. Denne egenskapen angir om avmerkingsboksen er merket av (true) eller fjernet (false).
HTMLSelectElement-objektet, som representerer en liste, støtter en verdi-egenskap. Den inneholder verdien til det valgte listeelementet som en streng. Ved å tilordne en verdi til denne egenskapen, vil vi be listen om å først velge et element med den verdien.
Når du klikker på OK-knappen, vil behandleren for klikkhendelsen utføres - sendParams-funksjonen. Den vil instansiere et objekt ved hjelp av en JavaScript-initialiserer og sette egenskapene til verdiene som brukeren spesifiserte i dialogboksen kontrollerer, som vil bli de nye applikasjonsinnstillingene. Den vil sende den resulterende forekomsten av objektet til vinduet som åpnet denne dialogboksen, det vil si til selve applikasjonen, og deretter lukke dialogboksen.
Avbryt-knappen lukker bare dialogboksen. Som et resultat vil vinduet som åpnet denne dialogboksen motta verdien null - et signal om at brukeren ikke bekreftet oppføringen av nye applikasjonsparametere.
La oss lagre denne nettsiden i filen options_modal.html. Og la oss sjekke den ferdige HTML-applikasjonen i aksjon.
Utvikle et HTML-skjema for en dialogboks
Som et grensesnitt notisbok Vi vil lage en dialogboks (brukerskjema) som er vist i fig. 7.3.
Ris. 7.3. Dialogboks for arbeid med en notatbok
Dette skjemaet implementeres ved hjelp av HTML-filen Phone.htm, som vises i sin helhet i Listing 7.6.
Helt i begynnelsen av Phone.htm-filen er det en kode som indikerer at innholdet i filen er tekst i HTML-format, samt koder og , der kodingen som brukes (charset=windows-1251) og tittelen på skjemaet (koder og ) er spesifisert:
Notatbokskjema
For å angi fargen på skjemaet bruker taggen bgcolor-attributtet med verdien "silver":
Scroll="no"-attributtet angir at det ikke skal være noen rullefelt i dialogboksen.
Skjemaet vårt består av syv tekstinntastingsfelt (tabell 7.2) og åtte knapper (tabell 7.3).
Tabell 7.2. Inndatafelt i dialogboksen for å arbeide med en notatbok
| txtEtternavn | 50 | Etternavnsfelt |
| txtnavn | 50 | Navnefelt |
| txtTelefon | 15 | Inntastingsfelt for telefonnummer |
| txtStreet | 50 | Felt for inntasting av gatenavn |
| txtHouse | 10 | Felt for inntasting av husnummer |
| txtApp | 5 | Felt for inntasting av leilighetsnummer |
| txtMerk | 80 | Felt for å legge inn et notat |
Tabell 7.3. Dialogboksknapper for arbeid med en notatbok
| btnNeste | Gå til neste oppføring | |
| >> | btnFinal | Gå til siste oppføring |
Kommandoene som oppretter skjemaet er inne i taggene og. samisk tekstfelt innganger og knapper opprettes i HTML-filen med samme tag. Inne i denne taggen må du spesifisere flere attributter:
Type - definerer type kontroll (for et inndatafelt type="text" , for en knapp type="button");
Navn - setter navnet på kontrollen;
Størrelse - bestemmer lengden på inndatafeltlinjen i tegn;
Verdi - setter etiketten på knappen.
For å sikre at inndatafeltene er plassert nøyaktig under hverandre, vil vi plassere dem i en tabell med usynlige kanter, bestående av to kolonner: den første inneholder beskrivelsen (etiketten) for feltet, den andre inneholder selve kontrollen. En tabell i en HTML-fil lages ved å bruke sammenkoblede tagger
| Og | , definere en enkelt tabellcelle, for eksempel:Etternavn | Bredde-argumentet er spesifisert, og spesifiserer linjebredden som en prosentandel av den totale linjebredden. Knappene på skjemaet vises etter hverandre, nødvendig avstand mellom dem oppnås ved hjelp av ikke-brytende mellomrom(escape-sekvens ), for eksempel: Oppføring 7.6. Beskrivelse av skjemaet i HTML-filen (Phone.htm) Notatbokskjema
|