jQuery UI iletişim kutusu konumlandırma

116

Üzerine gelindiğinde bazı metnin yanında bir iletişim kutusu konumlandırmak için jQuery iletişim kullanıcı arabirimi kitaplığını kullanmaya çalışıyorum . JQuery iletişim kutusu, geçerli görünüm penceresinin sol üst köşesinden ölçülen bir konum parametresi alır (başka bir deyişle, [0, 0]o anda nereye kaydırıldığınıza bakılmaksızın her zaman tarayıcı pencerenizin sol üst köşesine yerleştirir). Ancak, konumu almanın bildiğim tek yolu, TÜM sayfaya göre öğenin öğesidir.

Şu anda sahip olduğum şey aşağıdadır. position.top1200 veya benzeri bir şey olarak hesaplanır, bu da iletişim kutusunu sayfadaki geri kalan içeriğin çok altına yerleştirir.

$(".mytext").mouseover(function() {
    position = $(this).position();
    $("#dialog").dialog('option', 'position', [position.top, position.left]);
}

Doğru pozisyonu nasıl bulabilirim?

Teşekkürler!

jquery jquery-ui

— Wickethewok
kaynak

2

1.9 sürümünden itibaren yerel bir araç ipucu pencere öğesi bulunmaktadır.

— theblang

13

Bir iletişim kutusunun diğer uygulamaları için bazı jQuery eklentilerine göz atın. Cluetip , özellik açısından zengin bir araç ipucu / iletişim kutusu tarzı eklenti gibi görünüyor. 4. demo, yapmaya çalıştığınız şeye benziyor (ancak aradığınız kesin konumlandırma seçeneğine sahip olmadığını görüyorum.)

— Ben Koehler
kaynak

Kırık bağlantı. Bu eklentinin artık korunmadığını söyleyebilirim. Belki başka bir cevap seçmek akıllıca olur?

— JohnK

109

Alternatif olarak, jQuery UI Positionyardımcı programını kullanabilirsiniz, örn.

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}

— Brian M. Hunt
kaynak

29

Bu en iyi yaklaşımdır. Bununla birlikte, diyaloğu ilk kez oluşturuyorsanız, bunu dialogbeğenmek için fazladan bir çağrıya ihtiyacınız olacağını not edeceğim :

$('#dialog').dialog({ width: 300 /* insert your options */ }).dialog('widget').position({ my: 'left', at: 'right', of: $(this) });

— wsanville

26

JQuery UI konum yardımcı programı gizli öğeler üzerinde çalışmaz, bu nedenle bu kodla konumlandırmadan önce iletişim kutusunu açmanız gerekir.

— Toadmyster

1

jQuery UI, bunu yapmanın en iyi yoludur. Scott González , jQuery kullanıcı arayüzünün nasıl çalıştığına ve nasıl kullanılacağına dair derinlemesine bir açıklamaya sahip

— strangeloops

Örneğin, olması gerektiği kafa karıştırıcı buluyorum: at: 'top+50'yerineat: 'top + 50'

— Lamy

Birden fazla pozisyonu nasıl belirleyeceğime dair (az önce olduğu gibi) mücadele eden herkes için bu şöyle: $('dialog').dialog({ position: { my: 'left top', at: 'left+50 top+50'}, });

— milpool

81

Yukarıdaki bazı cevaplar sayesinde, deneyler yaptım ve sonunda yapmanız gereken tek şeyin Modal Dialog'un tanımındaki "pozisyon" özelliğini düzenlemek olduğunu buldum:

position:['middle',20],

JQuery'nin yatay "X" değeri için "orta" metinle herhangi bir sorunu yoktu ve diyalogum ortada, yukarıdan 20px aşağı açıldı.

JQuery'yi seviyorum.

— user1288395
kaynak

Herhangi bir ek eklenti olmadan çalışır ve sezgiseldir. Gördüğüm en iyi çözüm.

— PlanetUnknown

Ek eklentiler olmadan fevkalade basit bir çözüm. Kabul edilen cevap bu olmalıdır.

— kamui

13

Kahretsin, bu güzel ama artık kullanılmıyor- "Not: String ve Array formları kullanımdan kaldırıldı." api.jqueryui.com/dialog/#option-position Yani şeyim / at / şey konum nesnesini kullanmanız gerekir. "JQuery UI Konumu" hakkındaki bağlantıya bakın. İstediğiniz gibi çalışması için konum gibi bir şey elde edebilirsiniz: {my: "center top", at: "center top + 20", of: window}. Daha fazla örnek için bağlantıya bakın.

— mikato

@mikato ... jquery ui 1.10'a göre , konum dizeyi ve diziyi kabul eder. ... ... ama yine de nesne notasyonunu seviyorum (anahtarları seviyorum).

— dsdsdsdsd

3

Sadece bir iletişim kutusu açılır penceresini konumlandırmak için bu kadar çok koda ihtiyacınız olduğuna inanamıyorum.

— Gi1ber7

42

Tüm yanıtları okuduktan sonra, bu nihayet benim için çalıştı:

$(".mytext").mouseover(function() {
    var x = jQuery(this).position().left + jQuery(this).outerWidth();
    var y = jQuery(this).position().top - jQuery(document).scrollTop();
    jQuery("#dialog").dialog('option', 'position', [x,y]);
});

— Jaymin Patel
kaynak

Bu cevap benim için işe yaradı ve muhtemelen diğer çözümlerin nasıl kurulacağı konusunda birkaç dakika / saat googling yapmaktan kurtuldu. Teşekkür ederim!

— Nathan

1

+1 .position () 'un göreceli pozisyon ve .offset (), mutlak pozisyon (ihtiyacım olan şey) verdiğini anladığımda bana çok yardımcı oldu

— daniloquio

16

Jaymin'in örneğini bir adım daha ileri götürerek, yeni tıkladığınız öğenin üzerine bir jQuery ui-dialog öğesini yerleştirmek için bunu buldum ("konuşma balonu" nu düşünün):

$('#myDialog').dialog( 'open' );
var myDialogX = $(this).position().left - $(this).outerWidth();
var myDialogY = $(this).position().top - ( $(document).scrollTop() + $('.ui-dialog').outerHeight() );
$('#myDialog').dialog( 'option', 'position', [myDialogX, myDialogY] );

Göreli genişlik ve yükseklik ofsetlerini hesaplamadan önce ui-dialog elemanını "açtığıma" dikkat edin. Bunun nedeni, ui-dialog öğesi fiziksel olarak sayfada görünmeden jQuery'nin externalWidth () veya externalHeight () 'ı değerlendirememesidir.

Diyalog seçeneklerinizde 'modal' seçeneğini false olarak ayarladığınızdan emin olun ve a-OK olmalısınız.

— işaretlenmiş
kaynak

1

Bence iki değişkenin myDialogXmyDialogY

— casey

16

http://docs.jquery.com/UI/API/1.8/Dialog

Sol üst köşedeki sabit iletişim kutusu örneği:

$("#dialogId").dialog({
    autoOpen: false,
    modal: false,
    draggable: false,
    height: "auto",
    width: "auto",
    resizable: false,
    position: [0,28],
    create: function (event) { $(event.target).parent().css('position', 'fixed');},
    open: function() {
        //$('#object').load...
    }
});

$("#dialogOpener").click(function() {
    $("#dialogId").dialog("open");
});

— xhochn
kaynak

benim için bu takip edilmesi en basit olanıydı, sadece bir nitelik ve çözümü elde edersiniz. "konum" un bu köşeli parantez sözdizimiyle birlikte yükseklik / genişlik vb. ile anılabileceğini bilmiyordum.

— user734028

hiçbir fikrim yok, çok uzun zaman önce: D

— xhochn

15

Kontrol edin <!DOCTYPE html>

Fark ettim ki eğer kaçırırsan <!DOCTYPE html>HTML dosyanızın üst kısmını , konum: {benim: 'merkez', şurada: 'merkez' belirleseniz bile iletişim kutusunun pencere içinde değil belge içeriğinin ortasında gösterildiğini fark ettim. , of: window}

Örneğin: http://jsfiddle.net/npbx4561/ - İçeriği çalıştırma penceresinden kopyalayın ve DocType'ı kaldırın. HTML olarak kaydedin ve sorunu görmek için çalıştırın.

— Daniel Flippance
kaynak

2

Bu benim sahip olduğum tam problemdi ve bu onu çözdü.

— BobRodes

1

Benim xml dönüşümüm doctype'ı ekleyemiyordu, bu cevapla birlikte: stackoverflow.com/questions/3387127/set-html5-doctype-with-xslt benim için işler yoluna girdi.

— Daniel Bower

1

Bu harika cevap için 1'den fazla olumlu oy diliyorum. Saatlerce mücadele ettiğim sorunumu çözdü.

— Dr. DS

10

Kontrolün tam üstüne koymak için şu kodu kullanabilirsiniz:

    $("#dialog-edit").dialog({
...    
        position: { 
            my: 'top',
            at: 'top',
            of: $('#myControl')
        },

...
    });

— aşkı yaşa
kaynak

7

