<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
<style type='text/css'>
#jalousie {
float: left;
margin-left: 10px;
margin-top: 10px;
}
div.lamel {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
width:50px;
background:red;
height:400px;
-webkit-border-bottom-right-radius: 100px 50px;
-webkit-border-bottom-left-radius: 100px 50px;
-moz-border-radius-bottomright: 100px 50px;
-moz-border-radius-bottomleft: 100px 50px;
border-bottom-right-radius: 100px 50px;
border-bottom-left-radius: 100px 50px;
/* добавлено */
float: left;
margin-left: -10px;
/* можно удалить */
color: #fff;
font-size: 20px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<input id="kolvo">
<br />
<div id="jalousie">
<div class="lamel">1</div>
</div>
<script type='text/javascript'>//<![CDATA[
var $container,
$field;
$(function(){
$container = $('#jalousie');
$field = $('#kolvo');
$field.on('keydown keyup keypress change paste cut drop input blur', function() {
observer('multiple_divs').publish( parseInt($(this).val()) );
});
observer('multiple_divs').subscribe(multipleDivs);
});
function multipleDivs(quantity) {
if (quantity) {
$container.empty();
for (var i = quantity; i--;) {
$container.append($('<div>').addClass('lamel').text(quantity));
}
}
}
/* Observer */
var topics = [];
var observer = function(id) {
var topic = id && topics[id];
if (! topic) {
var callbacks = $.Callbacks('memory');
topic = {
publish : callbacks.fire,
subscribe : callbacks.add,
unsubscribe : callbacks.remove
};
if (id) {
topics[id] = topic;
}
}
return topic;
};
//]]>
</script>
</body>
</html>
