4

4辺と4隅にあるjquery resiazbleボックスにハンドルを付けようとしています。

私はそれらを4つの側面で問題なく、上の角で取得できますが、何らかの理由で下の角が再生されており、自分が間違っていることを一生見ることができません.

下の境界線には、他のいくつかの記号が表示された2番目の境界線があり、サイズ変更ハンドルはありません。また、カーソルは下枠全体で 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>

4

2 に答える 2

2

se ハンドルにサイズ変更可能を適用すると、ビジュアル要素がスタックされます。

<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/

于 2013-10-16T20:32:03.533 に答える