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

Question 1

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.

Question 2

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.

Question 3

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

Question 4

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/

Question 5

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

Question 6

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');
    },
});

Question 7

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", '');
    }
});

Question 8

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>

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

@Fernker Tak, to jest ból.

Ben,

Answer 5

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

Answer 6

2

Niepowodzenie testu shift-drag.

nic niepotrzebnego

Answer 7

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

Jon z

Answer 8

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

``

Answer 9

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

Answer 10

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

Answer 11

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,

Answer 12

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

``

Answer 13

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

Answer 14

1

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

Diego,

Answer 15

1

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

stycznia 2012 r. O

Answer 16

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

Answer 17

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

Lombas

Answer 18

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

elektrotyp

Answer 19

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

Answer 20

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

Diego

Answer 21

1

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

nima

Answer 22

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');
    },
});

Answer 23

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", '');
    }
});

Answer 24

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>

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

Odpowiedzi: