jquery ui 的 resizable 如何限制子.col不超出父.box?当向左拉.col时,如果两个.col的宽度加起来大于.box就换行了,如何限制.col的宽度让.col最大只能拉到.box的边缘?
demo地址:
http://bbs.blueidea.com/thread-2986139-1-1.html
<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.1/jquery-ui.js"></script>
<script type="text/javascript">
function my_resizable(){
$(".col").resizable({
handles:"e"
});
}
$(function(){
my_resizable();
});
</script>
<link href="http://jqueryui.com/themes/base/jquery.ui.resizable.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
.box{wdith:500px;height:200px;border:1px solid black;}
.col{width:60px;height:100%;background-color:tan;float:left;border:1px solid red;}
</style>
<div class="box">
<div class="col"></div>
<div class="col"></div>
</div>
demo地址:
http://bbs.blueidea.com/thread-2986139-1-1.html
<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.1/jquery-ui.js"></script>
<script type="text/javascript">
function my_resizable(){
$(".col").resizable({
handles:"e"
});
}
$(function(){
my_resizable();
});
</script>
<link href="http://jqueryui.com/themes/base/jquery.ui.resizable.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
.box{wdith:500px;height:200px;border:1px solid black;}
.col{width:60px;height:100%;background-color:tan;float:left;border:1px solid red;}
</style>
<div class="box">
<div class="col"></div>
<div class="col"></div>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ceshi</title><style type="text/css">
.box{wdith:500px;height:200px;border:1px solid black;}
.col{width:60px;height:100%;background-color:tan;float:left;border:1px solid red;}
</style>
<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.1/jquery-ui.js"></script>
<script>$(function(){
my_resizable();
//建议写到里面
function my_resizable(){
$(".col").each(function(){//加条件
if($(this).width()>$(".box").width()){
return false;
}else{
$(".col").resizable({
handles:"e"
});
}
});
}
});
</script>
</head>
<body>
<div class="box">
<div class="col"></div>
<div class="col"></div>
</div>
</body>
</html>