Add/Remove YUI3 Module
Wednesday February 16, 2011
I often work on interfaces where a user is adding to a list of information. Typically it’s a list of locations or addresses that we are storing to the users account. I wrote a small module sometime ago that handled this and recently submitted it to the YUI3 Gallery. Here’s a quick sample of how you might implement this:
Sample Use
YUI({
modules: {
‘gallery-add-remove': {
fullpath: '/play/addRemove/gallery-add-remove.js'
}
}
}).use('base', 'anim', 'widget', 'json', 'node', 'substitute', 'gallery-add-remove', function(Y) {
Y.on("domready", function(){
var addRemove = new Y.addRemove({
addNode: Y.one('#locationAddButton'),
removeNode: Y.one('#locationRemoveButton'),
originalNode: Y.one('.locationWrapper'),
animate: true
});
addRemove.init();
});
});
The module accepts 4 attributes: addNode, removeNode, originalNode, animate.
<div class="locationWrapper" style="border: 1x solid #ccc; margin: 20px;">
<div>Location Address: <input type="text"></div>
<div>Location Phone: <input type="text"></div>
</div>
<button type="button" id="locationAddButton">Add</button>
<button type="button" id="locationRemoveButton">Remove</button>
Try It Out
Location Address:
Location Phone:
It’s not a complicated procedure, but it helps save some time. You can download/view the module from the YUI Gallery
