Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Itsa Selectlist (gallery-itsaselectlist) on cdn

Last Updated: 03/25/13

+ 0 -

Marco Asbreuk

YUI Contributor

See 4 more by this user.

Created: 09/3/12
Last CDN Push: 06/13/13
Build Tag: gallery-2013.06.13-01-19
Project: YUI 3
License: YUI BSD
YUI Version: 3.9.0
Free for use.

Widget that creates a button-like selectlist/combobox.

After defining, you need to listen for the selectChange event with the following fields:
e.currentTarget: the selected li-Node
e.value: returnvalue of the selected item
e.index: index of the selected item

If you want another selection-image, you could do this by changing css. The module has a lot of images and changing would involve something like:

Or if you want to use a backgroundimage of your own:
<style type="text/css">
#yourselectdiv .yui3-itsaselectlist.itsa-leftalign li {background-position: left -4501px;}
#yourselectdiv .itsa-selectlist-selected {background-image: url('...');}
</style>

Change the y-position in steps of approximately 30px.

ToDo:

enable scrolling with fixed height
enable open box (combobox with more than 1 visible item)
enable multiple selections

There is an easy way to realize a simple scrolling list for the time being, using custom css:

Tags:
itsasbreuk select list

Code Sample

<script src="http://yui.yahooapis.com/3.9.0/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2013.06.13-01-19'
}).use('gallery-itsaselectlist', function(Y) {
    var handleMonthSwitch = function(e) {alert('listitem ' + e.index + ' is choosen: ' + e.value);};
    var months = ['Januar', 'Februar', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var selectlist = new Y.ITSASelectList({items: months, defaultButtonText: 'choose a month', buttonWidth: 127});
    selectlist.on('selectChange', handleMonthSwitch);
    selectlist.render();
});
 
 
//---------------------------------------------------------------
// or, if you want another selectimage:
//---------------------------------------------------------------
 
<style type="text/css">
    #yourselectdiv .yui3-itsaselectlist.itsa-leftalign li {background-position: left -4501px;}
</style>
<div id='yourselectdiv'></div>
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2013.06.13-01-19'
}).use('gallery-itsaselectlist', function(Y) {
    var handleMonthSwitch = function(e) {alert('listitem ' + e.index + ' is choosen: ' + e.value);};
    var months = ['Januar', 'Februar', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var selectlist = new Y.ITSASelectList({items: months, defaultButtonText: 'choose a month', buttonWidth: 127});
    selectlist.on('selectChange', handleMonthSwitch);
    selectlist.render('#yourselectdiv');
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2013.06.13-01-19'
}).use('gallery-itsaselectlist', function(Y) {
    var handleMonthSwitch = function(e) {alert('listitem ' + e.index + ' is choosen: ' + e.value);};
    var months = ['Januar', 'Februar', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var selectlist = new Y.ITSASelectList({items: months, defaultButtonText: 'choose a month', buttonWidth: 127});
    selectlist.on('selectChange', handleMonthSwitch);
    selectlist.render();
});

//---------------------------------------------------------------
// or, if you want another selectimage:
//---------------------------------------------------------------