Resizable jQuery UI
Добрый день. Есть такая тема: На странице динамически создаются блоки, которым присваиваются определенные классы (стили).
<div id="win_1" class="win_out"> <div class="win_in"></div> </div> Каждый из этих блоков должен иметь возможность изменять свой размер. При изменении своего размера использую метод библиотеки jQuery UI - Resizable: jQuery(document).ready(function($)
{
$(".win_out").resizable(
{
alsoResize:$(this).children(".win_in"),
start:function(e, ui)
{
console.log($(this).children(".win_in").data("num"));
}
});
});
в свойстве alsoResize указываю направление на дочерний блок с классом "win_in", который находится в блоке с классом "win_out". Таким образом необходимо достигнуть эффекта: Когда изменяется размер внешнего блока с классом "win_out", внутренний с классом "win_in" так-же должен изменять динамически свой размер. Проблема в том, что alsoResize:$(this).children(".win_in") не отрабатывает, видимо потому что alsoResize:$(this) определяется на уровне jQuery(document).ready (т.е. $(this) в этом случае будет document), а не при непосредственном срабатывании $(".win_out").resizable (где $(this) был бы блоком с классом "win_out"). Но у меня таких блоков будет неопределенное количество, и они будут создаваться динамически, и мне надо как-то динамически определять их дочерние блоки с классом "win_in" в свойстве alsoResize:. Помогите разобраться пожалуйста, как можно этот вопрос решить. |
Neznayka,
назначайте каждому .win_out resizable а не всем сразу тогда this будет указывать куда нужно ... примерно 28 символов в начало 3 строки и парочка в конец 10 ... :) |
Цитата:
|
Neznayka,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Resizable</title>
<link type="text/css" rel="stylesheet" href="http://sven-soft.com/css/ui-lightness/jquery-ui-1.10.3.custom.min.css">
<style type="text/css">
*{
margin:0;
padding:0;
}
.win_out{
position:absolute;
top:100px;
height:200px;
width:250px;
padding:50px;
background:#ccf;
}
.win_in{
height:198px;
width:248px;
background:#ffc;
border:1px solid #ccc;
}
#win_1{
left:100px;
}
#win_2{
left:600px;
}
.helperstyle{
border:1px dotted #000;
}
</style>
<script type="text/javascript" src="http://sven-soft.com/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://sven-soft.com/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($)
{
$(".win_out").bind("mouseenter", function()
{
});
$(".win_out").each(function(){ $(this).resizable(
{
alsoResize:$(this).children(".win_in"),
//helper:"helperstyle",
start:function(e, ui)
{
console.log($(this).children(".win_in").data("num"));
}
}); })
});
</script>
</head>
<body>
<div id="win_1" class="win_out">
<div class="win_in" data-num="1"></div>
</div>
<div id="win_2" class="win_out">
<div class="win_in" data-num="2"></div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 10:36. |