jquery изменяемые размеры ручек со всех сторон не показаны

Я пытаюсь поместить ручку на коробку с jquery resiazble с 4 сторон и 4 углами.jquery изменяемые размеры ручек со всех сторон не показаны

Я могу получить их с 4-х сторон без проблем и с верхними углами, но по какой-то причине нижние углы разворачиваются, и я не могу видеть жизнь, что я делаю неправильно.

нижняя граница имеет вторую границу с некоторыми другими отображаемыми символами, а ручка изменения размера не существует. Кроме того, курсор SW на всей нижней границе

любая помощь очень ценится

Heres мой код

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

источник

2013-08-20 Barry Watts

вы можете прикрепить скриншот текущей ручки изменения размера и как выглядит код в Elements Inspector на Chrome? – AdityaSaxena

heres экранный магазин этого в хроме с инспектором элементов http://dakardesign.com/screenshot.jpg Я вижу, что у se handle есть дополнительные css, я не знаю, откуда это исходит не от таблицы стилей –

Применяя resizable к ручке se ... вы складываете визуальные элементы.

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

Вам нужно удалить значок-щ и щ-пиктограммами gripsmall-диагональную-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-16 20:32:03

working example Похоже, вы изменили CSS. pls добавьте ниже 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; }

источник

2013-08-20 10:01:55 Era

У меня все еще возникают проблемы с se handle, когда я добавляю ручки в соответствии с OP http://jsfiddle.net/6cWXF/2/ –

OP? его идеально в скрипке. – Era

@BarryWatts это просто невидимо. У меня такая же проблема на 1.11.4 jQuery –

jquery изменяемые размеры ручек со всех сторон не показаны

ответ

Смежные вопросы