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.

Picklist Widget (gallery-picklist) on cdn

Last Updated: 01/29/13

+ 0 -

Todd Smith

YUI Contributor

See 13 more by this user.

Created: 02/7/12
Last CDN Push: 03/23/12
Build Tag: gallery-2012.03.23-18-00
Project: YUI 3
License: YUI BSD
YUI Version: 3.8.1
Free for use.

This widget provides a familiar Form "wizard" type of interface, consisting of two HTML <select> boxes side by side, and Add / Remove buttons. I worked this one up because some users have difficulty remembering the Ctrl or Cmd key combinations to use the <select multiple> form element.

The PickList widget takes an empty DIV container as input, along with an array of options object data (which can include "value", "text" and "title" for tooltips). During rendering, the widget adds the <select> boxes and <buttons> and hooks all of the handlers associated with them. A template can be provided to prescribe the positional layout and styling of the components (i.e. <select>'s, <buttons>, etc..) within the widget.

An example of the rendered widget using css Buttons is;

The widget supports button types of Y.Button, css Buttons, html and <a> links for the actions.

NOTE: Widget requires at least 3.5.0pr2, because it uses Y.Button

To get the selected options, a method .getSelections is provided to return the "right-hand side" options.

Delayed loading of the options is also provided, to allow for use with remote data. Just do myPickList.set('options', myOptionData);

I'm considering adding the capability to accept input via DataSource and/or a plugin to populate the data, if there is any interest for that please let me know.

Code Sample

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

/*
 For an HTML template defined as (Y.Lang.sub is used to fill placeholders) ;
 
<script type="text/x-template" id="pl-template">	
   <fieldset class="fieldset4">
      <table>
         <tr><td class="left_opt" align="center">
              Palette Available:<br/>
              {OPTIONS_CONTAINER}
            </td>
            <td class="center_btns" align="center">
              {ACTION_ALL}<br/>
              {ACTION_ONE}<br/>
              {ACTION_BACK}<br/>
              {ACTION_ALLBACK}
            </td>
            <td class="right_opt" align="center">
              Color Choices<br/>
              {SELECTIONS_CONTAINER}
            </td>
         </tr>
         <tr><td colspan="3" align="right"> </td></tr>
         <tr><td colspan="3" align="right"><button id="btnProcess">Process Results</button></td></tr>
</table>
	</fieldset>
</script>
*/
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.03.23-18-00'
}).use('gallery-picklist', function(Y) {
 
   var jsData;	
 
// Define some data ... note, not required to be in { text:, value: } format
   jsData = [
	{ cname:'White',  	chex:'#FFFFFF' },	
	{ cname:'Silver', 	chex:'#C0C0C0' },	
	{ cname:'Navy', 	chex:'#000080' },	
	{ cname:'Fuchsia',      chex:'#FF00FF' },	
	{ cname:'Purple', 	chex:'#800080' }
   ];	
 
// Create a tooltip for the Options ...
   for(var i=0; i<jsData.length; i++)
	jsData[i].ctitle = 'Color ' + jsData[i].cname + ' (Hex ' + jsData[i].chex + ')';
 
 
//
// Create the PickList ... using cssButtons 
//
   var myPL = new Y.PickList( {
	srcNode: 	'#picklist_cont',
	template:	'#pl-template',
	buttonType : 	'cssbutton',
	optionsMap : 	{ text:'cname', value:'chex', title:'ctitle' },
	options : 	jsData
   });
 
   myPL.render();
 
//
//  Display the "selected" items
//
   new Y.Button({srcNode:'#btnProcess'}).on("click",function(){
	var msg = "Selections are;",
	    pl_data = myPL.getSelections() || [];	// returns array of objects {value, text, title}
 
	Y.Array.each( pl_data, function(item){
	     msg += " Value=[" + item.value + "]  Text=[" + item.text + "], ";
	});
 
	alert( msg );
   });	
 
});

/*
 For an HTML template defined as (Y.Lang.sub is used to fill placeholders) ;

var jsData;

// Define some data ... note, not required to be in { text:, value: } format
   jsData = [
	{ cname:'White',  	chex:'#FFFFFF' },	
	{ cname:'Silver', 	chex:'#C0C0C0' },	
	{ cname:'Navy', 	chex:'#000080' },	
	{ cname:'Fuchsia',      chex:'#FF00FF' },	
	{ cname:'Purple', 	chex:'#800080' }
   ];

// Create a tooltip for the Options ...
   for(var i=0; i<jsData.length; i++)
	jsData[i].ctitle = 'Color ' + jsData[i].cname + ' (Hex ' + jsData[i].chex + ')';

//
// Create the PickList ... using cssButtons 
//
   var myPL = new Y.PickList( {
	srcNode: 	'#picklist_cont',
	template:	'#pl-template',
	buttonType : 	'cssbutton',
	optionsMap : 	{ text:'cname', value:'chex', title:'ctitle' },
	options : 	jsData
   });

myPL.render();

//
//  Display the "selected" items
//
   new Y.Button({srcNode:'#btnProcess'}).on("click",function(){
	var msg = "Selections are;",
	    pl_data = myPL.getSelections() || [];	// returns array of objects {value, text, title}
		
	Y.Array.each( pl_data, function(item){
	     msg += " Value=[" + item.value + "]  Text=[" + item.text + "], ";
	});
	
	alert( msg );
   });

});