Как мне установить содержание в диалоге jQuery UI? - PullRequest
Новая
       70

Как мне установить содержание в диалоге jQuery UI?

6 голосов
/ 25 мая 2010

Можно ли добавить сдерживание (ограничивающее границы другого элемента) в диалоге пользовательского интерфейса jQuery ?

Ответы [ 3 ]

10 голосов
/ 09 апреля 2013

@ Mottie на правильном пути, но есть более простое и лучшее решение: 

var container = $('.dialog-container'),
    dialog = $('.ui-dialog');
dialog.draggable( "option", "containment", container );

В отличие от решения Mottie, оно не сломается, если размер области просмотра изменится.Я разветвлял JSFiddle здесь .

3 голосов
/ 07 июня 2017

@ Mac на правильном пути, но решение не завершено. Вы должны также установить содержание диалогового виджета Resizable . Если вы только установите Draggable, вы получите ограничение при перетаскивании, но когда вы захватите края и измените размер, вы все равно выйдете за пределы.

Итак, вы захотите сделать это, предполагая, что #mydialog - это элемент, из которого вы изначально создали диалоговое окно, а #boundary - это элемент, к которому вы хотите его ограничить (кстати, параметр контейнера также селектор): 

let ui = $('#mydialog').closest('.ui-dialog');       // get parent frame
ui.draggable('option', 'containment', '#boundary');  // <-- drag, but not resize
ui.resizable('option', 'containment', '#boundary');  // <-- don't forget!!!

Вот пример фрагмента, переключающий флажки, чтобы переключать ограничение соответствующего виджета между 'document' (по умолчанию) и '#area'. Затем поэкспериментируйте с перетаскиванием диалогового окна за строку заголовка, и , изменив его размеры по краям. Обратите внимание, что происходит, когда вы выбираете только «Ограничить перетаскивание»: 

// Create dialog from #win with mostly default options.
$('#win').dialog({
  width: 200,
  height: 150,
  position: { my: 'center', at: 'center', of: '#area' }
});

// When checkbox changed, update confinement settings.
$('#draggable, #resizable').change(function () {
  let d = $('#draggable').prop('checked');
  let r = $('#resizable').prop('checked');
  let ui = $('#win').closest('.ui-dialog');
  ui.draggable('option', 'containment', d ? '#area' : 'document');
  ui.resizable('option', 'containment', r ? '#area' : 'document');
});
#area {
  position: relative;
  left: 2ex;
  top: 2ex;
  width: 400px;
  height: 300px;
  border: 1px solid red;
}

#win {
  font-size: 10pt;
  display: flex;
  flex-direction: column;
}

label {
  display: flex;
  align-items: center;
}
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>

<body>
  <div>Example</div>
  <div id="area"></div>
  <div id="win" title="test">
    <label><input type="checkbox" id="draggable">Contain drag</label>
    <label><input type="checkbox" id="resizable">Contain resize</label>
  </div>
</body>
3 голосов
/ 25 мая 2010

Вы можете настроить таргетинг на диалоговое окно и применить к нему ограничение. Попробуйте это: 

var container = $('.dialog-container'),
    dialog = $('.ui-dialog');
// get container top left corner locations
var cx1 = container.offset().left,
    cy1 = container.offset().top;
// get dialog size
var dw = dialog.outerWidth(),
    dh = dialog.outerHeight();
// get container bottom right location, then subtract the dialog size
var cx2 = container.width() + cx1 - dw,
    cy2 = container.height() + cy1 - dh;
dialog.draggable( "option", "containment", [cx1, cy1, cx2, cy2] );

Редактировать: я настроил демо для вас.
Edit2: изменено для использования диалога externalWidth & outerHeight

...