There is already a good JQuery plugin for adding a grippie handle at the bottom of TextArea. Like below:
It works pretty good in every browsers. I believe it is the simplest sample. You can find such sample named "ResizableTextArea.html" in the attached source code.
However, when putting it into your code, make sure it is well tested in different test cases. There are 2 main test cases you have to fix immediately:
- When resize the browser window, the handle bar doesn't auto resize!
- When resize the TextArea by dragging the south-east icon, the handle bar doesn't auto resize!
To resolve this, I implemented a second sample named "ResizableTextArea2.html" using JQuery-ui plugin. It works pretty well and the good thing is that you can replace any handle you like through CSS. Only drawback to this sample is that, it's quite not good looking to dock the handle bar to bottom of TextArea that is already affected by jquery ui css.
To resolve problem of sample2, I went on with more simple sample by using mousemove event handler. Personally, I prefer the last solution because it's quite simple with native JQuery and will not create any conficts. If you want to go with sample2, you'll have to do a lot of customization for JQuery-ui plugin. It's daunting task that I don't want to risk my tremendous efforts for such task of litte value. Sometimes, enough is better! :-)
Download source code here: Resizable TextArea with handle bar
Happy Coding,
Henry Pham,
0 nhận xét:
Đăng nhận xét