YUI().use('dd-chooser', function(Y){
var chooser = new Y.NekoCM.DDChooser({
launcherNode: '#btn-color',
items: [
['First item', 'val1'],
['Second item', 'vel2']
]
});
chooser.render();
chooser.on('click', function(e){
alert(this.get('value'));
});
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Spinner Test</title>
</head>
<body>
<span id="btn-color">Choose color</span>
</body>
</html>
body {
padding: 20px;
}
.yui3-dd-chooser-hidden {
display: none;
}
.yui3-dd-chooser-content {
background-color: #F1F1F1;
border: 1px solid silver;
}
.yui3-dd-chooser-content li {
padding: 5px;
}
.yui3-dd-chooser-content li:hover {
background-color: silver;
}
#btn-color {
padding: 3px;
background-color: #F1F1F1;
border: 1px solid silver;
}
External resources loaded into this fiddle: