Как сделать левую и правую панель и иметь возможность скользить между ними?

У меня есть страница с левым div и правым div. Дивы организованы с использованием display: table и связанных тегов. Правый div можно изменить с помощью изменяемого объекта jquery-ui. Я хотел бы иметь возможность перетаскивать разделитель влево и вправо и изменять относительный размер панелей.Как сделать левую и правую панель и иметь возможность скользить между ними?

Но это не совсем так. С одной стороны, правая панель может быть изменена только правым краем и нижним правом углом, а не левым краем. Как можно сделать сплиттер в этом мире js/html/css?

http://jsfiddle.net/rhedin/xhaxme4c/

<!DOCTYPE html> 
<html lang="en" style="height:100%;width:100%;border:3px solid red"> 
    <head> 
     <meta charset="utf-8"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
     <style> 
      * { 
       box-sizing: border-box 
      } 
     </style> 
    </head> 
    <body style="height:100%;width:100%;border:3px solid blue;margin:0;padding:8px"> 
     <div id="allBodyDiv" style="width:100%;height:100%;border:3px solid black;display:table"> 
      <div id="leftWithinBodyDiv" style="border:3px solid blue;display:table-cell"> 
      </div> 
      <div id="rightWithinBodyDiv" style="width:100px;border:3px solid red;display:table-cell"> 
      </div> 
     </div> 
     <script> 
      $(function() { 
       $("#rightWithinBodyDiv").resizable({}); 
      }); 
     </script> 
    </body> 
</html>

источник

2015-01-12 user2171796

Добавьте Resizeable функцию в левую, а также. Проверьте мою скрипку, чтобы понять, что вы имели в виду.

http://jsfiddle.net/xhaxme4c/4/

Лучший способ сделать это, чтобы подключить функцию изменения размера.

http://jsfiddle.net/dorzb3kn/

$(function() 
{ 
    $(".leftcolumn").resizable(
    { 
     autoHide: true, 
     handles: 'e', 
     resize: function(e, ui) 
     { 
      var parent = ui.element.parent(); 
      var greenboxspace = parent.width() - ui.element.outerWidth(), 
       redbox = ui.element.next(), 
       redboxwidth = (greenboxspace - (redbox.outerWidth() - redbox.width()))/parent.width()*100+"%"; 
       redbox.width(redboxwidth); 
     }, 
     stop: function(e, ui) 
     { 
      var parent = ui.element.parent(); 
      ui.element.css(
      { 
       width: ui.element.width()/parent.width()*100+"%", 
      }); 
     } 
    }); 
});

источник

2015-01-12 13:58:41

Интересно! Спасибо, Роберт. Я пытаюсь использовать {handles: 'w'} в правом поле. В сочетании с .position ({my: 'right', at: 'right', of: '#parentElement'}). Я не знал о ручках: вариант, пока вы не указали это. – user2171796

Добро пожаловать :) –

Спасибо за помощь, Роберт. – user2171796

Как сделать левую и правую панель и иметь возможность скользить между ними?

ответ

Смежные вопросы