JQuery UI Resizable ile YALNIZCA yatay veya dikey olarak nasıl yeniden boyutlandırılır?

81

Bulduğum tek çözüm, maksimum ve minimum yüksekliği veya genişliği mevcut değerle ayarlamaktır.

Misal:

foo.resizable({ 
  maxHeight: foo.height(), 
  minHeight: foo.height() 
});

Ancak bu gerçekten çirkin, özellikle de öğenin yüksekliğini programlı olarak değiştirmem gerekirse.

jquery jquery-ui jquery-ui-resizable

— Diego
kaynak

145

Yeniden boyutlandırma handlesseçeneğini yalnızca solda ve sağda (veya doğu / batıda) gösterilecek şekilde ayarlayabilirsiniz , örneğin:

foo.resizable({
    handles: 'e, w'
});

Burada deneyebilirsiniz.

— Nick Craver
kaynak

7

Bu çözümle ilgili bir uyarı buldum. Satır içi stil olarak yapıldığında yine genişlik ve yüksekliği koyacaktır. Bu, sadece dikey bir çözümle benim için sorunlara neden oluyor. Yeniden boyutlandırdığımda genişlik ayarlandı ve artık% 100 değil (ancak bir piksel değeri). Başkalarının araması ve karşılaşması ihtimaline karşı bunu buraya koy.

— Fernker

@Fernker Evet, bu bir acı.

— Ben

div'inize aynı değerin min-width ve max-width özelliklerini verirseniz, bir yüzde genişliği geri alabilirsiniz. Overriden olmayacak :)

— Sébastien

2

Shift-drag testinde başarısız olur.

— noneisnecessary

@hiçbir şey gereksiz "shift-drag testini" tanımlayabilir misiniz?

— Jon z

27

Poster esas olarak yalnızca yatay yeniden boyutlandırma isterken, soru dikey de soruyor.

Dikey durumun özel bir sorunu vardır: Tarayıcı penceresi yeniden boyutlandırıldığında bile korumak istediğiniz göreceli bir genişlik (örneğin% 50) ayarlamış olabilirsiniz. Ancak jQuery UI, öğeyi ilk kez yeniden boyutlandırdığınızda ve göreli genişlik kaybolduğunda piksel cinsinden mutlak bir genişlik ayarlar.

Bu kullanım örneği için aşağıdaki kodu bulursanız:

$("#resizable").resizable({
    handles: 's',
    stop: function(event, ui) {
        $(this).css("width", '');
   }
});

Ayrıca bkz. Http://jsfiddle.net/cburgmer/wExtX/ ve jQuery kullanıcı arayüzü yeniden boyutlandırılabilir: yalnızca doğu tutamacını kullanırken otomatik yükseklik

— Cburgmer
kaynak

2

Çok ilginç, teşekkürler. Bunu aklımda tutacağım. Yeniden boyutlandırıldıktan sonra kaybolmayacaksa, yeniden boyutlandırılabilir öğenin genişliğinin css tarafından ayarlanması gerektiğini belirtmenin önemli olduğunu düşünüyorum. Buraya bakın jsfiddle.net/paska/wExtX/10

— Diego

1

Aradığım çözüm bu. Bazı nedenlerden dolayı, bölge için tutamaç devre dışı bırakılmış olsa da boyutları hala piksel olarak ayarlanmış gibi görünüyor. Bu yöntemi kullanmazsanız,% tabanlı yüksekliğinizi veya genişliğinizi kaybedersiniz.

— Serhiy

Aslında bu jQuery-ui 1.11.0'da çalışmıyor gibi görünüyor. Doğrudan öğe üzerinde ayarlanan CSS genişliği, başlangıç genişliğinden alınmaz. Genişliği bir yüzde olarak ayarlamaya çalışıyorum ve bir sayı ile üzerine yazılıyor px.

— Ben

Sayesinde bu hile de (yatay yeniden boyutlandırma için set css yeniden boyutlandırma sırasında en boy oranını korur 'shift-sürükle' görmezden kullanışlı geldi heightiçin ''de resizeve stopişleyicileri)

— nothingisnecessary

18

Çok basit bir çözüm:

$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical

Bu, sürüklenebilir () için de işe yarar. Örnek: http://jsfiddle.net/xCepm/

— Oca
kaynak

1

Bu gerçekten çirkin !! Ayrıca, doğru çözüm (kullanmamız gereken çözüm) @Nick Craver's

— Diego

1

Katılıyorum! :-) Ama yeniden boyutlandırılabilir () ve sürüklenebilir () ile çalışması güzel.

— Ocak

1

Bunu beğendim! Matematiksel olarak harika olmasının yanı sıra, tutacağı sağ alt köşede bırakarak öğenin yeniden boyutlandırılabilir olduğuna dair görsel bir ipucu verir. Kabul edilen çözümde, yeniden boyutlandırma tutamacı gizlidir ve kullanıcının alt kenar boşluğunun bir sıcak nokta olduğunu tahmin etmesi gerekir.

— corwin.amber

@ Corwin.amber'in belirttiği nedenlerden dolayı bu mükemmel

— Lombas

Bu, ihtiyaçlarım için mükemmeldi:{handles: 'se', grid: [10000, 1], autoHide: true}

— elektrotip

9

Çözüm, yeniden boyutlandırılabilirinizi, istemediğiniz boyuttaki değişiklikleri iptal edecek şekilde yapılandırmaktır.

Burada yalnızca dikey olarak yeniden boyutlandırılabilir bir örnek bulunmaktadır:

foo.resizable({
  resize: function(event, ui) { 
    ui.size.width = ui.originalSize.width;
  }      
});

— Lambder
kaynak

Bu da biraz çirkin olmaz mıydı?

— Diego

1

Bu şekilde kullanıcı, kullanamayacağı bir tutamaç görür.

— nima

1

Tarayıcı yeniden boyutlandırıldığında genişliğin yeniden boyutlandırılmasına izin vermek istedim, ancak kullanıcı öğenin boyutunu değiştirdiğinde değil, bu iyi çalıştı:

foo.first().resizable({
    resize: function(event, ui) { 
    ui.element.css('width','auto');
    },
});

— Farhad Malekpour
kaynak

0

Benim için hem tutamaçlı hem de resizeişleyicili çözümler iyi çalıştı, bu nedenle kullanıcı tutamacı görür ancak yalnızca yatay olarak yeniden boyutlandırabilir, benzer çözüm dikey için çalışmalıdır. Sağ alt işleyici olmadan kullanıcı , öğeyi yeniden boyutlandırabileceğinin farkında olmayabilir .

Kullanırken ui.size.height = ui.originalSize.height;bu olacaktır düzgün çalışmayabilir eleman başlangıç durumundan 's boyutunu değiştirdiyseniz.

foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        $(this).css("height", '');
    }
});

Daha iyi performans $(this)için kaldırılabilir:

var foo = jQuery('#foo');
foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        foo.css("height", '');
    }
});

0

Successfully working div position Vertically and horizontally
-------------------------------------------------------------

<head>

    <style>
    .resizable {
        height: 100px;
        width: 500px;
        background: #09C;
    }
    .resizable-x {
        height: 100px;
        width: 500px;
        background: #F60;
    }
    </style>

    <script>
     $(function() {

        $( ".resizable" ).resizable({
            grid: [10000, 1]
        });

        $( ".resizable-x " ).resizable({
            grid: [1, 10000]
        });


        $( ".resizable" ).draggable();
        });

      });
        </script>`enter code here`
    </head>

    <body>
    <div class="resizable"></div>
    <div class="resizable-x"></div>
    </body>

— Vinod Kumar
kaynak