Як змінити розмір ТІЛЬКИ по горизонталі чи вертикалі за допомогою jQuery UI Resizable?

81

Єдине рішення, яке я знайшов, - встановити максимальну та мінімальну висоту чи ширину з поточним значенням.

Приклад:

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

Але це справді негарно, особливо якщо мені доводиться програмно змінювати висоту елемента.

jquery jquery-ui jquery-ui-resizable

— Дієго
джерело

145

Ви можете встановити зміни розміру handlesопцію , щоб показувати тільки на лівій і правій (або схід / захід), як це:

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

Ви можете спробувати тут.

— Нік Крейвер
джерело

7

Я просто знайшов застереження щодо цього рішення. Він все одно буде встановлювати ширину та висоту, коли це зроблено як вбудований стиль. Це викликає у мене проблеми з вертикальним рішенням. Після того, як я змінив його розмір, ширина встановлюється, і вона більше не становить 100% (а значення px). Просто помістіть це сюди, якщо інші шукають і натрапляють.

— Fernker

@Fernker Так, це біль.

— Бен,

Ви можете повернути відсоток ширини, якщо для свого div задаєте властивості min-width та max-width того самого значення. Це не буде перевизначено :)

— Себастьян,

2

Не вдається перевірити перетягування зсуву.

— нічого непотрібного

@nothingispotrebno, чи можете ви описати "тест перетягування зсуву"?

— Jon z

27

Хоча плакат в основному просив змінити розмір лише по горизонталі, це питання також вимагає вертикального.

У вертикальному регістрі є особлива проблема: можливо, ви встановили відносну ширину (наприклад, 50%), яку ви хочете зберегти, навіть коли розмір вікна браузера зменшено. Однак користувальницький інтерфейс jQuery встановлює абсолютну ширину в px, коли ви вперше змінюєте розмір елемента, і відносна ширина втрачається.

Якщо знайдено такий код, який працює для цього випадку використання:

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

Дивіться також http://jsfiddle.net/cburgmer/wExtX/ і JQuery UI змінювані: автоматична висоту при використанні сходу ручки в поодинці

— cburgmer
джерело

2

Дуже цікаво, дякую. Я буду це пам’ятати. Думаю, важливо зауважити, що розмір елемента, що змінюється, повинен мати ширину, встановлену css, якщо не, він буде втрачений після зміни розміру. Дивіться тут jsfiddle.net/paska/wExtX/10

— Дієго

1

Це рішення, яке я шукав. З якоїсь причини, навіть незважаючи на те, що дескриптор відключений для регіону, його розміри, як видається, все ще встановлені в px. Якщо ви не використовуєте цей метод, ви втрачаєте% на основі висоти або ширини.

— Сергій

Насправді це не працює в jQuery-ui 1.11.0. Ширина CSS, встановлена безпосередньо на елементі, не береться з початкової ширини. Я намагаюся встановити ширину як відсоток, і вона записується з числом px.

— Бен,

Спасибі, цей прийом також прігождается ігнорувати «Shift-перетягнути» , який підтримує формат зображення при зміні розміру (для горизонтального зміни розміру, набір CSS , heightщоб ''в resizeі stopобробників)

— nothingisnecessary

18

Дуже просте рішення:

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

Це також працює для перетягування (). Приклад: http://jsfiddle.net/xCepm/

— Січня
джерело

1

Це справді негарно !! Крім того, правильним рішенням (тим, яке ми повинні використовувати) є @ Nick Craver's

— Diego

1

Я згоден! :-) Але приємно, що він працює зі змінами () та перетягуванням ().

— січня 12

1

Мені подобається цей! Окрім математичного класу, він залишає ручку в нижньому правому куті, що дає візуальний натяк на те, що елемент можна змінити. У прийнятому рішенні маркер зміни розміру прихований, і користувач повинен здогадатися, що нижнє поле - це гаряча точка.

— corwin.amber

Це ідеально з причин, за якими заявив @ corwin.amber

— Ломбас,

Це було ідеально для моїх потреб:{handles: 'se', grid: [10000, 1], autoHide: true}

— електротип

9

Рішення полягає в тому, щоб налаштувати розмір, який можна змінити, щоб він скасував зміни розміру, який ви не хочете.

ось приклад вертикально змінного розміру:

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

— Баранчик
джерело

Чи не було б це теж потворно?

— Дієго,

1

Таким чином користувач бачить дескриптор, яким він не може користуватися.

— німа

1

Я хотів дозволити повторний розмір ширини при зміні розміру браузера, але не коли користувач змінює розмір елемента, це спрацювало нормально:

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

— Фархад Малекпур
джерело

0

Для мене рішення як з ручками, так і з resizeобробником працювали нормально, тому користувач бачить маркер, але може змінювати розмір лише горизонтально, подібне рішення повинно працювати для вертикалі. Без нижнього правого обробника користувач може не знати, що він може змінити розмір елемента.

При використанні ui.size.height = ui.originalSize.height;він не працюватиме належним чином, якщо елемент змінив його розмір від початкового стану.

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

Для кращої роботи $(this)можна видалити:

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>

— Вінод Кумар
джерело