Question

jQuery resizable widget使用左上角坐标作为调整大小的中心。但是我希望我的元素在使用鼠标调整大小时重新围绕它的中心。

如果jQuery提供了这样的选项，那就太好了：

$( ".selector" ).resizable({ origin: 'center' });

但不幸的是，这已经是still an open issue两年多了。

是否可以使用当前的jQuery API实现上述功能？

Answer 1

我希望这会帮助你：

考虑 HTML

<div class="demo">
            <div id="temp_resize" style="display: none;width: 350px;"></div>
            <div id="resizable" class="ui-widget-content">
                There are 2 method in css where you can make a div invisible. Its important to 
know how to hide a div or any given container dynamically, to improve the user interactions in 
modern web sites.

  blah blah blah

            </div>

CSS

#resizable { 
            text-align:center;
            width: 350px; 
            height: 150px; 
            padding: 5px;
            overflow: hidden 
        }
        #resize_msg { 
            background-color: #3084DD; 
            color: #fff;
            width: 350px;
            padding: 5px;
            font-size: 14px;
            font-weight: bold;
        }

然后 jQuery 将是：

$(function() {


            $("#temp_resize").html($( "#resizable" ).html());
            var actual_height = $("#temp_resize").height() + 30;

            $( "#resizable" ).resizable({
                minWidth:350,maxWidth: 350,maxHeight:actual_height
            });

            $("#resizable").resize(function() {
                if($('#resizable').height() > (actual_height - 30)){
                    $("#resize_msg").html("No More Content");
                }else{
                    $("#resize_msg").html("Resize For More Content");
                }
            });

        });

如何设置jQuery可调整大小的小部件来围绕中心调整大小

1 个答案: