Jquery resizable () показывает значок изменения размера, но без изменения размера

0

У меня есть страница с двумя изменяемыми размерами div. Первый работает правильно, второй показывает значок изменения размера, но не изменяется.

Это мой html:

<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="css/jquery-ui-1.10.4.css">
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/jquery-ui-1.10.4.js"></script>
    </head>
    <body>
        <div id="page">
            <img id="img_site_top" src="site_top.png">
            <div id="img_header" style="position: absolute; left: 7px; top: 7px; background-image: url(header.png); width:980px; height:106px;">
                <a id="img_logo" class="jqDrag" style="position:absolute; top: -11px; left: 0px; width:350px; height:107px; background-image: url(logo.png); background-size: 100% 100%;background-repeat: no-repeat; border: 1px solid white">
                </a>
            </div>
            <img id="img_site" src="site.png">
            <img id="img_welcome_panel" src="welcome_panel.png">
        </div>
    </body>
    <script>
        $(
            function(){
                $('#img_logo').draggable().resizable({ aspectRatio: true }); //works
                $('#img_header').resizable(); //doesn't work: shows the icon, but doesn't resize.
            }
        );
    </script>
</html>

Результат:

Изображение 174551

Где:

  • Первый размер применяется к светло-коричневому ящику ($('#img_logo'))
  • Второй размер применяется к светло-голубому $('#img_header') ($('#img_header')), хотя может показаться, что он применяется к серой шкале.

Демо здесь

Что мне не хватает? Почему первая коробка работает, а вторая - нет?

Теги:
jquery-ui-resizable

2 ответа

2
Лучший ответ

Попробуйте изменить порядок инициализации. Демо: http://jsfiddle.net/GCu2D/77/. Замените это:

 $(function(){
            $('#img_logo').draggable().resizable({ aspectRatio: true }); //works
            $('#img_header').resizable(); //doesn't work: shows the icon, but doesn't resize.
  });

С:

 $(function(){                
            $('#img_header').resizable();
            $('#img_logo').draggable().resizable({ aspectRatio: true });

   });
Поделиться
  • 0
    Привет! Это работает! Можете ли вы объяснить, почему порядок имеет значение?
  • 0
    Я понятия не имею об этом. Я думаю, что это ошибка JQuery. Вы можете найти больше здесь: bugs.jqueryui.com/ticket/5025 . Я думаю, что порядок важен, только если у нас есть вложенные изменяемые размеры элементов, иначе порядок не имеет значения. В любом случае, если это работает для вас, вы можете пометить его как ответ.
Показать ещё 2 комментария
0

это может быть из-за абсолютного позиционирования, просто измените его, чтобы просто установить

position: relative;

Поделиться
  • 0
    Это не может быть проблемой. $('#img_logo') абсолютно позиционируется, и изменение размера работает без проблем. Во всяком случае, только что попробовал, это не проблема.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню