Features :
- Auto orientation of expand
- Highly Customizable
- Easily draggable with jQueryUI
- Browser support ( IE > 5.5??, FireFox, Safari, Opera )
If you use this module, thanks to write a little coment on http://www.Web2Ajax.fr/ :)
You can look at the HTML source to understand how to use this autosuggest module
To download example, click here.
FaceBook Like – jQuery and autosuggest Search Engine
View article & demo »
jQuery LazyLoad Ad : Defer advertisement loading
View article & demo »
To test the Dock Menu Feature, look at the top left corner of this page.
You can drag the list and move it to change orientation.
Opposed to DEMO 2, orientation of expand is set to 'auto' and swap to better position.
// Use default Config and set Menu draggable
jQuery('#demo_with_html ul').GeniusMenu().draggable() ;
// Transform standard ul in genius jQuery('#demo_like_select ul').GeniusMenu({ selectorRef: 'div', minItems: 10, alwaysDisplayActiveLabel: true, expandTime: 200, collapseTime: 400, collapseFalls: false, orientation: 'bottom-right' }) ;// HTML Code <div id='demo_like_select'> <ul class='genius-menu'> <li class='desactive_growl'><div class='label'><span>No</span></div></li> <li class='active_growl'><div class='label'><span>Yes</span></div></li> </ul> <span class='label'>Activate Growl Messages : </span> </div>
You can create a Genius Menu from just a Json file.
And for more fun, why not turn it into a simple audio player ?
Let's Go !
// HTML Code
<div id='demo_playerAudio'></div>
// Inject Json to create a new Genius. Render it draggable for the example
jQuery('#demo_playerAudio').GeniusMenu({
alwaysDisplayLabels: false,
alwaysDisplayActiveLabel: true,
dataList: [
{label: '<b>Lilea Narrative</b> <br>Transport', img: '...2Fa41cd54ec8ab789eb433afd5506f90ea.jpg&w=200&h=200'},
...
{label: '<b>Caravan Palace</b> <br>Bambous', img: '...69c6588546ed0c7afb92617.jpg&w=200&h=200'},
{label: '<b>Natural Self</b> <br>Faultlines', img: '...d4c793b95.jpg&w=200&h=200'}
]
}).draggable() ;
// -- Bind Play clicked track
var lastMp3 = '' ;
var timeDrag = false ;
jQuery('#demo_playerAudio ul li').bind('onClick', function() {
var mp3 = $(this).data('data').mp3 ;
var el = $(this) ;
if ( mp3 == lastMp3 ) return ;
lastMp3 = mp3 ;
el.parent().parent().find('.audioPlayer').remove() ;
setTimeout(function() {
el.prepend('<div class="audioPlayer noBind"><object type="application/x-shockwave-flash" data="tpl/dewplayer.swf" width="200" height="20" id="dewplayer" name="dewplayer" class="noBind"><param name="movie" value="tpl/dewplayer.swf" /><param name="flashvars" value="mp3='+mp3+'&autoplay=1&volume=80" /></object></div>') ;
// -- Little Bug Fix due to draggable css properties and flash
el.find('.audioPlayer').hover(function() {
el.parents('ul').parent().draggable( 'destroy' ) ;
}, function() {
if ( timeDrag ) clearTimeout(timeDrag) ;
timeDrag = setTimeout(function() {
el.parents('ul').parent().draggable() ;
}, 500) ;
}) ;
}, 500) ;
}) ;