написание функции jquery для повторного использования формулы - PullRequest
Новая
       5

написание функции jquery для повторного использования формулы

2 голосов
/ 16 июля 2011

У меня есть функция, которая делает кое-что, и единственное, что она делает, это вычисляет высоту / ширину и применяет css top / left для центрирования. Вместо того, чтобы переписывать формулу более одного раза, я хочу иметь возможность использовать ее повторно и передавать через нее аргументы.

У меня есть: 

loading.css({
    top: (wrapper.height() - loading.outerHeight()) / 2 + 'px',
    left: (wrapper.width() - loading.outerWidth()) / 2 + 'px'
});

Я хочу иметь возможность повторно использовать эти 2 формулы, а также заменить loading другими зарегистрированными элементами.

Я понятия не имею, что я делаю, и я попробовал несколько вещей, которые потерпели неудачу ...

Я хочу иметь возможность звонить через что-то вроде loading._center();

Когда функция запускается, она добавляет загрузочный div и вычисляет абсолютное позиционирование сверху и слева с использованием приведенного выше кода. Я хотел, чтобы он оставался по центру при изменении размера окна, поэтому я в основном продублировал приведенный выше код и обернул его функцией $(window).resize.

Когда отображается ошибка div, поскольку размеры по высоте / ширине различаются, я вычисляю верхнюю и левую части снова с похожим кодом. Вместо того, чтобы дублировать element.css({top: [...], left: [...]}), я просто хочу сделать что-то вроде ... 

_center = function() {
    var context = $(this);
    context.css({
        top: (wrapper.height() - context.outerHeight()) / 2 + 'px',
        left: (wrapper.width() - context.outerWidth()) / 2 + 'px'
    });
};

loading._center();

Я был близко. Я забыл вернуть расчет .. Теперь у меня есть: 

_center = function($this) {
    $this.css({
        top: (wrapper.height() - $this.outerHeight()) / 2 + 'px',
        left: (wrapper.width() - $this.outerWidth()) / 2 + 'px'
    });
};

_center(loading);

Ответы [ 2 ]

2 голосов
/ 16 июля 2011

вы можете предоставить функцию для второго аргумента: 

loading.css('top', function(index, oldValue) {
  return (wrapper.height() - $(this).outerHeight()) / 2 + 'px';
});

loading.css('left', function(index, oldValue) {
  return (wrapper.width() - $(this).outerWidth()) / 2 + 'px';
});

Вот документация .css ().

0 голосов
/ 16 июля 2011

Вы можете зарегистрировать его как плагин jQuery: 

$.fn._center = function(wrapper) {
    return this.each(function() {
        $(this).css({
            top: ($(wrapper).height() - $(this).outerHeight()) / 2 + 'px',
            left: ($(wrapper).width() - $(this).outerWidth()) / 2 + 'px'    
        });
    });
};

и назвать его так: 

var wrapper = $("#someDiv");
$(".foo, .bar")._center(wrapper);

См. авторизация плагинов jQuery.

...