jquery - jQuery UI Resizable - ハンドルを太くする方法

Question

握りやすくするためにハンドルを太くすることはできますか？

たとえば、下のリンクでは、一番下の div にのみハンドルがあることがわかります。これは、高さが 1px に見えるため、マウスを使用して把握するのが困難です。ハンドルの高さを 10px にして、画像がつかまれているように見えるようにすることは可能ですか?

http://jsfiddle.net/rYFEY/25/

Answer 1

.ui-resizable-s {
    bottom: 0;
    height: 10px;
}

参照: http://jsfiddle.net/thirtydot/rYFEY/376/

+rgbaわかりやすくするために: http://jsfiddle.net/thirtydot/rYFEY/377/

+ rgba-overflow: hiddenデフォルトbottom: -5px: http://jsfiddle.net/thirtydot/rYFEY/378/

Answer 2

30 ドットの拡張: 同じページに複数のサイズ変更可能な要素がある場合、子セレクターでどの要素を操作するかを指定することができます#resizable > .ui-resizable-s。

<style>
  #resizable > .ui-resizable-s {
    background: black;
    bottom: 0;
    height: 10px;
  }
</style>
<div id="resizable"></div>
<script>$('#resizable').resizable()</script>

これは、次のようresizable()に親内にハンドルを追加するために機能します。div

<div id="resizable">
  <div class="ui-resizable-handle ui-resizable-s"></div>    
</div>

ただし、これを a に対して行いたい場合はtextarea、代わりに兄弟セレクターを使用する必要があります。

#resizable + .ui-resizable-s

その場合、jQuery UI はそれが であることをインテリジェントに認識し、それをtextareawrapper 内に配置するためdivです。

<div>
  <textarea id="resizable"></textarea> 
  <div class="ui-resizable-handle ui-resizable-s"></div>    
</div>

これらの結論に達する最善の方法は、ブラウザーの DOM インスペクター (Firefox および Chrome では Ctrl+Shirt+I) を実行して、jQuery UI が HTML に対して行っていることを確認することです。