Textarea with jQueryUI resizable retains dimensions after toggling
Following is an example code test harness which emulates the problem I am experiencing. Basically, when not using resizable() for the textarea, clicking on the "Content [+/-]" allows the fieldset to collapse开发者_如何学Go and no textarea is shown. However, when using resizable, clicking on "Content [+/-]" causes the text area to be hidden, but the original dimensions of the textarea are retained and the the fieldset does not collapse, and the resize icon is still shown at the lower right corner.
Is there a better way to structure the HTML or am I missing an operation with jQuery/jQueryUI?
Thank you.
<!DOCTYPE html>
<html>
<head><title>SO,2</title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js">
</script>
<link
rel="stylesheet"
type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css"/>
</head>
<body>
<div id="squish1">
<fieldset id="fs1">
<legend id="lg1">Content [+/-]</legend>
<textarea rows="10" cols="80" name="ta1" id="ta1"></textarea>
</fieldset>
</div>
<script type="text/javascript">
$('#ta1').resizable();
$('#fs1').click(function(){
$('#ta1').toggle();
});
</script>
</body>
</html>
resizable() creates a wrapper around the element to be resized. If you hide the textarea, the size and display of that wrapper wouldn't change, so it still takes it's place
Use
$('.ui-wrapper',this).toggle();
instead of
$('#ta1').toggle();
It will hide the wrapper(and of course the textarea, because of it's inside the wrapper)
If you want to toggle only when the legend receives the click, change the click()-Function into that:
$('#lg1').click(function(){
$('.ui-wrapper',this.parentNode).toggle();
});
加载中,请稍侯......
精彩评论