SORU
9 ŞUBAT 2010, Salı


Otomatik olarak yeniden boyutlandırmak jQuery UI içeriği ajax ile yüklenen genişliğine iletişim

Bir sürü sorun bu konuda bilgi ve örnekler bulmakta zorlanıyorum. Benim uygulama ile yüklenen divs bağlı jQuery UI iletişim kutuları bir dizi var .() ajax çağrıları. Onlar aynı Kur aramayı kullanın:

 $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true
 });

Ben sadece iletişim içti içeriğin genişliğini yeniden boyutlandırmak istiyorum. Şu anda, sadece 300px genişliği (varsayılan) kalır ve yatay kaydırma çubuğu.

Söyleyebileceğim kadarıyla, "autoResize" artık diyaloglar için bir seçenek olduğunu ve hiçbir şey olmuyor ben bunu belirtin.

Her iletişim farklı bir genişliğe sahip olacak gibi .dialog("option", "width", "500") gerçekten bir seçenek değil bu yüzden her iletişim için ayrı bir işlevi yazmak çalışıyorum.

İletişim seçenekleri width: 'auto' belirtme sadece diyaloglar tarayıcı penceresinin genişliğini 0 almak yapar.

Seçeneklerim neler? 1 UI jQuery ile jQuery 1.4.1 kullanıyorum.8rc1. Bu gerçekten kolay bir şey gibi görünüyor.

EDİT: bu kludgy bir çözümü uygulamaya çalıştım ama hala daha iyi bir çözüm arıyorum.

CEVAP
14 ŞUBAT 2010, Pazar


Sadece küçük bir örnek uygulama JQuery 1.4.1 ve UI 1 ile yazmaya çalıştım.8rc1. Tek yaptığım yapıcı olarak belirtin:

var theDialog = $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        width:'auto'
});

Bu tarayıcı penceresinin 100% genişlik almak yapar ama tatlı işte, FF3 test çalıştığını söylediğini biliyorum.6, Chrome ve IE8.

AJAX çağrıları, sadece el ile iletişim HTML değiştirme yapmıyorum ama herhangi bir probs neden olacağını sanmıyorum. Başka bir css ayarı bu nakavt olabilir mi?

Tek sorunun bu olduğunu yapar genişliği, merkezden ama bunu buldum support ticket nereye kaynağı geçici bir çözüm yerine yerleştirilmesi dialog('open') açıklamada setTimeout sorunu düzeltmek için.

Burada kafamda etiket içeriği:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function(){
        var theDialog = $(".mydialog").dialog({
            autoOpen: false,
            resizable: false,
            modal: true,
            width: 'auto'
        });

        $('#one').click(function(){
            theDialog.html('some random text').dialog('open');
        });

        $('#two').click(function(){
            theDialog.html('<ul><li>Apple</li><li>Orange</li><li>Banana</li><li>Strawberry</li><li>long text string to see if width changes</li></ul>').dialog('open');
        });

        $('#three').click(function(){
            //this is only call where off-centre is noticeable so use setTimeout
            theDialog.html('<img src="./random.gif" width="500px" height="500px" />');
            setTimeout(function(){ theDialog.dialog('open') }, 100);;
        });
     });
</script>

Js indirdim ve http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zipJquery UI css. vücut:

<div class='mydialog'></div>
<a href='#' id='one'>test1</a>
<a href='#' id='two'>test2</a>
<a href='#' id='three'>test3</a>

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Benjamin Heckendorn

    Benjamin Hec

    4 Mayıs 2008
  • FlippinWindows | #1 Windows Tutorial Channel!

    FlippinWindo

    23 Mayıs 2010
  • Snazzy Labs

    Snazzy Labs

    9 Aralık 2008