Wie ein Resizable Schnittstelle in CSS3 zu erstellen
Die große Vielfalt und Arten von Bildschirmen zur Anzeige von Informationen machen es notwendig, dass Ihre CSS3 Befehle ermöglichen es dem Benutzer Elemente, um die Größe je nach Bedarf. In den meisten Fällen können Sie einfach erlauben dem Benutzer das Element jeder Größe zu machen. Jedoch kann es Situationen geben, in denen Sie so die Menge der Größe ändern überwachen müssen, dass Sie die Inhalte anpassen können auf die Bedürfnisse des Behälters zu erfüllen.
Das folgende Beispiel zeigt, wie ein Objekt, um die Größe und seiner Größe zu überwachen. (Können Sie finden komplette Code für dieses Beispiel in dem Kapitel 06 Interaktionen Ordner des herunterladbaren Code wie ResizeContent.HTML.)
$ (Function () {$ ( "# ResizeMe") resizable ({minWidth:. 200, minHeight: 60, Größe ändern:.-Funktion (Ereignis, ui) {$ ( "# Inhalt") html ( "Breite:" + ui .size.width + "
Höhe: "+ ui.size.height) -}}) -}) -Dieses Beispiel ist interessant, weil es zeigt, wie Eigenschaften festlegen sowie auf Ereignisse zu reagieren. In diesem Fall halten die minWidth und minHeight Eigenschaften, um das Element eine bestimmte Mindestgröße - der Benutzer nicht das Element kleiner machen kann.
Der Code reagiert auch auf das Resize-Ereignis. Es gibt eine spezielle Anforderung zum Ändern der Größe Sie kennen müssen. Das Ändern der Größe Container ist getrennt von dem Inhaltselement. Hier ist der HTML-Code für dieses Beispiel:
resizable Absatz
Die zugehörige Stil, #ResizeMe, bietet einen Rahmen um den
Wenn Sie Inhalte auf dem Bildschirm zu schreiben möchten, müssen Sie das Inhaltselement zu verwenden, nicht das Containerelement. Andernfalls werden die Anfasser verschwinden, und der Benutzer nicht in der Lage sein, das Element nach dem ersten Mal, um die Größe. In diesem Fall wird die aktuelle Größe des Behälters als Teil des ui Objekt an den Resize-Ereignishandler übergeben.
Der Zugriff auf die Informationen, obwohl die Size.width und Size.height Eigenschaften, wie im Code dargestellt.