CREATONICA


Использование плагинов внутри окна facebox.

Alex` blog / Web / Склад
Июнь 19, 2010 2

Есть такой замечательный плагин для jquery – facebox. Плагин позволяет добавлять на веб-страницы всплывающие окна, которые используется на сайтах: Facebook и Вконтакте. Вы можете размещать любой контент внутри этих окон.

Думаю, примеры использования плагина вы изучите самостоятельно, в этом ничего сложного нет. Вся необходимая информация присутствует на сайте плагина. Я на этом специально остонавливаться не буду. Некоторые проблемы возникают при необходимости использовать другие плагины jquery внутри facebox, например прицепить Datepicker к элементу формы. Проблема возникает, когда контент, размещаемый внутрь окна уже присутствует в коде страницы до инициализации facebox, когда вы размещаете в окне содержимое элементов с определенным id или class. Например, такмим образом:

1
      $.facebox($('#some_div').html());

В данном случае facebox создает копию содержимого элемента в окне. Соответственно все аттрибуты копируются и когда вы навешиваете datepicker, к примеру, на input, несмотря на все ваши ожидания плагин работать не будет.

1
      $('#some_div #some_input').datepicker();

Решение очень простое: просто переименовать при событии создания окна требуемые аттрибуты. Рассмотрим пример, когда необходимо переименовать значения аттрибута id у элементов с аттрибутом class = «datepicker»:

1
2
3
4
5
6
7
8
      opened = false;
      $(document).bind('reveal.facebox', function() {
          if(!opened){
              $('#facebox .datepicker').each( function(intIndex){
                   $(this).attr('id',$(this).attr('id') + '-2')
              });
              opened = !opened;
          }

Здесь мы вводим переменную opened, незачем проводить эту операцию после первого открытия. Все элементы переименованы! Теперь просто навешиваем datepicker на «новый элемент»:

1
2
3
      $(document).bind('reveal.facebox', function() {
          $('#some_input-2').datepicker();
      });

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

2 Comments

    >>jQuery(this).attr(‘id’)
    не jQ-way, noconflict тут не нужен :)

Прокомментировать