$(".mytext").mouseover(function() {
   var width = 250;
   var height = 270;
   var posX = $(this).offset().left - $(document).scrollLeft() - width + $(this).outerWidth();
   var posY = $(this).offset().top - $(document).scrollTop() + $(this).outerHeight();
   $("#dialog").dialog({width:width, height:height ,position:[posX, posY]});
}

Bir öğenin hemen altına bir iletişim kutusu yerleştirir. Offset () işlevini sadece tarayıcının sol üst köşesine göre konumu hesapladığı için kullandım, ancak position () işlevi, öğenin üst öğesi div veya iframe'e göre konumu hesaplar.

— M. Belen
kaynak

6

saf jquery yapmak yerine şunu yapardım:

$(".mytext").mouseover(function() {
    x= $(this).position().left - document.scrollLeft
    y= $(this).position().top - document.scrollTop
    $("#dialog").dialog('option', 'position', [y, x]);
}

Sorunuzu doğru anlıyorsam, sahip olduğunuz kod, iletişim kutusunu sayfada kaydırma yokmuş gibi konumlandırıyor, ancak kaydırmayı hesaba katmasını istiyorsunuz. benim kodum bunu yapmalı.

— Samuel
kaynak

Nedense document.scrollleft benim için tanımsız.

— Wickethewok

2

scrollLeft scrollTop yararlanmak unuttum onun benim kötü,

— Samuel

var x = el.pozisyonu (). left + el.outerWidth (); var y = el.pozisyon (). top - $ (belge) .scrollTop (); benim için çalıştı. Sorun şu ki, içindeki bilgileri değiştirdikten sonra iletişim kutusunun yüksekliğini ve genişliğini alamıyorum.

— rball

4

Bu sayfa , kaydırma ofsetinizi nasıl belirleyeceğinizi gösterir. jQuery benzer işlevlere sahip olabilir, ancak bulamadım. Sayfada gösterilen getScrollXY işlevini kullanarak, x ve y koordinatlarını .position () sonuçlarından çıkarabilmelisiniz.

— Philip Tinney
kaynak

4

biraz geç ama bunu şimdi $ j (object) .offset (). left ve .top kullanarak yapabilirsiniz.

— user363690
kaynak

4

Konuşma balonunun pek doğru olduğunu düşünmüyorum. Çalışması için biraz ince ayar yaptım ve öğe bağlantının hemen altında açılıyor.

function PositionDialog(link) {
    $('#myDialog').dialog('open');
    var myDialogX = $(link).position().left;
    var myDialogY = $(link).position().top + $(link).outerHeight();
    $('#myDialog').dialog('option', 'position', [myDialogX, myDialogY]);
}

— uçurum
kaynak

3

Merkez konumunu sabitlemek için kullanıyorum:

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}

— Eduardo Cuomo
kaynak

3

İşte kod .., jQuery UI iletişim kutusu merkeze nasıl konumlandırılır ......

var $about = $("#about");

   $("#about_button").click(function() {
      $about.dialog({
         modal: true,
         title: "About the calendar",
         width: 600,         
         close: function() {
            $about.dialog("destroy");
            $about.hide();
         },
         buttons: {
            close : function() {
               $about.dialog("close");
            }
         }
      }).show();

      $about.dialog("option", "position", 'center');

   });

— Manu RS
kaynak

3

$("#myid").dialog({height:"auto",
        width:"auto",
        show: {effect: 'fade', speed: 1000},
        hide: {effect: 'fade', speed: 1000},
        open: function( event, ui ) {
          $("#myid").closest("div[role='dialog']").css({top:100,left:100});              
         }
    });

— Güneş Erdemi
kaynak

2

kullanabilirsiniz $(this).offset(), pozisyon ebeveyn ile ilgilidir

— Neil tang
kaynak

2

Önerilen tüm çözümleri denedim, ancak çalışmayacaklar çünkü iletişim kutusu ana belgenin bir parçası değil ve kendi katmanına sahip olacak (ama bu benim eğitimli tahminim).

Diyaloğu şununla başlat: $("#dialog").dialog("option", "position", 'top')
İle aç $(dialog).dialog("open");
Ardından, görüntülenen iletişim kutusunun x ve y değerlerini alın (belgenin başka herhangi bir düğümünü değil!)

var xcoord = $(dialog).position().left + ADD_MODIFIER_FOR_X_HERE;

var ycoord= $(dialog).position().top + ADD_MODIFIER_FOR_Y_HERE;

$(dialog).dialog('option', 'position', [xcoord , ycoord]);

Bu şekilde, koordinatlar belgeden değil iletişim kutusundan alınır ve konum, iletişim kutusunun katmanına göre değiştirilir.

— Mr.Mountain
kaynak

1

Diyaloğumun sayfada ortalanmasını sağlamak için birçok yol denedim ve kodun:

$("#dialog").dialog("option", "position", 'top')

bu oluşturulduğunda diyalog konumunu asla değiştirmeyin.

Bunun yerine, tüm diyaloğu almak için seçici seviyesini değiştiriyorum.

$("#dialog").parent() <- Bu, dialog () fonksiyonunun DOM'da oluşturduğu üst nesnedir, bunun nedeni $ ("# dialog") seçicisinin top, left niteliklerini uygulamamasıdır.

Diyaloğumu ortalamak için jQuery-Client-Centering-Plugin'i kullanıyorum

$ ( "# Diyalog") ana () centerInClient ()..;

— jmozko
kaynak

1

yukarıdaki çözümler çok doğrudur ... ancak UI iletişim kutusu pencere yeniden boyutlandırıldıktan sonra konumunu korumaz. aşağıdaki kod bunu yapar

            $(document).ready(function(){

                $(".test").click(function(){
                            var posX = $(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
                            var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();
                            console.log("in click function");
                            $(".abc").dialog({
                                position:[posX,posY]
                            });

                        })

            })

            $(window).resize(function(){
                var posX=$(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
                var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();

            $(".abc").dialog({
                                position:[posX,posY]
                            });
            })

— Kaustubh - KAY
kaynak

0

Ortada görüntüleme için üst konumu stilde ayarlayabilirsiniz, kodun:

.ui-dialog {top: 100px! önemli;}

Bu stil iletişim kutusunu üstten 100px aşağıda göstermelidir.

— Sanjay jangid
kaynak