jRuery resizable's tooResize: Как я могу сократить коэффициент роста div для внутреннего изменения размера? - PullRequest
Новая
       43

jRuery resizable's tooResize: Как я могу сократить коэффициент роста div для внутреннего изменения размера?

1 голос
/ 01 декабря 2010

У меня есть область с изменяемыми размерами, которая содержит две области, которые я также хочу изменить размер рядом. Соотношение роста по горизонтали составляет 1: 1 для каждой области, но, поскольку две содержащиеся области расположены рядом, сумма их ширины увеличивается вдвое быстрее, чем их контейнер. Как сократить горизонтальный рост двух содержащихся областей пополам. 

<html>
<head>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" type="text/css"/>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
</head>
<body>
<style>
  #resizable { background-position: top left; }
  #resizable { width: 300px; height: 120px; padding: 0.5em; }
  #also1, #also2 { width: 75px; height: 60px; padding: 0.5em; }
  #resizable h3, #also1 h3 , #also2 h3 { text-align: center; margin: 0; }
  #also1, #also2 { margin-top: 1em; }
</style>
<script>
  $(function() {
    $( "#resizable" ).resizable({
      alsoResize: "#also1,#also2"
    });
  });
</script> 
<div id="resizable" class="ui-widget-header">
  <h3 class="ui-state-active">Resize</h3>
  <table>
    <tr>
      <td>
        <div id="also1" class="ui-widget-content">
          <h3 class="ui-widget-header">also one</h3>
        </div>
      </td>
      <td>
        <div id="also2" class="ui-widget-content">
          <h3 class="ui-widget-header">also two</h3>
        </div>
      </td>
    </tr>
  </table>
</div>
</body>
</html>

1 Ответ

0 голосов
/ 01 декабря 2010

Я вижу пару проблем. Во-первых, вы помещаете в таблицу реализуемые элементы div. Это кажется противоречием.

Во-вторых, также Resresize изменяет размеры дополнительных элементов на то же количество пикселей, что и основной изменяемый элемент, но не изменяет их в процентном соотношении, как вы могли бы ожидать.

Чтобы решить эту проблему, я:

  • Удалено также изменение размера
  • Удален стол
  • Слева всплыли дочерние элементы
  • Относительно расположенный #resizable div
  • Сделано в процентах от размеров дочерних элементов.

Это позволяет дочерним элементам автоматически изменять размер без изменения размера. Не уверен, что это сработает в вашем случае, но, похоже, вы должны позволить DOM обработать изменение размера, когда это возможно.

Пример: * * один тысяча двадцать-одна

http://jsfiddle.net/JaPvZ/

Конечно, следует отметить, что это не учитывает расстояние между дочерними элементами. Это означает, что вы все еще можете получить некоторый интервал, который вам не нужен.

...