KoolListBox supports item template, to do this you simple any html to ItemTemplate
$listbox->ItemTemplate = "<b>{Text}</b> <i>{Value}</i>";
To add extra data to an item, you do:
$item->Data = array("Price"=>"$100");
span style="color: #808080; font-style: italic;">/*
* This file is ready to run as standalone example. However, please do:
* 1. Add tags <html><head><body> to make a complete page
* 2. Change relative path in $KoolControlFolder variable to correctly point to KoolControls folder
*/
$KoolControlsFolder = "../../../../KoolControls";//Relative path to "KoolPHPSuite/KoolControls" folder
"/KoolListBox/koollistbox.php""/KoolForm/koolform.php""myform""/KoolForm""sunset";
//$myform_manager->DecorationEnabled = true;
"listbox""vista""270px""260px""Apple Iphone 5 - Black","iphone5_black""Capacity"=>"16GB","Price"=>"USD 639""Apple Iphone 5 - White","iphone5_white""Capacity"=>"16GB","Price"=>"USD 639""Apple The New Ipad - Black","ipad_black""Capacity"=>"32GB","Price"=>"USD 599""Apple The New Ipad - White","ipad_white""Capacity"=>"32GB","Price"=>"USD 599""Apple Ipod shuffle - Black","ipod_black""Capacity"=>"2GB","Price"=>"USD 49""Apple Ipod shuffle - White","ipod_white""Capacity"=>"2GB","Price"=>"USD 49""<div> <div class='cssImage'><img src='images/{Value}.jpg'/></div> <div class='cssText'>{Text}</div><div class='cssCapacity'>{Capacity}</div><div style='clear:both'></div> </div>""second_listbox""Right""Middle""second_listbox""office2010silver""350px""260px""<div> <div class='cssImage2'><img src='images/{Value}.jpg'/></div> <div class='cssText2'>{Text}</div><div class='cssCapacity2'>{Capacity}</div> <div class='cssPrice'>Price: <span>{Price}</span></div> <div class='cssQuantity'><div>Quantity:</div> <input id='{Value}_Quantity' type='text' value='1' style='width:30px;' /></div> <div style='clear:both'></div> </div>""_Quantity""myform" method="post">
<div style="width:650px;""text/css">
.cssText
{
font: 11px 'Segoe UI'#3D84CA;
margin-top:1px;
}
.cssCapacity
{
color: #606060;
display: block;
font: 10px 'Segoe UI'#FFFFFF;
}
.klbSelected .cssCapacity,
.klbHovered .cssCapacity
{
color: #FFFFFF;
#C3DCFC;
'Segoe UI'#3D84CA;
padding-top:2px;
}
.cssCapacity2
{
color: #606060;
display: block;
font: 12px 'Segoe UI'#C3DCFC;
'Segoe UI''Segoe UI'