dynamically resizable div jquery
my Proplem is when i creat div use
var toprint= "<div id='any' class ="resizable sort">content</div> <div id='any2' class ="resizable darg">content</div> ";
then add to page use this code
$(ui.item).html(toprint);
it be sortable only not resiz开发者_StackOverflow社区able too
$('.sort').sortable({
handle:'.widget-head',
connectWith: ".sort",
out: function (e,ui) {
$(".sort").children().resizable({
axis: 'x',
containment: 'parent',
resize: function(event, ui) {
ui.size.width = ui.originalSize.width;
(ui.helper).css({'position': '', 'top': '0px'});
}
});
}
});
Try this it might work.
$('.sort').live('click', function() {
$(function() {
$('.sort).children().resizable({
axis: 'x',
containment: 'parent',
resize: function(event, ui) {
ui.size.width = ui.originalSize.width;
(ui.helper).css({'position': '', 'top': '0px'});
});
});
});
});
its work now just need live function :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Maximum / minimum size</title>
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui-1.8.13.custom.min.js"></script>
<style>
#resizable { width: 440px; height: 150px; padding: 5px; border-right:5px #3C0 solid; }
</style>
<style type="text/css">
.tableres
{
border-collapse:collapse;
}
.tableres, td, th
{
border:1px solid black;
}
.ul1 {
}
</style>
<script>
$('.ul1').live('click', function() {
// Bound handler called.
$(function() {
$( ".ui-widget-content" ).resizable({
maxWidth: 780,
minWidth: 100
});
});
});
</script>
</head>
<body>
<div class="demo">
<table class="tableres" width="880px" cellspacing="0" cellpadding="0">
<tr>
<td width="10%" align="center" valign="top"><div id="resizable" class="ui-widget-content ul1"></div></td>
<td width="90%" align="center" valign="top"><div class="ul1" >make me resize</div></td>
</tr>
</table>
</div><!-- End demo -->
</body>
</html>
加载中,请稍侯......
精彩评论