Làm cách nào để đặt ngăn chặn trên Hộp thoại giao diện người dùng jQuery?

Có thể thêm ngăn chặn (giới hạn vào ranh giới của một phần tử khác) vào Dialog của giao diện người dùng jQuery không?Làm cách nào để đặt ngăn chặn trên Hộp thoại giao diện người dùng jQuery?

Nguồn

2010-05-25 PPPHP

Bằng cách ngăn chặn bạn có nghĩa là ....? Tôi không rõ về những gì bạn đang ở đây, làm rõ một chút? –

Vâng, ý tôi là tôi muốn chỉ định khu vực có thể kéo hộp thoại. Bây giờ nó có thể được kéo trên tất cả các cửa sổ trình duyệt .. – PPPHP

Bạn có thể nhắm mục tiêu hộp thoại và áp dụng ngăn chặn cho hộp thoại. Hãy thử điều này:

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]);

Chỉnh sửa: Tôi thiết lập a demo cho bạn.
Edit2: Thay đổi để sử dụng hộp thoại outerWidth & outerHeight

Nguồn

2010-05-25 11:59:53 Mottie

Hey cảm ơn rất nhiều !!!! – PPPHP

Vấn đề với điều này là nếu bạn thay đổi kích thước khung nhìn sau đó chức năng ngắt ... –

@Lee: đó là cách dễ dàng sửa, xem câu trả lời của tôi. – Mac

@ Mottie của đi đúng hướng, nhưng có một giải pháp đơn giản và tốt hơn:

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

Không giống như các giải pháp Mottie, điều này sẽ không phá vỡ nếu khung nhìn thay đổi kích thước. Tôi đã chia đôi JSFiddle here.

Nguồn

2013-04-09 06:21:21 Mac

+1 Điều này hữu ích. Ngoài ra, đáng chú ý rằng 'container' không thực sự là phần tử cha của phần tử' dialog'. Nó có thể là bất kỳ yếu tố nào bạn muốn hạn chế chuyển động của hộp thoại. – Nikhil

@Nikhil: vâng, điều đó chắc chắn đáng nhắc đến. Cảm ơn bạn đã thêm điều đó! – Mac

Bạn cũng cần phải [đặt ngăn chặn cho tiện ích 'resizable'] (https://stackoverflow.com/a/44401699/616460), hoặc bạn vẫn có thể vượt qua giới hạn khi thay đổi kích thước. –

@ Mac đang đi đúng hướng, nhưng giải pháp chưa hoàn thành. Bạn phải cũng đặt ngăn chặn của tiện ích Resizable của hộp thoại. Nếu bạn chỉ thiết lập các Draggable, bạn sẽ nhận được ngăn chặn khi bạn kéo, nhưng khi bạn lấy các cạnh và thay đổi kích thước, bạn sẽ vẫn đi ra ngoài giới hạn. Vì vậy, bạn sẽ muốn thực hiện điều này, giả sử #mydialog là phần tử bạn đã tạo hộp thoại ban đầu và #boundary là phần tử bạn muốn hạn chế nó (nhân tiện, thông số vùng chứa cũng có thể là công cụ chọn) :

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

Dưới đây là một đoạn mã ví dụ, chuyển các hộp kiểm để chuyển giam widget tương ứng của giữa 'document' (mặc định), và '#area'. Sau đó thử nghiệm cả bằng cách kéo hộp thoại bằng thanh tiêu đề, và thay đổi kích thước hộp thoại bằng các cạnh của nó. Lưu ý những gì sẽ xảy ra khi bạn chỉ chọn "Nhốt kéo":

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

Nguồn

2017-06-07 00:31:28

Làm cách nào để đặt ngăn chặn trên Hộp thoại giao diện người dùng jQuery?

Trả lời

Các vấn đề liên quan