|
TABLE
MAKE
CUSTOMIZE
EFFECTS
EFFECTS CYCLE
EFFECTS CYCLES
VIRTUAL BOX
PLUG-IN
GLIDER
|
Make.List
Try to create lists without writing HTML code: clicking on the buttons, the lists will be created.
The first is a normal unordered list, the second is a list of lists (with nested links), the third is a list of links. window.addEvent('domready', function() { var items1 = [ 'blue', 'red', '<i>green</i>', 'yellow', '<strong>pink</strong>', 'orange' ]; var items2 = [ 'item1', '<i>item2:</i>', ['item3', 'item4', {text:'item2', href:'#'}], 'item5', 'item6', '<i>item7:</i>', [{text:'item8', href:'#'}, 'item9'] ]; var items3 = [ 'home', {text:'download', href:'/download', linkOptions: {'title': 'download', 'target': '_blank'}}, 'examples', {text:'documentation', href:'/documentation/constructors', linkOptions: {'title': 'docs', 'target': '_blank'}} ]; var box = $('box'); var box2 = $('box2'); var box3 = $('box3'); var listOptions = {'class': 'list1'}; var list1 = new Make.List('list1', items1, {listOptions: listOptions, content: 'html'}).make(); var list2 = new Make.List('list2', items2, {listOptions: listOptions, content: 'html'}).make(); var list3 = new Make.List('list3', items3, {listOptions: listOptions}).make(); $('ok1').addEvent('click', function() { if(!$('list1')) list1.inject(box); }); $('ok2').addEvent('click', function() { if(!$('list2')) list2.inject(box2); }); $('ok3').addEvent('click', function() { if(!$('list3')) list3.inject(box3); }); }); |