динамически изменяемый размер div jquery - PullRequest
Новая
       4

динамически изменяемый размер div jquery

0 голосов
/ 22 сентября 2011

Мой Proplem - это когда я использую div 

var toprint= "<div id='any' class ="resizable sort">content</div> <div id='any2' class ="resizable darg">content</div> ";

затем добавьте на страницу используйте этот код 

$(ui.item).html(toprint);

может быть сортируемым, только не изменяемого размера 

$('.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'}); 
            } 
        }); 
    }  
});

Ответы [ 2 ]

2 голосов
/ 09 апреля 2013

Попробуйте, это может сработать. 

 $('.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'}); 
            });
        });
    });
});
0 голосов
/ 23 сентября 2011

его работа теперь просто нужна живая функция:) 

    <!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>
...