dynamically resizable div jquery_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-07 03:21 出处：网络

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> \";

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>