jQuery Resizable仅在父级上禁用

时间:2015-01-26 13:05:33

标签: javascript jquery html

我有一个表格,其中有几个控件包含在div中。我们允许用户进入某种编辑模式,然后他们可以根据自己的喜好移动和调整控件的大小,包括保存所有控件的主div。

没有太多细节,我在主要div和所有孩子上启用了resizable。在某一点上,我想只禁用Parent的resizable,同时让所有的孩子保持原样。

但是,如果我告诉jQuery禁用父级的resizable,它会自动为其子级执行相同操作。

我可以通过销毁所有可调整大小的东西来解决它,然后只为孩子们重做它,但我宁愿根据需要启用和禁用。

因此,如果我调用$('#SomeID').resizable('disable'),则不应影响任何子控件。

任何人都知道我该怎么做?

1 个答案:

答案 0 :(得分:0)

假设您正在使用JQueryUI(因为您的可调整大小的方法):

如果要从特定元素中删除可调整大小的特征,只需从元素中删除相关类即可。



$(document).on('click', '.child', function() {	
	$(this).removeClass('ui-resizable');
});

$(document).on('click', '.container', function() {	
	$(this).removeClass('ui-resizable');
});

$(document).ready(function() {
		$(".container").resizable();
		$(".child").resizable();
});

.container {
  width: 200px;
  height: 400px;
  background-color: blue;
}

.child {
  width: 100px;
  height: 100px;
  background-color: green;
  border: 2px solid black;
}

<html>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
	<div class="container">
		<div class="child">
		</div>
		<div class="child">
		</div>
		<div class="child">
		</div>
	</div>
</body>
</html>
&#13;
&#13;
&#13;

如果单击某个元素,则只删除该特定元素的可调整大小的特征。