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).


Dieser Beitrag wurde unter APEX abgelegt und mit , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

3 Antworten zu APEX: jquery resizable und Textareas

  1. Pingback: CC13.com » Blog Archive » APEX: jquery-pulsate und APEX-Validations

  2. Avalarion sagt:

    Hey ho,

    kennst du was vergleichbares für Prototype? Würde nur sehr ungerne ne weitere Lib in meine Webseite einbinden müssen…

    Gruß

    Bastian

  3. cc13 sagt:

    Hallo Bastian,

    leider nein und ich muß auch sagen, dass ich Prototype inzwischen aus meinen APEX-Anwendungen entfernt habe. jQuery bringt alles, wenn nicht noch mehr, mit, was ich brauche. 😉

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.