Video: Was ist Skalierbarkeit? | Programmieren lernen mit JavaScript #32 2025
Die große Vielfalt und Arten von Bildschirmen, die zum Anzeigen von Informationen verwendet werden, machen es erforderlich, dass Ihre CSS3-Befehle dem Benutzer die Größe von Elementen ändern können. erforderlich. In den meisten Fällen können Sie dem Benutzer einfach erlauben, das Element beliebig zu machen. Es kann jedoch Situationen geben, in denen Sie die Größe der Größenänderung überwachen müssen, damit Sie den Inhalt an die Anforderungen des Containers anpassen können.
Das folgende Beispiel zeigt, wie Sie die Größe eines Objekts ändern und seine Größe überwachen können. (Den vollständigen Code für dieses Beispiel finden Sie im Ordner "Chapter Interactions" des herunterladbaren Codes als ResizeContent. HTML.)
$ (function () {$ ("# ResizeMe"). Resizable ({minWidth: 200, minHöhe: 60, Größe ändern: function (event, ui) {$ ("# Content"). html ("Breite:" + ui. Größe. Breite + "
Höhe:" + ui. Größe. Höhe);}});});
Dieses Beispiel ist interessant, weil es zeigt, wie Eigenschaften festgelegt und auf Ereignisse reagiert wird. In diesem Fall behalten die Eigenschaften minWidth und minHeight das Element auf eine bestimmte Mindestgröße - der Benutzer kann das Element nicht verkleinern.
Der Code reagiert auch auf das Resize-Ereignis. Es gibt eine spezielle Anforderung für die Größe, die Sie kennen müssen. Der Größenänderungscontainer ist vom Inhaltselement getrennt. Hier ist der HTML-Code für dieses Beispiel:
Größenveränderbarer Absatz
Der zugehörige Stil, #ResizeMe, bietet einen Rahmen um den, setzt die Starthöhe und -breite und zentriert den Inhalt im Container.
Wenn Sie Inhalte auf den Bildschirm schreiben möchten, müssen Sie das Inhaltselement und nicht das Containerelement verwenden. Andernfalls verschwinden die Griffe zur Größenänderung und der Benutzer kann das Element nach dem ersten Mal nicht mehr in der Größe ändern. In diesem Fall wird die aktuelle Größe des Containers als Teil des UI-Objekts angezeigt, das an den Ereignishandler für die Größe der Größe übergeben wird.
Sie greifen auf die Informationen über die Größe zu. Breite und Größe. Höhe Eigenschaften, wie im Code gezeigt.
