IconMenu
IconMenu lets you make a scrollable menu of... well, icons. The component is designed for a list of block-elements thats meant to scroll. This behavior really isn't very new or novel; scrolling carousels are fairly common. What IconMenu does that is different is actually figure out the pagination for you based on the size of the icons (the block elements). If you have a bunch of icons - and these can be images or anything else - it will figure out how many are currently visible, and when the user pages forward or back, go to the appropriate location. Additionally, unlike other carousels, the entire list is in a single element (in this example, a ul containing a bunch of lis), meaning that you could, for example, allow the user to reorder the content. Most other carousels have a container for each "page" of content.
Using IconMenu is pretty straight forward. You have a container element that has an overflow value of "hidden". In that element is a list of 'icons'; in this example the lis that contain an image and a checkbox. You tell IconMenu which elements execute page right/left, as well as any buttons to remove items or clear the list.
The only requirement is that no icon is wider than the scrollable area.
Here's the html for the example below:
<div id="toolboxHistory"> <div id="personalizer"> <div id="userStatus"> <div class="margins"> <div id="historyStatus"> <div id="itemName"> <span class="fxMarquee" style="position: relative;"><b>Your product history</b></span> </div> </div> </div> </div> <div id="history"> <div class="margins"><img width="8" height="53" id="scrollLeft" alt="scroll left" src="/wiki/art/iconmenu/left_scroll.png"/> <div id="userHistoryBar" class="iconbar"> <ul class="set" style="left: 0px;"> <li><img src="http://i.i.com.com/cnwk.1d/sc/31355103-2-60-0.gif" id="31355103"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/32133413-2-60-0.gif" id="32133413"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/32069546-2-60-0.gif" id="32069546"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/32034088-2-60-0.gif" id="32034088"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/32434432-2-60-0.gif" id="32434432"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/31491515-2-60-0.gif" id="31491515"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/31879261-2-60-0.gif" id="31879261"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/32425829-2-60-0.gif" id="32425829"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/30895581-2-60-0.gif" id="30895581"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/32309245-2-60-0.gif" id="32309245"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/31861538-2-60-0.gif" id="31861538"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/31684193-2-60-0.gif" id="31684193"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/31756952-2-60-0.gif" id="31756952"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/31660763-2-60-0.gif" id="31660763"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/32085029-2-60-0.gif" id="32085029"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/31355096-2-60-0.gif" id="31355096"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/31414802-2-60-0.gif" id="31414802"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/31429517-2-60-0.gif" id="31429517"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/32088045-2-60-0.gif" id="32088045"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/32327766-2-60-0.gif" id="32327766"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/32098288-2-60-0.gif" id="32098288"/><span class="caption"> <input type="checkbox"/></span></li> <li><img src="http://i.i.com.com/cnwk.1d/sc/32471222-2-60-0.gif" id="32471222"/><span class="caption"> <input type="checkbox"/></span></li> </ul> </div><img width="8" height="53" id="scrollRight" alt="scroll right" src="/wiki/art/iconmenu/right_scroll.png"/> <div id="actionLinks"> <img width="83" height="8" id="removeSelected" alt="remove selected" src="/wiki/art/iconmenu/remove_selected.png"/> <img width="2" height="10" alt="|" src="/wiki/art/iconmenu/pipe.png"/> <img width="43" height="8" id="clearall" alt="clear all" src="/wiki/art/iconmenu/clear_all.png"/> </div> </div> </div> </div> </div>
And the code you need to execute:
var myIconMenu = new IconMenu({ //the list that contains all the 'icons' container: $('userHistoryBar').getElement('ul'), //the images in the icons images: $$('#userHistoryBar img'), //captions, if any; here I use the checkboxes as the caption - these are optional captions: $$('#userHistoryBar input'), removeLinks: $$('#history #removeSelected'), clearLinks: $$('#history #clearall'), //a function to execute when an item is selected onSelect: function(index, img){ img.setStyle('border', '1px solid #77f'); }, //ditto, for deselect onDeSelect: function(index, img){ img.setStyle('border', '1px solid #555'); }, onAdd: function(img, caption){ //select any items that have their checkboxes already checked this.selectItem(this.imgs.indexOf(img), !!caption.get('checked')); //a function executed when the user clicks the image //or the checkbox var selectIt = function(img){ this.selectItem(this.imgs.indexOf(img)); }.bind(this); //add the event to the select input caption.addEvent('click', function(){ selectIt(img); }.bind(this)); //add the event to the image img.addEvent('click', function(){ selectIt(img); caption.set('checked', img.hasClass('selected')); }.bind(this)); } });
