В продолжении темы упакованных булевых значений предлагаю свое решение на Javascript.
Общая идея в том, что в базе данных хранится только целое число и, соответственно, в интерфейс оно будет выводиться как input:text или input:hidden. Мы его скрываем и заменяем на представление из соответствий в виде чекбоксов.
Ниже пример и сам скрипт.
Пример:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Packaged Boolean Values</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$.fn.boolpack = function (theData) {
var accum = 0;
var valInput = $(this);
var data = theData || [
{'value': 1, 'labelText': 'Value 1'},
{'value': 2, 'labelText': 'Value 2'},
{'value': 4, 'labelText': 'Value 4'},
{'value': 8, 'labelText': 'Value 8'},
{'value': 16, 'labelText': 'Value 16'},
{'value': 32, 'labelText': 'Value 32'},
{'value': 64, 'labelText': 'Value 64'},
{'value': 128, 'labelText': 'Value 128'},
{'value': 256, 'labelText': 'Value 256'},
{'value': 512, 'labelText': 'Value 512'},
{'value': 1024, 'labelText': 'Value 1024'}
];
var buildCheckboxes = function () {
var newHtml = '<ul id="boolpack-values-set">';
for (var i in data) {
newHtml += '<li><input type="checkbox" id="boolpack-value-';
newHtml += data[i].value + '" value="';
newHtml += data[i].value + '"><label for="boolpack-value-';
newHtml += data[i].value + '">'
newHtml += data[i].labelText + '</label></li>';
}
newHtml += '</ul>';
return newHtml;
}
var calcAccum = function () {
$('#boolpack-values-set input:checked').each( function () {
var v = parseInt( $(this).val() );
accum = accum | (v || 0);
});
}
var __init__ = function () {
valInput.hide().parent().append( buildCheckboxes() ).ready( function () {
$('#boolpack-values-set input:checkbox').click( function () {
accum = 0;
calcAccum();
valInput.val(accum);
console.log(valInput.val());
});
calcAccum();
});
}
__init__();
}
$(document).ready( function () {
$('#text-field').boolpack();
});
</script>
</head>
<body>
<h1>Packaged Boolean Values</h1>
<p>Paragraph before</p>
<p><input id="text-field" type="text" style="width:30px;" value="0" disabled="true" /></p>
<p>Paragraph after</p>
</body>
</html>Скрипт:
/**
* jQuery-plugin for packaged boolean values.
*
* Usage: $(document).ready( function () { $(inputFieldSelector).boolpack(); });
*
* Required: jQuery 1.4 or higher
*
* Author: piksel@mail.ru
*/
$.fn.boolpack = function (theData) {
var accum = 0;
var valInput = $(this);
var data = theData || [
{'value': 1, 'labelText': 'Example value 1'},
{'value': 2, 'labelText': 'Example value 2'},
{'value': 4, 'labelText': 'Example value 4'},
{'value': 8, 'labelText': 'Example value 8'},
{'value': 16, 'labelText': 'Example value 16'},
{'value': 32, 'labelText': 'Example value 32'}
];
var buildCheckboxes = function () {
var newHtml = '<ul id="boolpack-values-set">';
for (var i in data) {
newHtml += '<li><input type="checkbox" id="boolpack-value-';
newHtml += data[i].value + '" value="';
newHtml += data[i].value + '"><label for="boolpack-value-';
newHtml += data[i].value + '">'
newHtml += data[i].labelText + '</label></li>';
}
newHtml += '</ul>';
return newHtml;
}
var calcAccum = function () {
$('#boolpack-values-set input:checked').each( function () {
var v = parseInt( $(this).val() ) || 0;
accum = accum | (v || 0);
});
}
var __init__ = function () {
valInput.hide().parent().append( buildCheckboxes() ).ready( function () {
$('#boolpack-values-set input:checkbox').click( function () {
accum = 0;
calcAccum();
valInput.val(accum);
});
calcAccum();
});
}
__init__();
}
2 комментария:
А вставьте пример виджета прямо в страницу! Это же... прикольно?
Не знаю, наверное... Но движок этого блога почему-то не пропускает (по-крайней мере раньше не пропускал) тэг [script]. Может я что-то путаю...
Отправить комментарий