TextboxList: Fancy Facebook-Like dynamic inputs! Now, in Prototype
Hey everybody, after coming across Guillermo Rauch’s script, I knew i had to port it into my favorite library, Prototype. In this page you will find the Guillermo’s script translated into Prototype. I kept the original formatting and will post it just like he did for the ease of understanding for people who used the original first. Later on this week, I will release an improved version of the script. This post is a conversion of the original deal. The improved script will include more features and implement several improvements. Let me include the original post by Guillermo that describes the script. The post is slightly modified to suite my blog’s format. Have fun, and please! report any glitches or feature requests so I will implement those in the improved version, due later on this week.
Check out a demo of TextboxList before reading!
I created my own, MooTools 1.2 [Now: Prototype] compatible, in just 5kb. It’s not only small, but also really frexible! Here are some notes of the creation process and how to implement it in your own projects.
Anatomy of the control
As usual, I try to come up with a semantic, unobtrusive approach. I start with the CSS and the markup that will be my end result.
I want to go from something like this:
to something like this (only one possible scenario, naturally)
Basically, it’s a group of pieces (that I’ll call bits), that can be either a box or an input (small, except for the main one). The user is able to move around between the bits by using his keyboard or his mouse.
The only challenges I found was handling the complex events while keeping everything crossbrowser. Again, none of this would have been possible if it wasn’t for MooTools (1.2) [Now: Prototype].
All you have to do is:
Where input-demo is the id of the desired input to replace
The constructor can take these options:
* onInputFocus (event, fired when an input gets focus)
* onInputBlur (event, fired when an input loses focus)
* onBoxFocus (event, fired when a box gets focus)
* onBoxBlur (event, fired when a box loses focus)
* onBoxDispose (event, fired when a box is removed)
* resizable (option, hash, passed to ResizableTextbox constructor)
* className (option, string, prefix of the classnames of the generated objects)
* extrainputs (option, boolean, adds small inputs between boxes if true)
* startinput (option, boolean, adds a small input before the first box if true)
* hideempty (option, boolean, hides the small inputs by default)
Click here to download the cool script