Пользовательские дескрипторы изменяемого размера в JQuery UI
Вы также можете использовать SQL, чтобы выбрать столбцы как плоские.
- Получить исходную схему фрейма данных
- Создать строку SQL путем просмотра схемы
- Запросить исходный фрейм данных
Я выполнил реализацию в Java: https://gist.github.com/ebuildy/3de0e2855498e5358e4eed1a4f72ea48
(также используйте рекурсивный метод, я предпочитаю способ SQL, так что вы можете легко проверить его через Spark-shell ).
2 ответа
Немного покопавшись в коде jquery-ui, я думаю, что могу подтвердить, что пользовательский дескриптор вне элемента изменяемого размера не работает.
Проблема в том, что события мыши инициализируются для элемента с изменяемым размером (или элемента-оболочки в случае textarea). Если дескриптор не является потомком того места, где обрабатываются события мыши, он не будет запускать событие mousedown на дескрипторе, что не сделает его перетаскиваемым.
В качестве доказательства концепции я немного исправил в jquery-ui пока у меня не появятся дела (вроде) для работы. Нет никаких гарантий относительно кода, но он должен указать, какие изменения должны произойти, чтобы заставить его работать.
Около строки 140 в ui.resizable.js я изменил:
this._handles = $('.ui-resizable-handle', this.element)
.disableSelection();
на
this._handles = $('.ui-resizable-handle')
.disableSelection();
Затем я добавил следующий код (часть mouseInit из ui.core.js, вероятно, должен использовать всю функцию) в пользовательском интерфейсе. resizable.js (около строки 180) после вызова mouseInit для элемента с изменяемым размером:
...
//Initialize the mouse interaction
this._mouseInit();
// Add mouse events for the handles as well - ylebre
for (i in this.handles) {
$(this.handles[i]).bind('mousedown.resizable', function(event) {
return self._mouseDown(event);
});
}
Это позволяет мне создать дескриптор изменения размера, который не является потомком элемента с изменяемым размером. Мой дескриптор - это div с идентификатором «юг», прикрепленный к элементу изменяемого размера. Вот фрагмент HTML:
<textarea id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</textarea>
<div id="south" class="ui-resizable-handle">south</div>
И код javascript:
$("#resizable").resizable(
{handles: {s: document.getElementById("south")}}
);
Надеюсь, это поможет!
Да, мне кажется, это ошибка. Вот полный пример для тех, кто пытается локально:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://jqueryui.com/latest/themes/base/ui.all.css" type="text/css"/>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/jquery-1.3.2.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.core.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.resizable.js" type="text/javascript"></script>
<style type="text/css">
#resizable { width: 100px; height: 100px; background: silver; }
#southgrip { width: 100px; height: 10px; background-color: blue; }
</style>
<script type="text/javascript">
$(function() {
$('#resizable').resizable({
handles: { 's': $('#southgrip') },
minHeight: 80,
maxHeight: 400
});
});
</script>
</head>
<body>
<div id="resizable"></div>
<div id="southgrip"></div>
</body>
</html>
Эта ошибка пользовательского интерфейса jQuery может быть связана с .
Другие вещи, которые я пробовал:
- Заменить 'latest' на '1.6' и 'jquery- 1.3.2 'с' jquery-1.2.6 ', чтобы попробовать более старую версию jQuery UI, чтобы проверить, не является ли это регрессией. Не похоже.
- Добавьте классы CSS
ui-resizable-sи / илиui-resizable-handleв#southgrip. Никаких кубиков. Однако , если#southgripнаходится внутри#resizable, это работает. Но это не решает вашу проблему. - Использование
{'s': $ ('# southgrip'). Get (0)}для параметрадескрипторов. Без игральных костей.