jQuery 调用resizable方法没有效果
布局代码:
<div id="save_part" class="wrapper_operating_room">
<div id="cancel_part" class="operating_room_rectangle">
<input type="button" value="Save" id="save" title="可拖动" />
<input type="button" value="Cancel" id="cancel" title="可拖动" />
</div>
</div>
方法代码:
ready方法:
$(document).ready(function() {
$("#cancel_part").resizable({maxHeight:546,maxWidth:784}); //这里的reasiable就有效果
$(".operating_room_rectangle").draggable({ containment: "parent"});
$("#save").draggable({cancel:false,containment: "parent"});
$("#cancel").draggable({cancel:false,containment: "parent"});
})
通过servlet保存文件
function save(){
var svalue =$("#save_part").html();
var type="save";
$.ajax({
url:"../acg_test/servlet/DownloadServlet",
data: { value: svalue , btn: type},
type:"GET",
dataType:"text",
success:function(data){
alert(data);
}
})
}
重新打开文件
function open(){
var svalue="";
var type="open";
$.ajax({
url:"../acg_test/servlet/DownloadServlet",
data: {value: svalue,btn : type},
type:"GET",
dataType:"text",
success:function(data){
alert(data);
$("#save_part").html(data);
$("#cancel_part").resizable({maxHeight:546,maxWidth:784});//这边的resizable就没有效果
})
}
});
下面是保存的txt文件的内容:
求高手帮忙 有解决方法没 能解决的话希望能有详细的代码,初学jQuery,说的抽象了不容易懂 谢谢!!!!!!! 展开
使用鼠标改变元素的尺寸。
如需了解更多有关 resizable 交互的细节,请查看 API 文档 可调整尺寸小部件(Resizable Widget)。
在任意的 DOM 元素上启用 resizable 功能。通过鼠标拖拽右边或底边的边框到所需的宽度或高度。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 缩放(Resizable) - 默认功能</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">缩放(Resizable)</h3>
</div>
</body>
</html>
程序运行结果:
拖动右下角的三角处,窗口可以自由缩放!
如果不生效,请检查jQuery版本以及调用方法!
$("#save_part").html(data);
// 先删除上次添加的ui-resizable-handle
$( "#cancel_part .ui-resizable-handle" ).remove();
$("#cancel_part").resizable({maxHeight:546,maxWidth:784});
save之前先调用一下$("#cancel_part").resizable("destroy");
open回来之后在掉一下$("#cancel_part").resizable({maxHeight:546,maxWidth:784});应该就可以了
你得live或者bind一下