Resizables

Manchmal kommt es vor, dass man die Größe eines Elementes vom Nutzer veränderbar machen möchte. Dann sind Resizables genau das Richtige. Diese ermöglichen nämlich genau das.
Man sieht unten Rechts beim Element ein kleines Dreieck, welches man anklicken kann und dann wenn man den Mauszeige gedrückt hält, dieses vergrößeren oder verkleinern kann.

Das ist vorallem nützlich, wenn man z.B. ein Eingabefeld hat in welchem der Nutzer seinen Text eintragen kann. Wenn ihm das originale Feld zu klein ist, dann kann er es, sofern es ein Resizable ist, vergrößern.

Den Code dazu findest Du unter: https://jqueryui.com/resizable/

Es gibt verschiedene Möglichkeiten wie man so ein Resizable gestalten kann. Wie du im folgenden Bild erkennen kannst, gibt es verschiedene Beispiele (Examples)

Man kann z.B. das Feld vergrößerbar machen, jedoch nur in einem bestimmten Rahmen. Oder man kann eine maximal und minimal Größe festlegen. Zusätzlich kann man auch einstellen, dass ein Feld abhängig von einem anderen Feld gleich skaliert werden soll. Wenn also ein Feld größer gemacht wird, vergrößert sich das andere auch (Synchronous resize).