Resizable_Textarea

Powiększalne pole textarea

Zobaczyłem dziś na stronach portalu JDN sprytny trik. Pole textarea które można dowolnie powiększać. Bardzo przydatna rzecz: projektujemy formularze z małym polem textarea żeby nie zabierać dużo miejsca, a użytkownik w razie potrzeby powiększy je sobie według potrzeb.

Kod jest wzięty z systemu CMS Drupal. Przykład na stronach JDN można zobaczyć tutaj: http://jdn.pl/user/register.

Przykładowy kod strony:

<script type="text/javascript" language="javascript" src="drupal.js"></script>
<script type="text/javascript" language="javascript" src="texarea.js"></script>
<style>
.resizable-textarea {
     width: 95%;
}
.resizable-textarea .grippie {
    height: 14px;
    background: #eee url(grippie.png) no-repeat 100% 100%;
    border: 1px solid #ddd;
    border-top-width: 0;
    cursor: s-resize;
}
</style>
<form>
<textarea name="f" id="f" class="resizable" rows="10" cols="50">
</textarea>
</form>

Na początku dołączamy dwa pliki z kodem JavaScript. Pierwszy (drupal.js) zawiera ogólne funkcje, drugi zawiera kod modyfikujący zachowanie elementów textarea na stronie.

Następnie definiujemy dwie klasy CSS: pierwsza określa szerokość naszego pola, druga definiuje wygląd dolnego paska z 'uchwytem' do powiększania.

Na samym końcu definiujemy właściwe pole textarea. Konieczne jest podanie atrybutu id oraz ustawienia jednej z klas na resizable.

Attachments:

grippie.png		162 bytes
drupal.js		9013 bytes
textarea.js		3709 bytes