Question

我有一个浮动侧边栏，位于页面右侧，我希望能够使用容器左侧的手柄调整大小。

此刻，当我使用手柄拖动侧边栏时，它会在向右拖动时使侧边栏变宽，而在向左拖动时使侧边栏变小 - 我不想这样做。即，向左拖动会增加侧边栏的大小等。

我宁愿不改变html结构，希望有一个简单的javascript系列来解决问题 - 请帮助！

这是一个小提琴：https://jsfiddle.net/c01gat3/us8vktjq/

HTML

<div id="sidebar">
  <div id="drag">
  </div>
</div>

CSS

#sidebar{
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100% !important;
  background-color: blue;
}
#drag{
  position: absolute;
  left: -10px;
  width: 10px;
  height: 100%;
  background-color:black;
  cursor:ew-resize;
}

的Javascript

$('#sidebar').resizable({
  minWidth: 100,
  handles: { "w" : $("#drag") }
});

Answer 1

你错过了相关的CSS文件。

将以下引用添加到您的HTML页面：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

调整HTML代码以包含所需的类：

<div id="sidebar">
  <div id="drag" class="ui-resizable-handle ui-resizable-w">
  </div>
</div>

在这里工作小提琴：https://jsfiddle.net/us8vktjq/2/

在此处阅读更多内容：http://api.jqueryui.com/resizable/#option-handles

jQuery UI的反向可调整大小

1 个答案: