Criar dinamicamente listas de produtos com caixas de seleção no jQuery Mobile é difícil
Estou trabalhando em um aplicativo de lista de compras para dispositivos móveis que deve oferecer suporte ao usuário ao criar listas de compras.
Eu uso a estrutura Jquery Mobile para obter facilmente a funcionalidade móvel.
Este é o meu primeiro projeto web com html e javascript.
Criei uma lista simples de produtos com caixas de seleção, o Jquery modela-o automaticamente e fica ótimo imediatamente:
<form action="demoform.asp" id="list" method="post" name="list">
<fieldset data-filter="true" data-input="#myFilter" data-role="controlgroup">
<label for="0">Banane</label>
<input id="0" name="products" type="checkbox">
<label for="1">Gurke</label>
<input id="1" name="products" type="checkbox">
<label for="2">Brokkoli</label>
<input id="2" name="products" type="checkbox">
<label for="3">Chinakohl</label>
<input id="3" name="products" type="checkbox">
<label for="4">Grünkohl</label>
<input id="4" name="products" type="checkbox">
<label for="5">Eisbergsalat</label>
<input id="5" name="products" type="checkbox">
</fieldset>
</form>
Em seguida, escrevi uma função javascript que pega uma matriz e grava o conteúdo da matriz neste formato:
var options = [
fruits = ['Banane','Gurke','Brokkoli','Chinakohl','Grünkohl','Eisbergsalat'],
drinks = ['Wasser','Cola','Fanta','Sprite','Pils','Radler']
];
function makeUL(array) {
// Create the list element:
var list = document.createElement('fieldset');
list.setAttribute("data-role", "controlgroup");
list.setAttribute("data-filter","true");
list.setAttribute("data-input","#myFilter");
for(var i = 0; i < array.length; i++) {
// Create the list item:
var label = document.createElement('label');
label.setAttribute("for",i);
// Set its contents:
label.appendChild(document.createTextNode(array[i]));
// Add it to the list:
list.appendChild(label);
var input = document.createElement('input');
input.setAttribute("type","checkbox");
input.setAttribute("name","products");
input.setAttribute("id",i);
// Add it to the list:
list.appendChild(input);
}
// Finally, return the constructed list:
return list;
}
// Add the contents of options[0] to #productlist:
document.getElementById('productlist').appendChild(makeUL(options[0]));