Muitos frameworks como o Primefaces para Java possuem a implementação de tal componente como podemos ver neste link: http://www.primefaces.org/showcase/ui/picklist.jsf
Neste post, veremos um exemplo de como implementar tal componente utilizando HTML e Javascript.
HTML (index.html)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>PickList</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.21" />
<script src="js/PickList.src.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/picklist.css">
<script type="text/javascript">
function onload(){
$pick.create({
name: "selection1",
clazz: "picklist-container",
selector: "picklist",
itensLabel: "Ingredientes Disponíveis",
itensSelectedLabel: "Selecionados",
addLabel: "Adicionar",
removeLabel: "Remover",
cleanLabel: "Limpar",
type: $pick.TYPE_ID,
selectionItens: [
{value:0, name:'Pão', selected: true},
{value:1, name:'Batata', selected: false},
{value:2, name:'Alface', selected: false},
{value:3, name:'Cebola', selected: false},
{value:4, name:'Queijo', selected: false},
{value:5, name:'Tomate', selected: false},
{value:6, name:'Presunto', selected: false},
{value:7, name:'Maionese', selected: false}
]
});
}
</script>
</head>
<body onload="onload()">
<h1>Crie seu sanduíche</h1>
<form id="form" method="post" name="form">
<div id="picklist"></div>
</form>
</body>
</html>
Javascript (js/script.js)
PickList = function(){
this.TYPE_ID = 0;
this.TYPE_CLASS = 1;
this.CLOSE_DIV = '</div>';
this.ITENS_LIST = '<select size="10" id="item-list-#{ELEMENT}" name="#{NAME}-item-list"></select>';
this.ITENS_LIST_LABEL = '<label for="item-list-#{ELEMENT}">#{ITENS-LABEL}</label>';
this.ITENS_LIST_DIV = '<div class="picklist-left">';
this.BUTTONS_DIV = '<div class="picklist-buttons">';
this.BUTTON_ADD = '<div id="picklist-add-button-#{ELEMENT}" class="picklist-button"><span>#{ADD}</span></div>';
this.BUTTON_REMOVE = '<div id="picklist-remove-button-#{ELEMENT}" class="picklist-button"><span>#{REMOVE}</span></div>';
this.BUTTON_CLEAN = '<div id="picklist-clean-button-#{ELEMENT}" class="picklist-button"><span>#{CLEAN}</span></div>';
this.ITENS_SELECTED_LIST = '<select size="10" id="selected-item-list-#{ELEMENT}" name="#{NAME}-selected-item-list"></select>';
this.ITENS_SELECTED_LIST_LABEL = '<label for="selected-item-list-#{ELEMENT}">#{ITENS-SELECTED-LABEL}</label>';
this.ITENS_SELECTED_LIST_DIV = '<div class="picklist-right">';
this.SELECTED_INPUT_STRING = '<input type="hidden" id="selected-items-#{ELEMENT}" name="selected-items-#{ELEMENT}" />';
this.create = function(properties){
/*
* Getting elements
*/
var element = document.getElementById(properties.selector);
if (!element ||
!properties.name){
return 0;
}
var name = properties.name;
/*
* Creating left side elements
*/
var htmlElements = this.ITENS_LIST_DIV;
htmlElements += this.ITENS_LIST_LABEL.replace("#{ELEMENT}", element.id).replace("#{ITENS-LABEL}", properties.itensLabel);
htmlElements += this.ITENS_LIST.replace("#{ELEMENT}", element.id);
htmlElements += this.CLOSE_DIV;
/*
* Creating buttons on the middle
*/
htmlElements += this.BUTTONS_DIV;
htmlElements += this.BUTTON_ADD.replace("#{ELEMENT}", element.id).replace("#{ADD}", properties.addLabel);
htmlElements += this.BUTTON_REMOVE.replace("#{ELEMENT}", element.id).replace("#{REMOVE}", properties.removeLabel);
htmlElements += this.BUTTON_CLEAN.replace("#{ELEMENT}", element.id).replace("#{CLEAN}", properties.cleanLabel);
htmlElements += this.CLOSE_DIV;
/*
* Creating right side elements
*/
htmlElements += this.ITENS_SELECTED_LIST_DIV;
htmlElements += this.ITENS_SELECTED_LIST_LABEL.replace("#{ELEMENT}", element.id).replace("#{ITENS-SELECTED-LABEL}", properties.itensSelectedLabel);
htmlElements += this.ITENS_SELECTED_LIST.replace("#{ELEMENT}", element.id);
htmlElements += this.CLOSE_DIV.replace("#{ELEMENT}", element.id);
htmlElements += this.SELECTED_INPUT_STRING.replace("#{ELEMENT}", element.id)
.replace("#{ELEMENT}", element.id);
element.innerHTML = htmlElements;
element.className += properties.clazz;
/*
* Element vars
*/
var itensList = document.getElementById("item-list-#{ELEMENT}".replace("#{ELEMENT}", element.id));
var itensSelectedList = document.getElementById("selected-item-list-#{ELEMENT}".replace("#{ELEMENT}", element.id));
var buttonAdd = document.getElementById("picklist-add-button-#{ELEMENT}".replace("#{ELEMENT}", element.id));
var buttonRemove = document.getElementById("picklist-remove-button-#{ELEMENT}".replace("#{ELEMENT}", element.id));
var buttonClean = document.getElementById("picklist-clean-button-#{ELEMENT}".replace("#{ELEMENT}", element.id));
var selectedElementsString = document.getElementById("selected-items-#{ELEMENT}".replace("#{ELEMENT}", element.id));
/*
* Fetching itens
*/
var selectionItens = properties.selectionItens;
for(var i=0; i<selectionItens.length; i++){
var selectionItem = selectionItens[i];
var option = '<option value="'+ selectionItem.value +'">';
option += selectionItem.name;
option += '</option>';
if (selectionItem.selected){
//Adds on right
itensSelectedList.innerHTML += option;
selectedElementsString.value += selectionItem.value + ";";
}else{
// Adds on left
itensList.innerHTML += option;
}
}
/*
* Button add
*/
buttonAdd.onclick = function(){
if (itensList.selectedIndex == -1){
return 0;
}
// TODO
var option = itensList.options[itensList.selectedIndex];
itensList.remove(itensList.selectedIndex);
itensSelectedList.add(option);
selectedElementsString.value += option.value + ";";
};
/*
* Button remove
*/
buttonRemove.onclick = function(){
if (itensSelectedList.selectedIndex == -1){
return 0;
}
var option = itensSelectedList.options[itensSelectedList.selectedIndex];
itensSelectedList.remove(itensSelectedList.selectedIndex);
itensList.add(option);
selectedElementsString.value = selectedElementsString.value.replace(option.value + ";", "");
};
/*
* Button clear
*/
buttonClean.onclick = function(){
var options = itensSelectedList.options;
var arrOptions = [];
for (var i=0; i<options.length; i++){
arrOptions[arrOptions.length] = options[i];
}
for (var i=0; i<arrOptions.length; i++){
itensList.add(arrOptions[i]);
}
itensSelectedList.innerHTML = "";
selectedElementsString.value = "";
};
};
};
$pick = new PickList();
Folha de estilo (style/picklist.css)
div.picklist-left select,
div.picklist-right select{
width: 140px;
}
div.picklist-left{
float: left;
}
div.picklist-left label{
float: left;
clear: both;
}
div.picklist-left select{
float: left;
clear: both;
}
div.picklist-buttons{
float: left;
padding: 3px 50px;
}
div.picklist-button{
border: 1px solid #CACACA;
border-radius: 3px;
background: #FAFAFA;
color: #232323;
cursor: pointer;
font-size: 12px;
margin: 6px;
padding: 6px 11px;
}
div.picklist-button:hover{
border: 1px solid #000000;
}
.picklist-right{
float: left;
}
.picklist-right label{
float: left;
clear: both;
}
.picklist-right select{
float: left;
clear: both;
}
Nenhum comentário:
Postar um comentário