Examples of ITSASelectlist

org.sgx.yuigwt.yuigallery.itsaselectlist.ITSASelectlist

dget that creates a button-like selectlist/combobox. Doesn't use progressive enhancement yet, because the main reason for developing was it's use in the Itsa-Toolbar.
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:
enabale progressive enhancement
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:

 <style type="text/css"> #yourselectdiv .itsa-selectlist-ullist {height: 100px; overflow-y: scroll;} </style>

@author sg

    
    String[] months = new String[]{
      "Januar", "Februar", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
    }; 
    
    ITSASelectlist selectlist = Y.newITSASelectlist(ITSASelectlistConfig.create().items(months));
    selectlist.on(ITSASelectlist.EVENT_SELECTCHANGE, new EventCallback<ITSASelectlistEvent>() {
      @Override
      public void call(ITSASelectlistEvent e) {
        console.log("selected item index "+e.index()+" - value: "+e.value()); 
      }
    }); 
    selectlist.render(parent);
    
    
    //now another select list using custom items
    
//    String[] colors = new String[]{
//      "#FF0000", "#ff6600", "#ff77ee", "#66ff66", "#00ff66", "#66000ff"
//    };  
    
    JsArray<ITSASelectlistItem> items = JsArray.createArray().cast(); 
    for (int i = 0; i < 20; i++) {
      String color = "#"+testUtil.randomColor().getHex();//colors[i]; 
      ITSASelectlistItem item = ITSASelectlistItem.create()
        .text("<div style='background-color:"+color+";'></div>")
        .returnValue(color);
      items.push(item); 
    }
    ITSASelectlist selList2 = Y.newITSASelectlist(ITSASelectlistConfig.create()
      .items(items)
      .className("mycolors")
      .listWidth(256)
      .btnSize(2)
      .iconClassName("itsa-icon-textcolor")
      .defaultButtonText("")
    ); 
    selList2.on(ITSASelectlist.EVENT_SELECTCHANGE, new EventCallback<ITSASelectlistEvent>() {
      @Override
      public void call(ITSASelectlistEvent e) {
        console.log("selected color: "+e.value()); 
      }
    }); 
    selList2.render(parent.appendChild("<div id=\"divcolorpicker\"></div>")); 
    
    StyleSheet sty = Y.newStyleSheet();
    
    //the main color label
    sty.set("#divcolorpicker .itsa-selectlist-selectedmain div",

All source code are property of their respective owners. Java is a trademark of Sun Microsystems, Inc and owned by ORACLE Inc. Contact coftware#gmail.com.

Examples of ITSASelectlist

Examples of org.sgx.yuigwt.yuigallery.itsaselectlist.ITSASelectlist