Изменение размера jQuery UI, возвращая размер - PullRequest
Новая
       6

Изменение размера jQuery UI, возвращая размер

1 голос
/ 12 декабря 2011

Слушай, я новичок в jquery, и я пытаюсь использовать изменяемый размер. Я могу заставить его работать нормально, но не могу понять, как вернуть новый размер. Я хотел бы установить новый размер переменных php для сохранения в БД. Я новичок в javascript и jquery, поэтому любая помощь будет большой помощью.

Ответы [ 3 ]

5 голосов
/ 18 ноября 2013

Во время этих ответов все могло быть иначе, но теперь пользовательский интерфейс jQuery позволяет легко получать информацию о ваших событиях и элементах пользовательского интерфейса.Я настоятельно рекомендую консоль, регистрирующую переменную пользовательского интерфейса, поскольку из нее можно получить МНОГО информации.Однако, чтобы ответить на ваш вопрос немного лучше: 

$('.selector').resizable({
    stop: function (evt, ui) {
        console.log(ui.size);
    }
});

должен дать объект со свойствами высоты и ширины.Это ваши новые значения высоты и ширины элементов с изменяемым размером

Если вы хотите вычислить дельту любого из этих значений, вы можете ссылаться на ui.originalSize и на свойства высоты или ширины.*

Надеюсь, что это получится немного более кратким, чем другие ответы

4 голосов
/ 12 декабря 2011

Плагин с изменяемыми размерами сам по себе не предоставляет метод для получения размеров.Я предполагаю, что они не реализовали это, потому что это были бы просто методы избыточности на том же узле, поскольку в ядре jQuery уже есть методы для этого.

jQuery предоставляет несколько способов найти ширину и высоту в зависимости от того, что выхотеть сделать.Простые методы width / height получают значения css.Однако во многих случаях может оказаться более полезным использовать методы externalWidth и outerHeight, поскольку они возвращают общий расчетный размер элемента на странице, включая все поля, границы и т. Д.

Примеры: 

//Width/Height of just the element (as from css)
var w = $('.selector').width()
var h = $('.selector').height()

//Width/Height of total space the element takes up with formatting (includes border and margin)
var w = $('.selector').outerWidth()
var h = $('.selector').outerHeight()

//Width/Height of the space the content of the element takes up
var w = $('.selector').innerWidth()
var h = $('.selector').innerHeight()

Редактировать Применение методов к событиям с изменяемым размером

Плагин с изменяемым размером предлагает несколько событий для привязки: создание, запуск, изменение размера и остановка.Мы можем связать функцию для вызова любого из этих событий при инициализации или в любое время позже.Как это звучит, стартовое событие срабатывает, когда вы начинаете изменять размер элемента, прекращаете срабатывать, когда вы прекращаете изменять размер элемента, и изменение размера вызывается каждый раз, когда изменяется размер элемента во время изменения размера (каждый пиксель).

Bindingпри инициализации: 

$('.selector').resizable({
    //Other options
    create : function(event,ui) {...},
    start : function(event,ui) {...},
    stop : function(event,ui) {...},
    resize : function(event,ui) {...}
});

Или связывание в любой момент позже 

$('.selector').bind('resizecreate',function(event,ui) {...});
$('.selector').bind('resizestart',function(event,ui) {...});
$('.selector').bind('resizestop',function(event,ui) {...});
$('.selector').bind('resize',function(event,ui) {...});

Теперь для вашего случая я бы предложил 1 из 2 вариантов, либо связывание команд start и stop для полученияВаши исходные и измененные размеры или привязка для изменения размера для работы со значением в реальном времени.

Пример для шаблона запуска / остановки 

var startW = 0;
var startH = 0;

$('.selector').resizable({
    //Other options
    start : function(event,ui) {
        startW = $(this).outerWidth();
        startH = $(this).outerHeight();
    },
    stop : function(event,ui) {
        endW = $(this).outerWidth();
        endH = $(this).outerHeight();
        alert("width changed:"+ (endW-startW) + " -- Height changed:" + (endH-endW));
    }
});

Пример для печати значения при переходе на консоль 

$('.selector').resizable({
    //other options
    resize: function(event,ui) {
        console.log([$(this).outerWidth(),$(this).outerHeight()]);
    }
});

Надеюсь, это поможет

2 голосов
/ 12 декабря 2011

пример div: 

<div id="div">
    <p>this is the div i want to retrieve demensions</p>

    <p>second paragraph</p>
</div>

получить размеры с помощью этого JavaScript 

var width = $("#div").css("width"),
    height =$("#div").css("height");

alert (width + ", " + height);

чтобы записать измерения обратно в базу данных, вам нужно будет отправить значения обратно как часть form или через запрос AJAX

...