Video: Developing creative thinking through mobile app development, by Rosanna Kurrer 2024
De grote verscheidenheid en soorten schermen die worden gebruikt om informatie weer te geven, maken het nodig dat uw CSS3-opdrachten de gebruiker toestaan om de grootte van elementen te wijzigen als nodig zijn. In de meeste gevallen kunt u de gebruiker eenvoudig toestaan om het element op elke gewenste grootte te maken. Er kunnen zich echter situaties voordoen waarin u de hoeveelheid aanpassing van de grootte moet controleren, zodat u de inhoud kunt aanpassen aan de behoeften van de container.
In het volgende voorbeeld ziet u hoe u het formaat van een object wijzigt en de grootte ervan bewaakt. (U vindt de volledige code voor dit voorbeeld in de map Hoofdstuk 06 Interacties van de downloadbare code als ResizeContent. HTML.)
$ (functie () {$ ("# ResizeMe"). Resizable ({minWidth: 200, minHeight: 60, resize: function (event, ui) {$ ("# Content"). html ("Width:" + ui. size. width + "
Height:" + ui. size. height);}});});
Dit voorbeeld is interessant omdat het laat zien hoe eigenschappen in te stellen en te reageren op gebeurtenissen. In dit geval behouden de eigenschappen minWidth en minHeight het element een specifieke minimumgrootte - de gebruiker kan het element niet kleiner maken.
De code reageert ook op de resize-gebeurtenis. Er is een speciale vereiste voor het wijzigen van de grootte die u moet weten. De formaatcontainer staat los van het contentelement. Dit is de HTML-code voor dit voorbeeld:
Resizable Paragraph
De bijbehorende stijl, #ResizeMe, geeft een rand om de rand, stelt de starthoogte en -breedte in en centreert de inhoud in de container.
Wanneer u inhoud naar het scherm wilt schrijven, moet u het inhoudselement gebruiken, niet het containerelement. Anders verdwijnen de formaatgrepen en kan de gebruiker het formaat na de eerste keer niet groter maken. In dit geval wordt de huidige grootte van de container weergegeven als onderdeel van het ui-object dat is doorgegeven aan de gebeurtenishandler voor het wijzigen van de grootte.
U hebt toegang tot de informatie via de grootte. breedte en maat. hoogte-eigenschappen, zoals weergegeven in de code.
