Question

我试图把手放在4边和4角的jquery resiazble box上。

我可以让他们四面都没问题和顶角，但由于某种原因，底角正在上升，我无法看到我的生活中我做错了什么。

底部边框有第二个边框，其中显示了一些其他符号，而且调整大小的句柄不在那里。光标也是整个底部边框上的SW

任何帮助非常感谢

继承我的代码

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>jQuery UI Resizable - Default functionality</title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

 <style>
  #resizable {top:150px;left:150px; width: 150px; height: 150px; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }
  .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
  .ui-resizable-n { cursor: n-resize; height: 10px; width: 100%; top: 0px; left: 0; background: url(resize-handle.gif) top center no-repeat; border-top: 1px solid #f00;}
  .ui-resizable-s { cursor: s-resize; height: 10px; width: 100%; bottom: 0px; left: 0; background: url(resize-handle.gif) bottom center no-repeat; border-bottom: 1px solid #f00; }
  .ui-resizable-e { cursor: e-resize; width:10px; right: 0px; top: 0; height: 100%; background: url(resize-handle.gif) right center no-repeat; border-right: 1px solid #f00; }
  .ui-resizable-w { cursor: w-resize; width: 10px; left: 1px; top: 0; height: 100%; background: url(resize-handle.gif) left center no-repeat; border-left: 1px solid #f00; }
  .ui-resizable-sw { cursor: sw-resize; height: 10px; width: 100%; bottom: 0px; left: 0px; background: url(resize-handle.gif) bottom left no-repeat; border-top: 1px solid #f00;}
  .ui-resizable-se { cursor: se-resize; height: 10px; width: 100%; bottom: 0px; right: 0; background: url(resize-handle.gif) bottom right no-repeat; border-top: 1px solid #f00;}
  .ui-resizable-nw { cursor: nw-resize; height: 10px; width: 100%; top: 0px; left: 1px; background: url(resize-handle.gif) top left no-repeat; border-top: 1px solid #f00;}
   .ui-resizable-ne { cursor: ne-resize; height: 10px; width: 100%; top: 0px; right: 0; background: url(resize-handle.gif) top right no-repeat; border-top: 1px solid #f00;}
</style>
<script>
 $(function() {
    $( "#resizable" ).resizable({ handles: "n, e, s, w, se, sw, nw, ne" });
    var handles = $( "#resizable" ).resizable( "option", "handles" );       
    $( "#resizable" ).resizable( "option", "handles", "n, e, s, w, se, sw, nw, ne" );
 });
</script>
</head>
<body>
  <div id="resizable" class="ui-widget-content">
   <h3 class="ui-widget-header">Resizable</h3>
  </div>
</body>

Answer 1

working example好像你改变了你的CSS。请添加以下css并检查：

.ui-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    display: block;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
    display: none;
}
.ui-resizable-n {
    cursor: n-resize;
    height: 7px;
    width: 100%;
    top: -5px;
    left: 0;
}
.ui-resizable-s {
    cursor: s-resize;
    height: 7px;
    width: 100%;
    bottom: -5px;
    left: 0;
}
.ui-resizable-e {
    cursor: e-resize;
    width: 7px;
    right: -5px;
    top: 0;
    height: 100%;
}
.ui-resizable-w {
    cursor: w-resize;
    width: 7px;
    left: -5px;
    top: 0;
    height: 100%;
}
.ui-resizable-se {
    cursor: se-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    bottom: 1px;
}
.ui-resizable-sw {
    cursor: sw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    bottom: -5px;
}
.ui-resizable-nw {
    cursor: nw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    top: -5px;
}
.ui-resizable-ne {
    cursor: ne-resize;
    width: 9px;
    height: 9px;
    right: -5px;
    top: -5px;
}

#resizable {top:150px;left:150px; width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }

Answer 2

当将可调整大小应用于句柄时......你正在堆叠视觉元素。

<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1000;"></div>

你需要删除ui-icon和ui-icon-gripsmall-diagonal-se类。

$("#resizable").find("div.ui-resizable-se").removeClass("ui-icon");
$("#resizable").find("div.ui-resizable-se").removeClass("ui-icon-gripsmall-diagonal-se");

完整示例：http://jsfiddle.net/rwinscot/vNbW5/

jquery可调整大小的句柄在所有方面都没有显示

2 个答案: