İçeriği jQuery UI İletişim Kutusu'nda nasıl belirlerim?

JQuery UI's Dialog için (başka bir öğenin sınırıyla sınırlanan) muhafaza eklemek mümkün mü?İçeriği jQuery UI İletişim Kutusu'nda nasıl belirlerim?

kaynak

2010-05-25 PPPHP

....? Burada neyin peşindeyim, açıklığa kavuşturamıyorum? –

Peki, iletişim kutusunun sürüklenebileceği alanı belirtmek istiyorum. Şimdi tarayıcı penceresinin her yerinden sürüklenebilir .. – PPPHP

İletişim kutusunu hedefleyebilir ve bunun için bir sınırlama uygulayabilirsiniz. Bu deneyin:

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

Edit: Senin için a demo kurdu.
Edit2: doğru yolda Mottie en @ iletişim outerWidth & outerHeight

kaynak

2010-05-25 11:59:53 Mottie

Hey teşekkürler çok !!!! – PPPHP

Buradaki sorun, eğer görüntü alanını yeniden boyutlandırırsanız, işlevsellik koparsa ... –

@ Lee: Bu kolayca giderilebilir, cevabımı gör. – Mac

kullanmaya değiştirildi, ancak daha basit ve daha iyi bir çözüm var: viewport boyutlandırır eğer

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

Mottie çözümüyle aksine, bu kırılmaz. JSFiddle here'u çatallandırdım.

kaynak

2013-04-09 06:21:21 Mac

+1 Bu yardımcı oldu. Ayrıca, 'konteyner' aslında 'iletişim' elemanının ebeveyni olmadığına dikkat edin. Diyaloğun hareketini kısıtlamak istediğiniz herhangi bir unsur olabilir. – Nikhil

@Nikhil: Evet, kesinlikle belirtmeye değer. Bunu eklediğiniz için teşekkürler! – Mac

Ayrıca, [resizable 'widget'ının muhafazasını ayarlamanız gerekir] (https://stackoverflow.com/a/44401699/616460) ya da yeniden boyutlandırırken sınırları geçebilirsiniz. –

@ Mac doğru yolda, ancak çözüm tamamlanmadı. numaralı telefonun numaralı telefonu kullanmanız gerekiyor, ayrıca iletişim kutusunun Resizable widget'inin içeriklerini de ayarlayınız. Yalnızca Sürüklenebilir'i ayarlarsanız, sürüklediğinizde içerik alırsınız, ancak kenarları yakaladığınızda ve yeniden boyutlandırdığınızda hala sınırlar dışına çıkarsınız.

#mydialog iletişim kutusundan ilk önce oluşturduğunuz öğe ve #boundary ile sınırlamak istediğiniz öğedir (bu arada, kapsayıcı parametresi de bir seçici olabilir). :

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

bu örnek bir pasajı 'document' (varsayılan) ve '#area' arasındaki karşılık gelen pencere öğesinin hapsini geçiş için onay geçiş, bu. Ardından, iletişim kutusunu, başlık çubuklarıyla, ve kenarlarından yeniden boyutlandırarak sürükleyerek deneyin. Yalnızca select "sürükle sınırlandırın" ne olur Not: Şunu çevreleme tarafından

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

kaynak

2017-06-07 00:31:28

İçeriği jQuery UI İletişim Kutusu'nda nasıl belirlerim?

cevap

İlgili konular