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

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");
                }
            });

        });