Изменение размера jQuery UI - Как сгущать ручку - PullRequest
Новая
       33

Изменение размера jQuery UI - Как сгущать ручку

11 голосов
/ 23 июня 2011

Можно ли сделать ручку более толстой, чтобы ее было легче захватывать?

Например, в приведенной ниже ссылке вы заметите, что у меня есть ручка только на нижней части блока, что трудноовладейте использованием мыши, поскольку она кажется 1px высотой.Можно ли сделать ручку высотой 10px, чтобы она выглядела так, как будто изображение захватывается?

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

Ответы [ 2 ]

9 голосов
/ 23 июня 2011 
.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/

0 голосов

Расширение на тридцать точек: если у вас есть несколько изменяемых размеров на одной странице, вы можете указать, на какой элемент воздействовать, с помощью дочернего селектора #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>

Если вы хотите сделать это для textarea, вы должны использовать селектор брата: 

#resizable + .ui-resizable-s

потому что в этом случае пользовательский интерфейс jQuery разумно видит, что это textarea, и помещает его в оболочку div: 

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

Лучший способ прийти к таким выводам - ​​запустить инспектор DOM вашего браузера (Ctrl + Shirt + I в Firefox и Chrome), чтобы посмотреть, что пользовательский интерфейс jQuery делает с вашим HTML.

...