Какая библиотека наложения jquery лучше?

Ответ 1

Мне нравится colorbox

Ответ 2

Я только что проверил colorBox и узнал, что у него 1000 строк кода для добавления наложения. несколько раз все, что я хочу, - это просто открыть содержимое элемента (например, div) в центре страницы, а плагин i, такой как colorBox, является определенным излишним для этих простых задач.

Лучшая вещь для такой простой задачи (tooltip, overlay и т.д.) - создать собственный plugin:

(function($, global) {

  "use strict";

  $.fn.cOverlay = function(contentClass) {
    var contentItems = contentClass || '.cOverlay';
    var template = $('<div class="overlay"><div class="content"><div class="close">close</div></div></div>');
    var overlay = template.css({
      'position': 'absolute',
      'width': '100%',
      'height': '100%',
      'backgroundColor': '#555',
      'top': '0',
      'left': '0',
      'display': 'none'
    });
    var content = template.find(".content").css({
      'float': 'left',
      'backgroundColor': '#fff'

    });
    var close = template.find(".close");

    content.append($(contentItems));
    $(contentItems).show();

    this.click(function() {

      overlay.show();
      content.show();


      var height = $(document).height() / 2 - content.height() / 2;
      var width = $(document).width() / 2 - content.width() / 2;

      content.css('marginTop', height);
      content.css('marginLeft', width);

      return false;
    });

    content.click(function(e) {
      e.stopPropagation();
      return false;
    });

    close.click(function() {
      overlay.hide();
      content.hide();
      return false;
    });


    overlay.click(function() {
      overlay.hide();
      content.hide();
      return false;
    });

    $(window).resize(function() {
      var height = $(document).height() / 2 - content.height() / 2;
      var width = $(document).width() / 2 - content.width() / 2;
      content.css('marginTop', height);
      content.css('marginLeft', width);
    });

    $('body').append(template);
  };

})(jQuery, window);

$ = jQuery;

вот моя версия простого наложения.

Ответ 3

jQuery tools также имеет плагин с надписью. Это довольно прилично.

Ответ 4

Мне всегда была удача с ThickBox, но я также не много перепутал с кем-либо из других. Мне это нравится из-за простоты внедрения. Sript.aculo.us для ProtoType есть много потрясающих функций для наложений, но иногда я чувствую, что ProtoType немного неудобен для работы с... Мое личное мнение.

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

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

Ответ 5

Пошел на этот вопрос, пытаясь принять решение о том, что с моей новой картой. Fancybox2 теперь находится в некоммерческой лицензии, поэтому я действительно хотел убедиться в colorbox или другой альтернативе и сохранить некоторые гроши, но я также столкнулся с этой ссылкой http://jsperf.com/colorbox-vs-fancybox и кажется, что colorbox не выигрывает при сравнении производительности - не длинным выстрелом - хотя это сравнение использует устаревшие версии обоих