HTML5: nyt dialogelement. Oprettelse af modale dialogbokse
Meget ofte bruges dialogbokse til at indtaste data i Windows-applikationer. Disse vinduer indeholder kontroller, hvor de data, der kræves af applikationen, indtastes, og knapperne OK og Annuller, hvoraf den første bekræfter dataindtastningen, og den anden annullerer.
Der er to typer dialogbokse:
- Modale dialogbokse blokere alle andre vinduer i programmet, det vil sige, at brugeren ikke vil være i stand til at få adgang til noget andet vindue, før han lukker dialogboksen ved at klikke på OK eller Annuller. Typisk bruges modale dialogbokse til at indtaste nogle data, der er afgørende for, at applikationen kan fortsætte med at køre. F.eks. er filåbningsdialogen altid lavet modal.
- Modeløse (modelløse) dialogbokse bloker ikke andre programvinduer. Brugeren kan frit skifte mellem en sådan dialogboks og et hvilket som helst andet programvindue. Modeløse dialogbokse bruges meget sjældnere end modale. De bruges til at specificere driftsparametre, der ikke er kritiske for, at programmet kan fortsætte med at køre og udføre forskellige handlinger med hovedvinduet eller et dokument indlæst i det. Søgedialogen gøres således altid modelløs.
Internet Explorer giver os mulighed for at bruge både modale og modelløse dialogbokse i HTML-applikationer. Nu vil vi se på, hvordan dette gøres.
Bemærk:
Før du læser denne artikel, anbefales det kraftigt, at du læser de tre foregående artikler i serien om Internet Explorer HTML-applikationer.
1. Forbered en HTML-testapplikation
Lad os skabe et simpelt HTML-tekstredigeringsprogram uden nogen klokker og fløjter. Den vil indeholde et stort redigeringsområde, hvor teksten faktisk indtastes, og knappen Parameters, når der klikkes på den, vil en dialogboks til indtastning af parametre blive vist.
Sættet af parametre, som brugeren kan angive, vil være lille. Dette er først og fremmest tekstombrydningsfunktionen i redigeringsområdet - uanset om den bliver aktiveret eller deaktiveret. Og tekstfarve; lad brugeren kunne vælge mellem sort, blå, grøn og rød.
Vi vil implementere denne applikation i to versioner: den første vil bruge en modal dialogboks til at indtaste parametre, og den anden vil bruge en modelløs dialogboks.
HTML-koden til applikationen er angivet nedenfor.
Tekst editor
window.resizeTo(710, 490);
Lad os gemme denne applikation i to filer: Textedit_modal.hta (version med en modal dialogboks) og Textedit_modeless.hta (version med en modelløs dialogboks). Og lad os komme i gang...
2. Hvordan dialogbokse implementeres
Men først et kort teoretisk kursus. Først og fremmest implementeres indholdet af enhver dialogboks - både modal og ikke-modal - i form af en almindelig webside. Denne webside er gemt i separat fil med htm- eller html-udvidelsen (såvel som indholdet af individuelle "vinduer" i applikationen, hvis oprettelse blev beskrevet i den anden artikel i serien).
Når vi åbner en modal dialogboks, kan vi videregive nogle data til den (mere om dette senere). Disse kunne for eksempel være de aktuelle værdier for applikationsparametre, som derefter vil blive erstattet af kontrollerne i dialogboksen.
Når vi lukker en modal dialog, kan vi videregive nogle data til det vindue, der åbnede den. I tilfælde af en indstillingsdialog kan disse være brugerindtastede parameterværdier.
Når vi åbner en modelløs dialogboks, kan vi ikke videregive nogen data til den, og vi kan heller ikke returnere de indtastede data til det vindue, der åbnede den. Vi kan dog få adgang til dette vindue fra vinduet, der åbnede det, og omvendt "komme" fra dialogboksen til vinduet, der åbnede det. Vi kan bruge dette til at udveksle data mellem vinduer og udføre handlinger på indholdet af et vindue fra et andet.
Det er alt for nu. Lad os komme i praksis. Og vi vil overveje andre teoretiske problemstillinger undervejs.
3. Implementering af modals dialogbokse
Lad os starte med at implementere modale dialogbokse som de mest almindeligt anvendte.
3.1. Åbning af en modal dialogboks
Vi har lige lært, at indholdet af dialogboksen er implementeret som en almindelig webside. Det er ikke svært for os at lave en webside. Men hvordan åbner man selve dialogboksen?
For at åbne en modal dialogboks skal du bruge showModalDialog-metoden for Window-objektet. Formatet til at kalde denne metode er:
.showModalDialog(
[,
[,
]]
);
Den første parameter i denne metode er påkrævet. Den specificerer internetadressen på den webside, der implementerer indholdet af dialogboksen, som en streng.
Window.showModalDialog("options_modal.html");
Den anden parameter er valgfri. Det specificerer den værdi, der sendes til dialogboksen. (Vi ser på, hvordan man får denne værdi i dialogboksen senere.) Den værdi, der sendes, kan være en hvilken som helst type: streng, tal, boolsk værdi, matrix, funktion eller en forekomst af ethvert objekt.
Her har vi givet tallet 2 videre til dialogboksen.
Den tredje, også valgfri, parameter angiver parametrene for selve dialogboksen. Det skal være en streng, der indeholder navnene på parametrene og deres værdier. Navnet på parameteren er adskilt fra værdien med et kolon, og individuelle parametre fra hinanden med et semikolon (som i tilfældet med at skrive CSS-stile).
"dialogHeight:300px;dialogWidth:400px");
Her specificerede vi parametrene for dialogboksen for at åbne - højde (300 pixels) og bredde (400 pixels).
Listen over dialogboksindstillinger, der understøttes af Internet Explorer, er ret stor. Lad os se på dem.
- dialogLeft - indstiller den vandrette koordinat for øverste venstre hjørne af dialogboksen i forhold til øverste venstre hjørne af skærmen. Hvis denne parameter ikke er angivet, vil vinduets horisontale koordinat blive valgt vilkårligt.
- dialogTop - indstiller den lodrette koordinat for øverste venstre hjørne af dialogboksen i forhold til øverste venstre hjørne af skærmen. Hvis denne parameter ikke er angivet, vil den lodrette koordinat for vinduet blive valgt vilkårligt.
- dialogHeight - indstiller højden på dialogboksen. Hvis denne parameter ikke er angivet, vil dialogboksen have sin standardhøjde. Den mindst mulige højdeværdi er 100 pixels.
- dialogWidth - indstiller bredden af dialogboksen i pixels. Hvis denne parameter ikke er angivet, vil dialogboksen have standardbredden. Den mindst mulige bredde er 250 pixels. For at specificere koordinaterne for det øverste venstre hjørne og dimensionerne af dialogboksen kan enhver måleenhed, der understøttes af CSS, bruges med den obligatoriske angivelse af dens betegnelse. Så i eksemplet ovenfor angiver px-tegnene placeret efter højde- og breddeværdierne, at de er angivet i pixels.
- dialogSkjul - angiver om dialogboksen skal skjules ved udskrivning eller forhåndsvisning før udskrivning. En værdi på ja, 1 eller tændt indikerer gør dette, og en værdi på nej, 0 eller fra indikerer ikke at gøre dette. Standardværdien er nej.
- center - angiver om dialogboksen skal være i midten af skærmen. En værdi på ja, 1 eller tændt fortæller Internet Explorer at centrere dialogboksen på skærmen, mens en værdi på nej, 0 eller fra fortæller Internet Explorer ikke at gøre det. Standardværdien er ja.
Bemærk:
Hvis du angiver koordinaterne for dialogboksen ved hjælp af parametrene dialogHeight og dialogWidth, vil dialogboksen være placeret på den angivne placering på skærmen, uanset værdien af centerparameteren. Eller med andre ord, parametrene dialogHeight og dialogWidth har forrang. - kant - indstiller den type kant, der vil blive vist rundt om indholdet af dialogboksen inde i dets klientområde ( kundeområde- dette er det indre område af vinduet, hvor det faktiske indhold på websiden vises). Den hævede værdi angiver at vise en "forhøjet" ramme (faktisk er sådan en ramme næsten usynlig), og den forsænkede værdi angiver en "forsænket" (og denne ramme er mærkbar ret godt, og jeg må sige, at den i høj grad ødelægger udsigt). Standardværdien hæves.
- kan ændre størrelse - angiver, om brugeren vil være i stand til at ændre størrelsen på dialogboksen. En værdi på ja, 1 eller til giver den denne evne, men en værdi på nej, 0 eller fra gør det ikke. Standardværdien er nej. Næsten alle dialogbokse, der bruges i professionelt skrevne applikationer, har en konstant og uforanderlig størrelse. Lav en dialogboks med kan ændres størrelse der er ingen mening, desuden vil et sådant vindue se mærkeligt ud.
- scroll - angiver, om dialogboksen skal have rullepaneler. En værdi på ja, 1 eller tændt fortæller Internet Explorer at vise dem, mens en værdi på nej, 0 eller fra får Internet Explorer til ikke at vise dem. Standardværdien er ja. Det er mærkeligt, at Internet Explorer-udviklerne besluttede at give dialogbokse rullepaneler som standard. I forfatterens hukommelse havde ikke et eneste Windows-program, der kom i hans hænder, dialogbokse med rullepaneler (medmindre man selvfølgelig tæller elevernes håndværk, hvor noget lignende blev stødt på...). Generelt ser en rulningsdialogboks ekstremt latterlig ud. Så konklusionen er klar – vi fjerner rullebjælkerne!
Window.showModalDialog("options_modal.html", 2,
"dialogHeight:300px;dialogWidth:400px;scroll:no"); - status - angiver tilstedeværelsen eller fraværet af en statuslinje i dialogboksen. En værdi på ja, 1 eller til viser en statuslinje i vinduet, mens en værdi på nej, 0 eller fra ikke gør det. Standardværdien er nej. Statuslinjen i dialogboksen er helt klart unødvendigt tilbehør. Ikke en eneste ansøgning, som forfatteren beskæftigede sig med, gjorde sådanne ting. Det gør vi heller ikke.
- unadorned - angiver om dialogboksen skal have en kant, titel, systemmenu og knapper til at maksimere, minimere og lukke, eller som de siger nu, krom. En værdi på ja, 1 eller tændt angiver fraværet af chrom, og en værdi på nej, 0 eller fra angiver dets tilstedeværelse. Standardværdien er nej. Generelt bør du kun fjerne chrome fra sofistikerede dialogbokse i lige så sofistikerede programmer. Et vindue uden krom ser ekstremt usædvanligt ud og kan afskrække brugeren.
Efter at have kaldt showModalDialog-metoden, stopper udførelse af webscript, indtil dialogboksen lukkes. Udførelsen fortsætter først, når vinduet er lukket.
Det er tilbage at sige om resultatet, at showModalDialog-metoden vender tilbage. Dette er den værdi, der blev sendt af dialogboksen til det vindue, der åbnede den. Denne værdi kan være en hvilken som helst type: streng, tal, boolean, matrix, funktion eller en forekomst af ethvert objekt.
Bemærk:
Kald til metoden showModalDialog kan kun være til stede i hændelseshandlere, der opstår som et resultat af brugerhandlinger (f.eks. klik på begivenheder- klik med musen). Ellers vil opkaldet til denne metode blive ignoreret.
3.2. Sender nogle data til en modal dialogboks, når den åbnes
Meget ofte skal du sende nogle data til den modale dialogboks, der åbnes. For eksempel kan disse være de aktuelle værdier af parametre, der skal erstattes af kontrollerne i dette vindue.
Vi ved allerede, at vi kan overføre en værdi af enhver type til en modal dialog ved at gøre den til den anden parameter til showModalDialog-metodekaldet.
Window.showModalDialog("options_modal.html", 2);
Men hvad nu hvis vi skal sende flere værdier til dialogboksen? Der er to måder at gøre dette på.
Metode et er at skabe et array og sætte de værdier, der skal overføres, ind i dets elementer.
Var aParams = sand;
var aParams = "sort";
Her har vi lavet et regulært aParams-array med to elementer, som har fået tildelt værdier, der sendes til dialogboksen.
Vi kan skabe og associativ array(hash):
Var aParams["wrap"] = sand;
var aParams["color"] = "sort";
window.showModalDialog("options_modal.html", aParams);
Måske er dette mere praktisk - streng-hash-indekser er nemmere at huske end numeriske indekser for en almindelig matrix.
Metode to er at oprette en instans Objekt, ved hjælp af JavaScript-initializeren, opret egenskaber i den, som du tildeler de overførte værdier.
Var oParams = ( indpakning: sand, farve: "sort" );
window.showModalDialog("options_modal.html", oParams);
Hvilken metode man skal vælge er en smagssag. For eksempel foretrækker forfatteren Objekt-forekomster og læser dem som de bedst egnede til dette formål. Og nogle kan finde arrays mere bekvemme - almindelige eller hashes.
3.3. Modtagelse i en modal dialogboks af data, der er sendt af vinduet, der åbnede det
Så vi videregav dataene til det modale vindue. Nu skal vi på en eller anden måde få dem i dette vindue selv.
Window-objektet understøtter en skrivebeskyttet dialogArguments-egenskab. Den gemmer den værdi, der blev sendt til dialogboksen, som den anden parameter i showModalDialog-metoden. Lige hvad vi har brug for.
Bemærk:
Egenskaben dialogArguments er kun tilgængelig i dialogbokse.
Sådan kan vi få værdierne sendt som hash-elementer:
Var aParams = window.dialogArguments;
var bWrap = aParams["wrap"];
var sColor = aParams["farve"];
Og dette er værdierne, der overføres som egenskaber for en forekomst af objektobjektet:
Var oParams = window.dialogArguments;
var bWrap = oParams.wrap;
var sColor = oParams.color;
3.4. Overførsel af data fra en modal dialog til det vindue, der åbnede den
Det er tilbage at finde ud af, hvordan man overfører data i den modsatte retning - fra den modale dialogboks til vinduet, der åbnede den. Vi bliver nødt til at returnere nye brugerspecificerede værdier fra parameterdialogboksen, ikke?
Enhver værdi skal kun overføres fra en dialogboks til det vindue, der åbnede den, hvis brugeren klikkede på OK-knappen. Hvis du klikker på Annuller, behøver du normalt ikke gøre dette; Generelt bør knappen Annuller kun lukke dialogboksen og ikke udføre nogen anden handling.
Så brugeren klikkede på OK-knappen i dialogboksen. Nu skal vi videregive nogle data til vinduet, hvorfra dialogen blev åbnet. Hvordan gør man det?
Window-objektet understøtter en returnValue-egenskab. Denne egenskab gemmer den værdi, der skal overføres fra den modale dialog til det vindue, der åbnede den. Denne værdi kan være af enhver type.
Bemærk:
Egenskaben returnValue er kun tilgængelig i modale dialogbokse.
For eksempel er det sådan, vi kan sende en enkelt værdi fra vinduet, der åbnes:
Window.returnValue = 2;
Og så - flere betydninger:
Window.returnValue = ( wrap: bWrap, farve: sColor );
Selvfølgelig kan vi i dette tilfælde også bruge et almindeligt array eller hash.
Hvis brugeren har klikket på Annuller-knappen i dialogboksen, vil vi, som tidligere aftalt, ikke tildele nogen værdi til returnValue-egenskaben. I dette tilfælde denne ejendom vil modtage sin standardværdi - null. Det samme vil i øvrigt ske, hvis brugeren lukker dialogboksen ved at trykke på lukkeknappen eller + tastekombinationen.
Bøde! Dialogboksen er lukket (vi finder ud af, hvordan du lukker den senere). Nu skulle vinduet, der åbnede det, modtage værdien af returnValue-egenskaben. Hvordan?
Meget simpelt. ReturnValue-egenskabsværdien vil blive returneret af showModalDialog-metoden som et resultat. Dette blev dog allerede nævnt i afsnit 2.1.
Vi skal kontrollere, om denne værdi er nul. Hvis dette er tilfældet, transmitterede dialogboksen ingen data. Ellers vil vi på en eller anden måde kunne bruge de data, der er sendt til dem i applikationen.
Var oResult = window.showModalDialog(...);
if (oResult != null) (
var bResultWrap = oResult.wrap;
var sResultColor = oResult.color;
}
3.5. Lukning af en modal dialog
Endelig bør vi faktisk lukke den modale dialogboks. For at gøre dette kan vi bruge lukkemetoden for Window-objektet, som ikke accepterer parametre og ikke returnerer et resultat.
Window.close();
3.6. HTML-applikation med understøttelse af modale dialoger
Nå, det er tid til ren øvelse. Lad os færdiggøre vores HTML-tekstredigeringsapplikation, så den understøtter indstilling af parametre ved hjælp af en modal dialogboks.
Koden for selve HTML-applikationen (filen Textedit_modal.hta) efter rettelserne vil se sådan ud:
Tekst editor
window.resizeTo(710, 490);
Var bWrap = sand;
var sColor = "sort";
Funktion showParameters()
{
var oParams = ( wrap: bWrap, farve: 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" : "off";
oTxtText.style.color = sColor;
}
}
Her er alt i princippet allerede kendt for os. Der kræves kun minimal forklaring.
Først og fremmest erklærede vi to variabler - bWrap og sColor - der gemmer de aktuelle værdier af applikationsparametrene. Den første variabel gemmer en logisk værdi - en indikation af, om redigeringsområdet udføres i dette øjeblik linjeomvikling. Og den anden variabel gemmer den aktuelle værdi af tekstfarven i redigeringsområdet som en streng.
Bemærk:
Generelt kan de aktuelle værdier af parametrene slet ikke gemmes hvor som helst, men hver gang hentes fra de tilsvarende egenskaber for instansen af HTMLTextAreaElement-objektet, som repræsenterer redigeringsområdet, hvor teksten indtastes. Forfatteren besluttede simpelthen ikke at overkomplicere ansøgningskoden.
Et redigeringsområde er repræsenteret af en forekomst af et HTMLTextAreaElement-objekt. Dette objekt understøtter egenskaben ombrydning, som angiver linjeombrydningstilstanden. Værdien "blød" for denne egenskab instruerer redigeringsområdet om at udføre linjeskift, og vognretur og linjeskift vil ikke blive indsat ved bruddene ("bløde" linjeskift). Og værdien "fra" fortæller redigeringsområdet slet ikke at bryde linjer.
Alle objekter, der repræsenterer websideelementer, understøtter stil ejendom. Denne egenskab gemmer en forekomst af CSSStyle-objektet, der repræsenterer den aktuelle CSS stil, som er knyttet til dette element web sider.
CSSStyle-objektet understøtter til gengæld mange egenskaber, der svarer til forskellige stilattributter. Så, farveegenskab svarer til stilattributten af samme navn, som angiver tekstfarven.
Lad os nu oprette en webside, der implementerer selve dialogboksen. Lad os sætte afkrydsningsfeltet Ombryd tekst på den, rullelisten Tekstfarve og selvfølgelig OK- og Annuller-knapperne, der er nødvendige for vinduer af denne type.
Koden til denne webside er angivet nedenfor.
Muligheder
funktionsopsætning()
{
var oParams = window.dialogArguments;
OChkWrap.checked = oParams.wrap;
oSelColor.value = oParams.color;
}
Funktion sendParams()
{
var oChkWrap = document.getElementById("chkWrap");
var oSelColor = document.getElementById("selColor");
window.returnValue = ( wrap: oChkWrap.checked, color: oSelColor.value );
window.close();
}
Ombryd tekst
Tekstfarve
Sort
Rød
Grøn
Blå
Her er alt igen kendt for os. De mest minimale forklaringer er påkrævet.
SIZE-attributten for det tag, der opretter listen, angiver størrelsen denne liste i point. En værdi på 1 for denne tag-attribut angiver, at listen skal være ét element højt, det vil sige, at det skal være en rulleliste.
VALUE-attributten for et tag, der opretter et separat listeelement, angiver værdien af det pågældende element.
Umiddelbart efter at websiden, der implementerer dialogboksen, er færdig med at indlæse, vil indlæsningshændelsen forekomme. Vi specificerede opsætningsfunktionen som en handler for denne hændelse. Denne funktion vil modtage den værdi, der sendes til dialogboksen fra vinduet, der åbnede den - en forekomst af et objekt med egenskaber, der gemmer de aktuelle værdier af applikationens indstillinger. Derefter vil den indtaste disse værdier i de tilsvarende kontroller.
HTMLInputElement-objektet, som repræsenterer en kontrol, inklusive et afkrydsningsfelt, understøtter en markeret egenskab, som kun er tilgængelig for afkrydsningsfelter. Denne egenskab angiver, om afkrydsningsfeltet er markeret (sand) eller ryddet (falsk).
HTMLSelectElement-objektet, som repræsenterer en liste, understøtter en værdiegenskab. Den indeholder værdien af det aktuelt valgte listeelement som en streng. Ved at tildele en værdi til denne egenskab, vil vi bede listen til at begynde med at vælge et element med denne værdi.
Når du klikker på OK-knappen, vil handleren for dens klikhændelse blive udført - sendParams-funktionen. Det vil instansiere et objekt ved hjælp af en JavaScript initializer og indstille dets egenskaber til de værdier, som brugeren angivet i dialogboksen kontrollerer, som bliver de nye applikationsindstillinger. Det vil videregive den resulterende forekomst af objektet til vinduet, der åbnede denne dialogboks, det vil sige til selve programmet, og derefter lukke dialogboksen.
Annuller-knappen lukker blot dialogboksen. Som et resultat vil vinduet, der åbnede denne dialogboks, modtage værdien null - et signal om, at brugeren ikke bekræftede indtastningen af nye applikationsparametre.
Lad os gemme denne webside i filen options_modal.html. Og lad os tjekke den færdige HTML-applikation i aktion.
Udvikling af en HTML-formular til en dialogboks
Som en grænseflade notesbog Vi vil oprette en dialogboks (brugerform), som er vist i fig. 7.3.
Ris. 7.3. Dialogboks til at arbejde med en notesbog
Denne formular implementeres ved hjælp af HTML-filen Phone.htm, som er vist i sin helhed i Listing 7.6.
Allerede i begyndelsen af Phone.htm-filen er der et tag, der angiver, at indholdet af filen er tekst i HTML-format, samt tags og , hvori den anvendte kodning (charset=windows-1251) og titlen på formularen (tags og ) er specificeret:
Notesbog formular
For at indstille farven på formularen bruger tagget bgcolor-attributten med værdien "silver":
Scroll="no"-attributten angiver, at der ikke skal være rullebjælker i dialogboksen.
Vores formular består af syv tekstindtastningsfelter (tabel 7.2) og otte knapper (tabel 7.3).
Tabel 7.2. Indtastningsfelter i dialogboksen til at arbejde med en notesbog
| txtEfternavn | 50 | Efternavnsfelt |
| txtNavn | 50 | Navnefelt |
| txtTelefon | 15 | Indtastningsfelt for telefonnummer |
| txtStreet | 50 | Felt til indtastning af gadenavn |
| txtHouse | 10 | Felt til indtastning af husnummer |
| txtApp | 5 | Felt til indtastning af lejlighedsnummer |
| txtBemærk | 80 | Felt til indtastning af en note |
Tabel 7.3. Dialogboksknapper til at arbejde med en notesbog
| btnNæste | Flyt til næste post | |
| >> | btnFinal | Gå til sidste indgang |
Kommandoerne, der opretter formularen, er inde i tags og. Sami tekstfelter input og knapper oprettes i HTML-filen ved hjælp af det samme tag. Inde i dette tag skal du angive flere attributter:
Type - definerer typen af kontrol (for et inputfelt type="text" , for en knap type="button");
Navn - angiver navnet på kontrolelementet;
Størrelse - bestemmer længden af inputfeltlinjen i tegn;
Værdi - indstiller etiketten på knappen.
For at sikre, at indtastningsfelterne er placeret nøjagtigt under hinanden, vil vi placere dem i en tabel med usynlige kanter, bestående af to kolonner: den første indeholder beskrivelsen (label) for feltet, den anden indeholder selve kontrollen. En tabel i en HTML-fil oprettes ved hjælp af parrede tags
| Og | , definere en enkelt tabelcelle, for eksempel:Efternavn | Bredde-argumentet er angivet, og angiver linjebredden som en procentdel af den samlede linjebredde. Knapperne på formularen vises efter hinanden, nødvendig afstand mellem dem opnås ved hjælp af ikke-brækkende mellemrum(escape-sekvens ), for eksempel: Liste 7.6. Beskrivelse af formularen i HTML-filen (Phone.htm) Notesbog formular
|