Hvordan lage et resizable grensesnitt i CSS3 - dummies

Det brede utvalget og skjermbildene som brukes til å vise informasjon, gjør det nødvendig at CSS3-kommandoene lar brukeren endre størrelse på elementer som behov for. I de fleste tilfeller kan du bare la brukeren gjøre elementet til en hvilken som helst størrelse. Det kan imidlertid være situasjoner hvor du må overvåke størrelsen på resizing slik at du kan skreddersy innhold for å møte beholdningen til containeren.

Følgende eksempel viser hvordan du endrer størrelsen på et objekt og overvåker størrelsen. (Du finner fullstendig kode for dette eksemplet i mappen Kapittel 06Interactions av den nedlastbare koden som ResizeContent. HTML.)

$ (funksjon () {$ ("# ResizeMe"). Resizable ({minWidth: 200, minHeight: 60, resize: function (event, ui) {$ ("# Content").html ("Bredde:" + ui. størrelse. bredde + "

Høyde:" + ui. størrelse. høyde);}});}); 

Dette eksemplet er interessant fordi det viser hvordan man setter inn egenskaper og responderer på hendelser. I dette tilfellet holder elementene minWidth og minHeight elementet en bestemt minimumsstørrelse - brukeren kan ikke gjøre elementet mindre.

Koden reagerer også på størrelsen på størrelsen. Det er et spesielt krav til resizing du trenger å vite om. Størrelsesbeholderen er skilt fra innholdselementet. Her er HTML for dette eksempelet:

Redigerbar paragraf

Den tilknyttede stilen, #ResizeMe, gir en ramme rundt, setter starthøyde og bredde og sentrerer innholdet i beholderen.

Når du vil skrive innhold til skjermen, må du bruke innholdselementet, ikke beholderelementet. Ellers forsvinner størrelseshåndtakene, og brukeren vil ikke kunne endre størrelsen på elementet etter første gang. I dette tilfellet vises den nåværende størrelsen på beholderen som en del av ui-objektet som sendes til størrelseshåndteringshåndtereren.

Du får tilgang til informasjonen om størrelsen. bredde og størrelse. høydeegenskaper, som vist i koden.