Форум

Neznayka · #1 (**permalink**) 17.09.2013, 11:15

Добрый день. Есть такая тема: На странице динамически создаются блоки, которым присваиваются определенные классы (стили).

<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:.

Помогите разобраться пожалуйста, как можно этот вопрос решить.

рони · #2 (**permalink**) 17.09.2013, 14:00

Neznayka,
назначайте каждому .win_out resizable а не всем сразу тогда this будет указывать куда нужно ... примерно 28 символов в начало 3 строки и парочка в конец 10 ...

Neznayka · #3 (**permalink**) 17.09.2013, 16:19

Сообщение от рони

Neznayka,
назначайте каждому .win_out resizable а не всем сразу тогда this будет указывать куда нужно ... примерно 28 символов в начало 3 строки и парочка в конец 10 ...

Спасибо за ответ. Решил проблему откзавшить от alsoResize, и применив свойства css. Посмотреть можно там же

рони · #4 (**permalink**) 17.09.2013, 17: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>

Форум

Справочник

Discord чат

Курсы javascript