Jak zmienić rozmiar TYLKO w poziomie lub w pionie za pomocą jQuery UI Resizable?

81

Jedynym rozwiązaniem, które znalazłem, jest ustawienie maksymalnej i minimalnej wysokości lub szerokości z bieżącą wartością.

Przykład:

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

Ale to jest naprawdę brzydkie, zwłaszcza jeśli muszę programowo zmienić wysokość elementu.

jquery jquery-ui jquery-ui-resizable

— Diego
źródło

145

Możesz ustawić handlesopcję zmiany rozmiaru , aby była wyświetlana tylko po lewej i prawej stronie (lub wschód / zachód), na przykład:

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

Możesz spróbować tutaj.

— Nick Craver
źródło

7

Właśnie znalazłem zastrzeżenie dotyczące tego rozwiązania. Po zakończeniu jako styl wbudowany nadal będzie umieszczać szerokość i wysokość. Stwarza to dla mnie problemy z rozwiązaniem tylko wertykalnym. Po zmianie rozmiaru szerokość jest ustawiona i nie wynosi już 100% (ale wartość w pikselach). Po prostu wstawiam to tutaj, na wypadek gdyby inni szukali i natknęli się na to.

— Fernker

@Fernker Tak, to jest ból.

— Ben,

możesz otrzymać procentową szerokość, jeśli nadasz właściwości min-width i max-width o tej samej wartości do swojego div. To nie zostanie przesłonięte :)

— Sébastien

2

Niepowodzenie testu shift-drag.

— nic niepotrzebnego

@ nic niepotrzebnego, czy możesz opisać „test przesunięcia i przeciągnięcia”?

— Jon z

27

Podczas gdy plakat prosił głównie o zmianę rozmiaru tylko w poziomie, pytanie dotyczy również pionu.

Przypadek pionowy ma specjalny problem: być może ustawiłeś względną szerokość (np. 50%), którą chcesz zachować nawet po zmianie rozmiaru okna przeglądarki. Jednak interfejs użytkownika jQuery ustawia bezwzględną szerokość w pikselach po pierwszej zmianie rozmiaru elementu i utrata względnej szerokości.

Jeśli znajdziesz następujący kod do pracy w tym przypadku użycia:

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

Zobacz także http://jsfiddle.net/cburgmer/wExtX/ i jQuery UI resizable: automatyczna wysokość przy użyciu samego wschodniego uchwytu

— cburgmer
źródło

2

Bardzo ciekawe, dziękuję. Będę o tym pamiętać. Myślę, że ważne jest, aby zauważyć, że element o zmiennym rozmiarze musi mieć swoją szerokość ustawioną przez css, jeśli nie, zostanie utracony po zmianie rozmiaru. Zobacz tutaj jsfiddle.net/paska/wExtX/10

— Diego

1

To jest rozwiązanie, którego szukałem. Z jakiegoś powodu, mimo że uchwyt jest wyłączony dla tego regionu, jego wymiary wydają się nadal ustawione na px. Jeśli nie używasz tej metody, tracisz wysokość lub szerokość opartą na%.

— Serhij

W rzeczywistości wydaje się, że to nie działa w jQuery-ui 1.11.0. Szerokość CSS ustawiona bezpośrednio w elemencie nie jest pobierana z szerokości początkowej. Próbuję ustawić szerokość jako procent i jest ona zapisywana liczbą px.

— Ben,

Dzięki, ta sztuczka przydała się również, aby zignorować height''resizestop

— ``

18

Bardzo proste rozwiązanie:

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

Działa to również dla draggable (). Przykład: http://jsfiddle.net/xCepm/

— Jan
źródło

1

To jest naprawdę brzydkie !! Prawidłowe rozwiązanie (to, którego mamy użyć) to @Nick Craver's

— Diego,

1

Zgadzam się! :-) Ale fajnie, że działa z resizable () i draggable ().

— stycznia 2012 r. O

1

Podoba mi się ten! Oprócz tego, że jest matematycznie fajny, pozostawia uchwyt w prawym dolnym rogu, dając wizualną wskazówkę, że rozmiar elementu można zmienić. W przyjętym rozwiązaniu uchwyt zmiany rozmiaru jest ukryty, a użytkownik musi zgadywać, że dolny margines jest gorącym punktem.

— corwin.amber

To jest idealne z powodów, dla których @ corwin.amber stwierdził

— Lombas

To było idealne dla moich potrzeb:{handles: 'se', grid: [10000, 1], autoHide: true}

— elektrotyp

9

Rozwiązaniem jest skonfigurowanie skalowalnego rozmiaru, aby anulował zmiany wymiaru, którego nie chcesz.

oto przykład zmiany rozmiaru tylko w pionie:

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

— Jagnięcina
źródło

Czy to też nie byłoby trochę brzydkie?

— Diego

1

W ten sposób użytkownik widzi uchwyt, którego nie może użyć.

— nima

1

Chciałem zezwolić na zmianę rozmiaru, gdy przeglądarka zmienia rozmiar, ale nie wtedy, gdy użytkownik zmienia rozmiar elementu, to działało dobrze:

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

— Farhad Malekpour
źródło

0

Dla mnie rozwiązania z dwoma uchwytami i uchwytem resizedziałały dobrze, więc użytkownik widzi uchwyt, ale może zmienić rozmiar tylko w poziomie, podobne rozwiązanie powinno działać dla pionu. Bez obsługi w prawym dolnym rogu użytkownik może nie wiedzieć , że może zmienić rozmiar elementu.

Podczas używania ui.size.height = ui.originalSize.height;nie będzie działać poprawnie, jeśli element zmienił swój rozmiar ze stanu początkowego.

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

Aby uzyskać lepszą wydajność, $(this)można usunąć:

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
źródło