APEX: jquery resizable und Textareas

Manchmal ist es sinnvoll, Textareas in der Größe veränderbar zu gestalten. Der Anwender kann dann abhängig von seiner Bildschirmgröße diese Textareas größer oder kleiner „ziehen“.

Wie schon in einem vorigen Beispiel benötigen wir das jquery-Paket und zusätzlich das entsprechende UI-Paket „Resizable„.

Beide laden wir in die SharedComponents der APEX-Umgebung und referenzieren sie im Header-Text der gewünschte Seite.

<script type="text/javascript" src="#WORKSPACE_IMAGES#jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="#WORKSPACE_IMAGES#jquery-ui-personalized-1.6rc2.min.js"></script>

An die gleiche Stelle schreiben wir den Code, um die beiden im Beispiel verwendeten Textareas „P2_INTERNE“ und „P2_EXTERNE“, veränderbar zu machen.

<script type="text/javascript"> 
$().ready(function()
{
  $("#P2_INTERNE").resizable(
    {
      autoHide: true,
      maxHeight: 300,
      maxWidth: 500,
      minHeight: 50,
      minWidth: 200    
    }
  );

  $("#P2_EXTERNE").resizable(
    {
      autoHide: true,
      maxHeight: 300,
      maxWidth: 500,
      minHeight: 50,
      minWidth: 200    
    }
  );

});
</script>

Die Parameter der Funktion „resizable“ sind, denke ich, selbsterklärend.

Und schon kann der Anwender die Textareas mit der Maus in der Größe verändern (siehe Bild1 und Bild2).