The Gallery is deprecated. No new Gallery components may be submitted, and modifying existing components is disabled. For more information please read the Gallery Deprecation blog post. This is a static snapshot of the Gallery for archive purposes.
See 4 more by this user. Created: 09/3/12
Last CDN Push: 01/10/14
Build Tag: gallery-2014.01.10-22-44
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:
<style type="text/css">
#yourselectdiv .yui3-itsaselectlist.itsa-leftalign li {background-position: left -4501px;}
</style>
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:
There is an easy way to realize a simple scrolling list for the time being, using custom css:
<style type="text/css">
#yourselectdiv .itsa-selectlist-ullist {height: 100px; overflow-y: scroll;}
</style>
<script src="http://yui.yahooapis.com/3.9.0/build/yui/yui-min.js"></script>
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2014.01.10-22-44'
}).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-2014.01.10-22-44'
}).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');
});
All code on this site is licensed under the BSD License unless stated otherwise.