Proto.IPS - In place select widget
In place editing is a great way to enhance user interface when dynamically changing data on a page. Scriptaculous’ In Place Editor is a nice extension with extensive set of features and options. I recently needed such functionality in one of the projects, but IPE wasn’t exactly the best tool for the job. The idea was to let users select one of the predefined options as well as add their own. GMail chat widget and the way it allows to change availability status is a great example of such user interface addition. Another concern was to make control fit in a limited space - google simply gets rid of “Save”/”Cancel” buttons and saves value of the input field when clicking outside of control.
I tried duplicating this behavior into a simple prototype based script which can be simply plugged into any project.
This work is experimental (there are couple of known issues) and I would appreciate any feedback.
Head over to a demo page and let me know what you think.
Quessir said:
#Very nice! :)
I think, it would be great tool if U add feture to use it as html select.
Daniel Skinner said:
#Very nice indeed.
A feature suggestion: Leave the 'open the menu' button in place when the text field becomes active. It started to irritate me when I accidentally clicked the text area but actually wanted to select from the drop down. It would save clicks when making the mistake it did.
This is definately a useful widget.
Andrew Dupont said:
#Brilliant. How about tab-focusing and keyboard shortcuts?
kangax (article author) said:
#@all
Thanks guys! I appreciate the feedback.
@Daniel
When activated, text input simply gets positioned on top of everything else. Since all the elements are customizable via CSS, you could easily set the width of a text input in such way that trigger is always visible.
@Andrew
Great suggestions. I have just added tab-based activation. What's interesting is that hidden (display: none) elments are taken out of document's tabIndex order - had to hide the text input by toggling .hidden class (margin-left: -1000px). All seems to be working as expected. I will add up/down arrows behavior later on.
Jonah said:
#It would be really awesome if it could accept nested UL´s so that it could be used to, for example, select a page in a sitemap.
Nested UL's are not supported in selectboxes now, and it's a feature that, at least I would really appreciate.
Great job!
- jonah
pitchblack said:
#dude, your demo page looks a bit messy in safari3 on ms windows. other than that - going to try IPS on my dev mac .) great job!
manny said:
#Hey.. this is a really, really nice widget. Great job!
Here's a few features I wish it had:
Create css ids or classes for each option so they may be styled.
Make the image configurable so I can set it with each option.
Aaron said:
#Great work! I had one problem though... It was only saving the changes when I hit enter but when you use this in a regular form that tends to submit it whether you're ready for that or not :)
I was losing my text after clicking out of the box so I added a another save hook when the input loses focus:
this.input
.observe('focus', this.showInput.bind(this))
.observe('blur', function(e) {
this.save($F(this.input));
this.hide;
}.bind(this))
Also, I second the idea of adding id's to all the of the elements. That's another small change I made.
jerry said:
#Hello, I am a graphic artist and have been trying to break into the web development side of things, and quite frankly, don't know where to start as far as script. I know html, some sql, some php, but where would you tell someone to start learning. I am sure you don't have time to mess with someone as unskilled as myself, but surely there are some really good tutorials somewhere. I don't even know where to put the code to edit and work with it. Visual basic? where? I have notepad++, dreamweaver, etc. I just want to grow my skills. Anyone who can help, I would be happy to trade my skills as a designer and artist.