Use the following code to create a basic inputEx DDList Widget
| 1 | new inputEx.widget.DDList({ |
| 2 | parentEl: 'container1', |
| 3 | value: ["I was in first position !", "I'm second.", "Third element"] |
| 4 | }); |
| 5 | |
| view plain | print | ? |
The returned value is an array
| 1 | var list = new inputEx.widget.DDList({ |
| 2 | parentEl: 'container2', |
| 3 | value: ["I was in first position !", "I'm second.", "Third element"] |
| 4 | }); |
| 5 | |
| 6 | var onUpdate = function() { |
| 7 | YAHOO.util.Dom.get('container2').appendChild( inputEx.cn("div", null, null, "Value: ["+list.getValue()+"]") ); |
| 8 | }; |
| 9 | list.itemRemovedEvt.subscribe(onUpdate); |
| 10 | list.listReorderedEvt.subscribe(onUpdate); |
| view plain | print | ? |
By providing an object containing label and value attributes
| 1 | var items= [ |
| 2 | {label: "I was in first position !", value: 1}, |
| 3 | {label: "I'm second.", value: 2}, |
| 4 | {label: "Third element", value: 3} |
| 5 | ]; |
| 6 | var list = new inputEx.widget.DDList({parentEl: 'container3', value: items}); |
| 7 | var onUpdate = function() { |
| 8 | YAHOO.util.Dom.get('container3').appendChild( inputEx.cn("div", null, null, "Value: ["+list.getValue()+"]") ); |
| 9 | }; |
| 10 | list.itemRemovedEvt.subscribe(onUpdate); |
| 11 | list.listReorderedEvt.subscribe(onUpdate); |
| view plain | print | ? |
Display the item # by changing CSS style only :
| 1 | new inputEx.widget.DDList({ |
| 2 | id:'numberedList', |
| 3 | parentEl: 'container4', |
| 4 | value: ['I was in first position !', 'I\'m second.', 'Third element'] |
| 5 | }); |
| view plain | print | ? |
Use the following code to listen for the itemRemoved Event:
| 1 | var list = new inputEx.widget.DDList({ |
| 2 | parentEl: 'container5', |
| 3 | value: ['I was in first position !', 'I\'m second.', 'Third element'] |
| 4 | }); |
| 5 | list.itemRemovedEvt.subscribe(function() { |
| 6 | alert("removed !"); |
| 7 | }); |
| view plain | print | ? |
Use the following code to listen for the listReordered Event:
| 1 | var list = new inputEx.widget.DDList({ |
| 2 | parentEl: 'container6', |
| 3 | value: ['I was in first position !', 'I\'m second.', 'Third element'] |
| 4 | }); |
| 5 | list.listReorderedEvt.subscribe(function() { |
| 6 | alert("reordered !"); |
| 7 | }); |
| view plain | print | ? |
Let's style the list !
| 1 | var list = new inputEx.widget.DDList({ |
| 2 | parentEl: 'container7', |
| 3 | id: 'myList', |
| 4 | value: ['I was in first position !', 'I\'m second.', 'Third element'] |
| 5 | }); |
| view plain | print | ? |
Same list without "remove" link
| 1 | var list = new inputEx.widget.DDList({ |
| 2 | parentEl: 'container8', |
| 3 | id: 'myList', |
| 4 | allowDelete: false, |
| 5 | value: ['I was in first position !', 'I\'m second.', 'Third element'] |
| 6 | }); |
| view plain | print | ? |