Заметки за март 2009 года (страница 2)

Центрирование элементов страницы в окне

Чтобы поместить какой-то элемент страницы, например, картинку, посредине окна нужно определить его размеры и положения полос прокрутки. Остальное уже простая арифметика. Все необходимы действия я завернул в плагин jQuery.


jQuery.fn.centering = function () {
    return this.each(function () {
        var offset = jQuery(this).offset(),
            w = jQuery(this).width(),
            h = jQuery(this).height();
        jQuery(this).css({
            'position': 'absolute',
            'width': w,
            'height': h,
            'top': parseInt(jQuery(window).scrollTop() - offset.top +
                     (jQuery(window).height() - h) / 2, 10),
            'left': parseInt(jQuery(window).scrollLeft() - offset.left +
                     (jQuery(window).width() - w) / 2, 10)
        });
    });
};

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

Оставте свой комментарий

Lightbox: презентационный инструмент

На мой взгляд, одним из эффектных презентационных инструментов для документов или изображений является Lightbox. Содержимое основной страницы затеняется или осветляется, и поверх него накладывается слой, например, с изображением.

Архив с исходным кодом и файлами изображений

Конструктор

  • new LightBox(options);

    Создает новый объект Lightbox с указанными параметрами или значениями по-умолчанию.

Методы

  • show(options)

    Отображает Lightbox с заданными параметрами или параметрами по-умолчанию.

  • hide()

    Закрывает Lightbox. Этот метод автоматически вызывается после нажатия пользователем значка «Закрыть»

Конфигурационные параметры

  • baseUrl

    Полный путь до оформления. Необходимость в этом параметре в основном вызвана тем, что для правильного отображения полупрозрачных PNG в IE6 используется фильтр AlphaImageLoader.

  • opacity

    Степень прозрачности подложки от 0 до 1.

  • color

    Цвет подложки – любое допустимое значение CSS.

  • showCallback

    Функция, которая будет вызвана после отображения Lightbox. В качестве аргумента функции передается DOMNode контейнера.

  • hideCallback

    Функция, которая будет вызвана после закрытия Lightbox.

  • dimensionsCallback

    Функция, которая возвращает требуемые значения ширины и высоты контейнера. Если она не будет определена, то контейнер будет занимать 80% от размеров окна по ширине и высоте.

Чтобы изменить тень, отбрасываемую контейнером, создайте аналогичное рисунку изображение и разрежьте его на 8 частей. Части тени нужно сохранить в формате PNG-24 с прозрачностью.

Шаблон для тени

Если ширина тени будет больше чем в шаблоне, то придется скорректировать размеры блоков и их позиционирование в коде.

Пример демонстрирует использования Lightbox в качестве просмотрщика изображений с Flickr.


var lb = new LightBox({
    'dimensionsCallback': function () {
        return {
            width: 240,
            height: 160
        };
    },
    'showCallback': function (node) {
        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=apple,mac&tagmode=all&format=json&jsoncallback=?",
                function(data) {
                    $(node).append('<img src="' + data.items[0].media.m + '" title="' + data.items[0].title + '" />');
                });
    }
});

lb.show();
Оставте свой комментарий

Использование prototype

Принципиально отличающимся от замыканий шаблоном написания модулей является объявление полей и методов через prototype.


var Product = function (name, cost) {
    this.name = name;
    this.cost = cost;
};

Product.prototype.draw = function () {
    // Комплексный метод создания представления продукта
    // Доступ к полям экземпляра осуществляется только через this
};

Весомым аргументом для его использования является крайне малый расход памяти в связи с тем, что общие методы уже не копируются как привилегированные, а передаются экземплярам в виде ссылок.

К недостаткам же можно отнести:

  • полное отсутствие частных полей (как правило, программисты оформляют такие поля символом «_» перед именем);
  • доступ к полям экземпляра осуществляется только через this, так как это единственная связующая переменная между привилегированными и общими методами.

Если все-таки важно иметь действительно частные поля, защищенные от доступа извне, то запросто можно скомбинировать этот прием с замыканием.


var Product = function (name, cost) {
    // частная переменная
    var id = name + '-' + new Date().getTime();
    // привилегированный метод для доступа к частной переменной
    this.getId = function () {
        return id;
    };
    // привилегированные поля
    this.name = name;
    this.cost = cost;
};
Оставте свой комментарий